A field guide to generative form.

Notice

How can the same short instruction make a whole picture?

Understand

An algorithm is a set of instructions. Generative art repeats those instructions, letting one step build on the last. An iteration is one application of the rule: use the answer from this step as the input to the next.

A state records what the system is like right now. Its starting state is its initial condition. A parameter is a setting inside the rule. The number of iterations tells us how many times to apply it. These are three different choices.

Work it through

Try a number before a picture. Let x mean the current value. The small label “next” means the value after one update; it is not multiplication.

$\text{xₙₑₓₜ = 0.5x + 1}$

Start with 0. Half of 0 plus 1 is 1. Half of 1 plus 1 is 1.5. Half of 1.5 plus 1 is 1.75. Our sequence is 0 → 1 → 1.5 → 1.75.

This sequence approaches 2. At 2, the rule gives 2 again: a fixed point. Other rules can grow without limit or have more intricate behaviour. Repetition does not always mean a repeating answer.

Notice

If an arrow moves a point three across and two down, where does it land?

Understand

A point (x, y) gives horizontal and vertical position. In these coordinate diagrams, positive x is right and positive y is up. A vector is a movement with a direction and a length. Its two components say how far to move horizontally and vertically.

Add vectors component by component. You can place one arrow at the tip of another without changing the movement it represents. This tip-to-tail addition will later let us combine rotating circles.

Work it through

$\text{(2, 1) + (3, −2) = (5, −1)}$

Start at (2, 1). Add 3 horizontally: 2 + 3 = 5. Add −2 vertically: 1 − 2 = −1. The endpoint is (5, −1).

Pythagoras measures the arrow from the origin (0, 0) to (3, 4). Its length is √(3² + 4²) = √(9 + 16) = √25 = 5. The square-root symbol asks which non-negative number squares to the value inside.

Notice

Why do circles and waves appear together so often?

Understand

Draw a circle of radius 1, centred at the origin: a unit circle. Measure an angle anticlockwise from the rightward direction. The point at that angle has horizontal coordinate cosine, written cos, and vertical coordinate sine, written sin.

An angle can be measured in degrees or radians. A radian compares arc length to radius. A full turn is 360° or 2π radians, where π is about 3.14159. A quarter turn is 90° or π/2 radians. Both units describe the same angle.

Work it through

$\text{x = r cos θ y = r sin θ}$

Here r is radius and θ (theta) is angle. At 0°, a unit point is (1, 0). At 90° it is (0, 1); at 180°, (−1, 0); at 270°, (0, −1). At 360° it returns to (1, 0).

Multiplying both coordinates by a radius of 2 doubles their distance from the centre. Watching just the horizontal or vertical coordinate as the point turns produces a wave. Rotation speed changes how many waves fit into the same time; the starting angle shifts where the wave begins.

Notice

Can a coastline grow from one letter?

Understand

An L-system starts with a string of symbols called an axiom. A production rule says how to replace a symbol. One generation replaces every applicable symbol using the previous generation’s string. Newly written symbols wait until the next generation.

For the Koch curve, start with F and use F → F+F--F+F. F means draw forward; + and − turn the cursor. Two consecutive minus signs mean two turns. At 60°, the four new segments form a bent replacement for one segment.

Work it through

Generation 0 is F: one forward command. Generation 1 is F+F--F+F: four forward commands. In generation 2, replace each of those four Fs with the full rule, giving 4 × 4 = 16 forward commands.

The turn symbols survive unchanged. We count forward commands rather than total characters because only the forward commands draw segments. The demonstration highlights the first F in the previous string and the replacement it contributes to the next.

Notice

How does a pen return to a branch junction without drawing a line back?

Understand

A drawing cursor, sometimes called a turtle, stores a position and a heading. F draws one step along that heading. + and − change the heading by the selected angle. The renderer uses screen coordinates: y increases downwards, so a positive turn appears clockwise.

An opening bracket [ saves the current position and heading. A closing bracket ] restores the most recently saved pair. A stack is simply a last-in, first-out pile of these saved states. Restoring a state moves the cursor without drawing.

Work it through

Read the plant rule F[+F]F[-F]F. Draw F to a junction. Save it with [. Turn with + and draw a branch with F. Restore the junction and its original heading with ]. Draw the next trunk segment with F.

Then save that new junction, turn with −, draw another branch, and restore it. The final F continues the trunk. There are five drawn segments. The two returns are movements of the cursor, not extra segments in the picture.

Notice

Does twice as much detail mean twice as wide a picture?

Understand

