Keyboard shortcuts

t - toggle trace effect
n - toggle visibility of nodes
r - reset canvas
Space - pause or unpause the simulation
d - toggle debug mode
f - toggle shape fills
h - toggle history effect
s - download an SVG of the current drawing

About this app

This interactive application lets you grow fun 2D forms out of simple shapes using a process found in nature called differential growth. Use the tools on the left to draw lines, rectangles, and circles or import custom SVG artwork, then hit the Play button to start the process!

When you see something you like, use the Download SVG button (or the S key) to get a vector file that you can use with pen plotters, laser cutters, and design software like Fusion 360 or Illustrator!

What is differential growth?

Differential growth is a natural process that produces interesting undulating forms out of over-constrained chains of particles using simple, configurable rules.

Anders Hoff describes this process well in his article Shepherding Random Growth.

How was this made?

This app was built using JavaScript (ES6), p5.js, Babel, Browserify, and a smattering of single-purpose packages.

Source code and documentation available on Github.

Adjust parameters

Distance parameters

Minimum distance

Minimum allowed distance between adjacent nodes. Lower values create smoother, more detailed curves but reduce performance. Higher values create chunkier, less organic shapes.

Maximum distance

Maximum distance before a new node is inserted between two neighbors. Lower values create denser growth patterns with more nodes. Higher values allow looser, more sparse structures.

Repulsion radius

How far each node can "sense" and push away from nearby nodes. Larger values prevent paths from overlapping but create more spread-out forms. Smaller values allow tighter, more compact growth.

Force parameters

Attraction force

How strongly each node pulls toward its connected neighbors on the path. Higher values keep the path cohesive and prevent it from breaking apart. Lower values allow more flexible, wandering growth.

Repulsion force

How strongly nodes push away from nearby nodes within the repulsion radius. Higher values create more dramatic undulations and prevent overlapping. Lower values allow tighter, more tangled structures.

Alignment force

How strongly each node tries to align with its connected neighbors to form smoother curves. Higher values reduce sharp angles and create flowing lines. Lower values allow more erratic, jagged growth patterns.

Visual modes

Draw nodes

Fill shapes

Debug mode

Trace effect

History effect

History capture interval (in ms)

How often to capture a snapshot (in milliseconds). Lower values create more densely packed history layers. Higher values show wider gaps between growth stages.

Max history size

Maximum number of historical snapshots to keep. More snapshots show more growth history but may impact performance.

Brownian motion

Use Brownian motion

Displacement range

Amount of random "jiggling" applied to each node. Higher values create more chaotic, irregular edges. Lower values produce smoother, more controlled growth. Adds organic imperfection.

Simulation speed

Time scale

Speed multiplier for the simulation. 1x is normal speed, higher values run the simulation faster by performing multiple growth iterations per frame. Useful for quickly exploring growth patterns.