Home

Awesome

Read my Medium article to learn more about differential growth and this project.

Additional media is available on my portfolio

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.

About differential growth

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:

  1. Each node wants to be closer to it's connected neighbors, and will experience an attraction force towards them.
  2. Each node wants to sit on a straight line between it's neighbors to minimize curvature.
  3. Each node must never be too close to any other node to prevent pinching or breaking of the overall continuity of the line.
  4. When the distance between two nodes exceeds a predefined distance (due to the influence of the other rules), a new node must be injected between them to split the line.
  5. New nodes are introduced to the system according to some growth scheme in order to induce asymmetry.
    • Without this rule the entire system would just uniformly expand and reach an equilibrium state.

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:

Global keyboard controls

All of these keyboard controls are available in each experiment.

KeyResult
1-9Change initial seed path shape (if available)
tToggle trace mode
nToggle visibility of nodes
rReset simulation with same parameters
SpacePause or unpause the simulation
iToggle inverting of colors
dToggle "debug mode"
fToggle shape fills
hToggle drawing of periodic path history
sDownload an SVG of current geometry
bToggle visibility of path bounds

Going further

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:

  1. Tune forces (attraction, repulsion, and alignment) to identify stable and interesting regions of the parameter space.
  2. Make optimization improvements to enable larger scales, without compromising too much in code readability.
    • Maybe a more efficient spatial index or nearest-neighbor algorithm can be found?
  3. Move into the third dimension. Many routes to explore here, including:
    1. Keep the simulation focused on 2D, but take snapshots on intervals and increment Z position for next iteration.
    2. Use a 3D package like ThreeJS and map the same 2D simulation onto the surfaces of 3D meshes.
    3. Explore professional-grade VFX and CAD options like Houdini, Unity, and Rhino + Grasshopper to achieve extreme performance.
  4. Port the code into a more performant language / framework like openFrameworks or Cinder. Even the Java-based Processing environment may show some performance gains!

References

Local install instructions

  1. Run npm install in both the root (/) and core/ folders.
  2. Run gulp to kick off a watch process and a browser window with LiveReload enabled.
  3. Keep Gulp running and the browser window open while making changes. If all goes well, new builds will kick off when you save your changes and the browser will refresh!

Packages used

Samples

Single line growth process

Triangle

Multiple shapes

SVG supershape as input

Opposing arcs converging