Depth counts generations. If each F produces four Fs, depth d gives 4ᵈ segments; if each produces five, it gives 5ᵈ. The raised number is an exponent: 4³ means 4 × 4 × 4. At depth 0, the count is 1.

Turn angle changes geometry even with the same string. The classic Koch curve uses 60°. Changing the angle creates a different bend. Depth and angle answer different questions: how much rewriting, and how the commands turn.

Work it through

In the classic Koch construction, replace a unit segment with four segments of length 1/3. Total length becomes 4 × 1/3 = 4/3. Repeat once more to get (4/3)² = 16/9. More length fits into the same overall end-to-end span.

The Lab draws unit segments, then scales the entire result to fit its frame. This framing can conceal growth in raw size. It does not undo the extra detail.

The other grammars share this process. Dragon starts with FX and uses X → X+YF+ and Y → −FX−Y; X and Y are rewrite helpers, not drawn segments. Sierpinski starts with A and uses A → B−A−B and B → A+B+A; both A and B draw. Plant starts with F and uses F → F[+F]F[−F]F.

Notice

Why can a wandering line look flowing instead of jittery?

Understand

Independent random samples do not use their neighbours to choose a value. Correlated noise has structure across nearby positions. In one-dimensional Perlin gradient noise, nearby sample positions tend to give smoothly changing values.

The renderer assigns a seeded gradient, or slope, to each integer position on a line. Between two integers, each slope contributes its slope multiplied by the displacement from its own endpoint. Those two contributions are blended. The gradients are random-looking; the blend makes the result continuous and smooth.

Work it through

Let q be the fraction of the way across an interval. With gradients 0.6 on the left and −0.2 on the right, halfway means q = 0.5. The left contribution is 0.6 × 0.5 = 0.3. The right contribution is −0.2 × (0.5 − 1) = 0.1.

Half of each contribution gives 0.5 × 0.3 + 0.5 × 0.1 = 0.2. This renderer multiplies the blend by 2, giving noise 0.4. Away from the midpoint, the weight is a smooth fade rather than simply q.

$\text{s = 6q⁵ − 15q⁴ + 10q³}$

You do not need to memorise this polynomial. It makes the blend join gently at interval endpoints. The demo’s contribution readout shows the actual seeded gradients rather than the illustrative slopes above.

Notice

Is a noise value a position, a speed, or a turn?

Understand

Here it is used to change a heading. The walk first turns, then moves one unit in its new direction. The turn is added to the previous heading, so each step depends on the path so far.

Let θ (theta) be heading in radians, A be amplitude, f be noise frequency, and i be the step index, beginning at zero. Here i is an ordinary counting index, not the imaginary unit used in complex numbers. n(if) means “sample noise at position i multiplied by f.” Labels “next” mean the new values.

Work it through

$\text{θₙₑₓₜ = θ + 0.4 A n(if)}$

$\text{xₙₑₓₜ = x + cos θₙₑₓₜ}$

$\text{yₙₑₓₜ = y + sin θₙₑₓₜ}$

If noise is 0.5 and amplitude is 0.5, the turn is 0.4 × 0.5 × 0.5 = 0.1 radians. Multiply by 180/π to get about 5.7°. The step still has length 1.

The drawing starts facing up at −π/2 in screen coordinates. Screen y increases downwards; this differs from the upward-positive coordinate diagrams in Foundations.

Notice

Which setting should you change if you want stronger turns?

Understand

Amplitude scales each steering turn. Frequency changes how quickly the walk travels through the noise pattern: a larger value moves further through noise per step. Steps determines how long the walk runs.

A seed chooses a reproducible noise pattern. The same seed and settings produce the same walk. Use a fixed seed when comparing a control, so that you are changing one cause at a time. Seeds affect noise walks and reaction starting fields; the other three families in this site do not use them.

Work it through

With 700 steps, compare amplitudes 0, 0.4, and 0.8 at frequency 0.012 and seed 4701. The first has no steering. At the same step index, the last has twice the added turn of the middle one.

Now compare frequency 0.012 with 0.024, keeping amplitude fixed. At step 100, the sample positions are 1.2 and 2.4. The frequency change selects different noise values; it does not just multiply the same turn.

Accumulated turns and automatic fitting make the resulting image more complicated than “twice the amplitude means twice the width.” Predict the local rule first, then inspect the global result.

Notice

What if one number could describe both coordinates of a point?

Understand

A complex number z = a + bi represents the point (a, b). The real part a measures horizontal position; the imaginary part b measures vertical position. The symbol i is defined by i² = −1. It is not a slider or an unknown to solve for.

Addition works component by component: (1 + 2i) + (3 − i) = 4 + i. Multiplication uses ordinary bracket expansion, followed by replacing i² with −1. The length of the corresponding arrow is √(a² + b²).

