Visual experiments exploring differential growth as a 2D morphogenesis tool.
Read my Medium article to learn more about differential growth and this project.
This repo contains a series of visual experiments built with JavaScript that explore the topic of differential growth as a method for generating interesting 2D forms.
I am particularly interested in the application of such techniques in the context of digital fabrication, so these experiments will be more focused on schematic representations (colorless, vector-based, SVG/STL exports) over purely visual effects.
Differential growth is a process that uses simple rules to produce undulating, buckling forms that mimic or simulate similar forms found in the natural world. Meandering rivers, rippled surface textures of plants/seeds/fruits, space-filling behaviors of worms, snakes, intestines, and more are all reminiscent of this process, perhaps even making use of some of the same principles through physical and organic components.
The process itself can be described algorithmically at a high level by first supposing that we are starting with a single continuous path consisting of points (called nodes) connected by lines (called edges). In such a system, we apply the following rules:
Within these rules you can see several opportunities for customization that enable a certain amount of creative direction to be imposed by the developer. These include:
All of these keyboard controls are available in each experiment.
Key | Result |
---|---|
1 -9 |
Change initial seed path shape (if available) |
t |
Toggle trace mode |
n |
Toggle visibility of nodes |
r |
Reset simulation with same parameters |
Space |
Pause or unpause the simulation |
i |
Toggle inverting of colors |
d |
Toggle "debug mode" |
f |
Toggle shape fills |
h |
Toggle drawing of periodic path history |
s |
Download an SVG of current geometry |
b |
Toggle visibility of path bounds |
This repository is more like a sketchbook, meant to contain some thematic scribbles on the topic of differential growth. I did not take a very rigorous approach in these experiments, opting to focus more on curiosity and effects than sheer performance and broader applications.
There are a lot of ways that the code I've written can be improved, or the algorithm itself explored more deeply, and I encourage you to take the next steps to expand upon what I've provided and create something new and awesome! Here are a few ideas that I've thought about exploring:
npm install
in both the root (/
) and core/
folders.gulp
to kick off a watch process and a browser window with LiveReload enabled.lerp
and map
).<path>
elements. Used to import SVG files.d
attribute of SVG <path>
elements. Used to export SVG files from paths.