Work it through

$\text{(a + bi)² = (a² − b²) + (2ab)i}$

Expand the brackets: (a + bi)(a + bi) = a² + abi + abi + b²i². The two middle terms combine to 2abi, while b²i² becomes −b².

For 1 + i, use a = 1 and b = 1. Real part: 1² − 1² = 0. Imaginary part: 2 × 1 × 1 = 2. So (1 + i)² = 2i: the point (1, 1) maps to (0, 2).

Notice

Why do two nearby starting points sometimes have very different futures?

Understand

Choose a fixed complex number c. Start at z, square it, add c, and use that answer as the next z. The successive positions form an orbit. A subscript or the label “next” identifies a step; it is not a new operation.

Work it through

$\text{zₙₑₓₜ = z² + c}$

Set c = −1. Starting at 0 gives 0² − 1 = −1, then (−1)² − 1 = 0. It cycles 0 → −1 → 0 forever. This exact cycle is bounded.

Starting at 2 gives 2² − 1 = 3, then 3² − 1 = 8, then 8² − 1 = 63. It escapes. The renderer tests whether squared distance exceeds 4, equivalent to distance exceeding 2. This threshold works for the parameter ranges used in the Lab.

The renderer also stops at an iteration limit. “Not escaped within the limit” is evidence from a finite calculation, not proof of remaining bounded forever. Escape bands record how quickly points leave; points reaching the cutoff receive the interior colour.

Notice

Are these two images maps of starting positions or maps of parameters?

Understand

In Julia view, c stays fixed and every pixel supplies a different starting z. The filled Julia set consists of starting points whose orbits remain bounded. Its boundary is the Julia set.

In Mandelbrot view, every orbit starts at z = 0, while each pixel supplies a different c. The image is a map of parameters. The separate c sliders do not determine each pixel’s parameter in this view.

Work it through

Use the pixel at (−1, 0). In Julia view with c = −0.8 + 0.156i, start z at −1 and apply that fixed parameter. Its next value is 1 − 0.8 + 0.156i = 0.2 + 0.156i.

In Mandelbrot view, that same pixel instead means c = −1. Start z at 0: the first update is −1, and the next is 0. Same pixel coordinates, different roles.

Zoom changes the region of the plane shown, not the rule. Escape iterations changes the calculation cutoff. A finite-resolution picture approximates the infinite mathematical set; colour is a rendering choice.

Notice

Can you make an arrow turn faster without making its circle larger?

Understand

A rotating arrow has radius r, frequency f, and phase φ (phi). Radius is its length. Frequency is turns per time unit. Phase is its angle at time zero. Time t tells us how far through the motion we are.

Each full turn adds 2π radians. Multiplying 2π by f and t gives the angle accumulated through rotation; adding φ includes the starting angle. Positive frequency turns anticlockwise in this diagram, and negative frequency turns clockwise.

Work it through

$\text{x = r cos(2πft + φ)}$

$\text{y = r sin(2πft + φ)}$

For r = 1, f = 1, and φ = 0, times 0, 0.25, 0.5, and 1 give (1, 0), (0, 1), (−1, 0), and (1, 0). With f = −1, the quarter-time point is (0, −1).

At frequency 2, the arrow makes two full turns by time 1. At radius 2, it still makes the same number of turns, but the circle is twice as large. Phase shifts the starting point around the same circle.

Notice

What does the tip of an arrow draw when its centre is moving too?

Understand

Place the tail of a second rotating arrow at the tip of the first. Each arrow rotates at its own frequency. The final endpoint is the sum of all arrow components. A circle carried by another circle is often called an epicycle.

At each instant, add all horizontal components to get the endpoint’s x coordinate, and all vertical components to get y. Repeating this as time advances traces a curve. Integer frequencies return to their starting positions after a whole time unit.

Work it through

At one instant, let the first arrow be (1, 0) and the second (0, 0.5). The final endpoint is (1 + 0, 0 + 0.5) = (1, 0.5). These could be radii 1 and 0.5 at angles 0° and 90°.

Later, each angle changes according to its own frequency. Phase matters because the arrows can point in different directions at the same time even when their lengths stay unchanged. Shifting one phase relative to another can change the traced curve.

Notice

If you already have a curve, how can you find the circles that draw it?

Understand

Sample the outline at equally spaced parameter values—equal steps of the variable that traces it, not necessarily equal distances along the curve. The renderer takes 128 samples. A Fourier coefficient records the size and starting angle of one rotating contribution.

To measure a candidate frequency, undo its rotation at each sample, then average the resulting arrows. Matching contributions line up and reinforce. Contributions that point around a full circle cancel. A zero-frequency contribution is a constant offset of the whole curve.

Work it through

Take four samples of a unit circle: (1, 0), (0, 1), (−1, 0), (0, −1). Undo frequency 1 by rotating them back through 0°, 90°, 180°, and 270°. Every arrow becomes (1, 0), so the average is (1, 0): radius 1, starting angle 0. Without undoing any rotation, the four arrows average to (0, 0).

The flower uses radius r = 0.73 + 0.20 cos(5θ), where θ is the angle around it. Multiplying this radius by the unit-circle coordinates produces three rotations: frequency 1 with radius 0.73, frequency 6 with radius 0.10, and frequency −4 with radius 0.10. All start at angle zero.

The harmonic limit H retains frequencies −H through +H, including zero. It is not exactly H circles. H = 1 keeps the main circle; H = 4 adds frequency −4; H = 6 also adds frequency 6. Increasing H across zero-size coefficients may make no visible difference.

Notice

What happens to a high concentration surrounded by low concentrations?

Understand

A field stores a value at every location. Here a square grid stores amounts, or concentrations, of two model substances, u and v. Diffusion spreads differences between nearby cells. A uniform field has no differences to smooth.

The discrete Laplacian, written L, measures a weighted neighbour average minus the centre. “Discrete” means we use separate cells. Each of four side neighbours gets weight 0.20; each of four diagonals gets 0.05. These eight weights total 1.

Work it through

$\text{L = 0.20 × side sum + 0.05 × diagonal sum − centre}$

With centre 0.8 and all eight neighbours 0.2, the side sum and diagonal sum are each 0.8. L = 0.20 × 0.8 + 0.05 × 0.8 − 0.8 = 0.16 + 0.04 − 0.8 = −0.6.

For u, a diffusion-only step adds 0.16L: 0.8 + 0.16 × (−0.6) = 0.704. Neighbours receive their own updates. Every cell is updated from the old grid, not from values already changed in the same step.

Opposite edges wrap around: a cell on the left has neighbours on the right. The demo is a small diffusion-only grid; the full artwork also includes reaction, supply, and removal.

Notice

How can the presence of one substance help produce more of it?

Understand

The Gray–Scott model uses a reaction amount uv². It removes that amount from u and adds it to v. The square means v × v, so having more v can make this reaction much stronger when u stays fixed.

This is a mathematical model of reaction, not a general rule for all chemicals. This lesson isolates the reaction term. The artwork also has diffusion, feed, and removal, which we add next.

Work it through

$\text{reaction = uv²}$

With u = 0.5 and v = 0.25, first square v: 0.25 × 0.25 = 0.0625. Then multiply by u: 0.5 × 0.0625 = 0.03125.

Reaction alone gives new u = 0.5 − 0.03125 = 0.46875 and new v = 0.25 + 0.03125 = 0.28125. Calculate the reaction once from the old values and use that same amount in both updates. The demonstration limits each resulting concentration to 0–1, as the renderer does.

If v doubles to 0.5 while u remains 0.5, the reaction becomes 0.5 × 0.5² = 0.125, four times 0.03125. This feedback is one ingredient in the patterns.

Notice

Why does changing a tiny removal rate reorganise a whole field?

Understand

Now combine the ingredients. F is the feed rate and k is the additional kill rate. Lᵤ and Lᵥ are the neighbour differences for u and v: the small labels identify the field. Labels “next” identify updated values.

For u: add diffusion, subtract reaction, and add supply F(1 − u). For v: add diffusion and reaction, then subtract removal (F + k)v. Notice that F appears in both equations. It supplies u and contributes to removing v.

Work it through

$\text{uₙₑₓₜ = u + 0.16Lᵤ − uv² + F(1 − u)}$

$\text{vₙₑₓₜ = v + 0.08Lᵥ + uv² − (F + k)v}$

Use uniform neighbours so both Laplacians are zero. With u = 0.5, v = 0.25, F = 0.035, and k = 0.060, reaction is 0.03125. Supply is 0.035 × 0.5 = 0.0175. Removal is (0.035 + 0.060) × 0.25 = 0.02375.

Next u = 0.5 − 0.03125 + 0.0175 = 0.48625. Next v = 0.25 + 0.03125 − 0.02375 = 0.2575. In a non-uniform grid, add the diffusion contributions too.

All cells update simultaneously from the previous field; the renderer clips results to the interval 0–1. Repeated steps describe later simulation states. More steps does not necessarily mean more detail. Changing a rate can reorganise a pattern, but does not guarantee a particular shape.