Session 2: Examples & References

Repetition & Variation

A generative system does not need many rules. Some of the most interesting systems begin with a very small vocabulary and repeat it many times.

While looking through these examples, ask:

Vera Molnár: order, variation and interruption

Vera Molnár is an important reference for thinking about repetition as something that can be systematically disturbed.
Rather than treating variation as decoration added after a pattern has been created, her work often begins with a simple underlying structure and investigates what happens when that structure is gradually changed, displaced, interrupted or exposed to controlled randomness.

Vera Molnár, Interruptions à recouvrements, 1969. Computer-generated plotter drawing.

In the Interruptions series, Molnár begins with a grid of straight lines, introduces random rotation, and then removes sections to create voids or “interruptions”. The regular structure remains visible underneath the disturbance.

Look for

Try this

Begin with a completely regular grid or field. Then disturb only one property:

Do not change everything at once.

How much disorder can you introduce before the original system disappears?

References

Truchet tiles: one unit, many structures

Truchet tiles are a particularly clear example of how a very small set of local possibilities can create many global patterns. Start with one square tile containing a simple graphic rule. The tile is repeated across a grid, but its orientation can change.

Truchet tiling. A repeated tile changes orientation to produce a larger pattern.

The individual unit can be extremely simple. Complexity emerges through its relationship with neighbouring tiles.

A minimal version might have only two possible states:

┌─────┐   ┌─────┐
│╲    │   │    ╱│
│ ╲   │   │   ╱ │
│  ╲  │   │  ╱  │
│   ╲ │   │ ╱   │
│    ╲│   │╱    │
└─────┘   └─────┘
 state A    state B

Each cell chooses between the two orientations.

The important idea is not the particular shape of the tile. It is the relationship:

same unit + limited states + repetition = many possible compositions

Another common Truchet variation uses pairs of quarter-circle arcs. Rotating the tile creates connections between neighbouring cells and can produce long continuous paths across the grid.

Questions

Try this

Design your own tile using only:

Give the tile two or four possible states. Repeat it across a grid and explore different arrangements.

References

From Truchet tiles to 10 PRINT

Truchet tilings and 10 PRINT are closely related. Both use a small number of possible local states repeated across a larger field.

With 10 PRINT the visual vocabulary is almost absurdly small:

\    /

At each position, choose one of the two marks. Then move to the next position and repeat.

That is enough to produce a maze-like structure.

The original Commodore 64 BASIC program is one line:

10 PRINT CHR$(205.5+RND(1)); : GOTO 10

The program combines:

The result is unpredictable in detail while remaining immediately recognizable as the same system.

10 PRINT: local decisions, global form

The book 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 takes this single line of code as a starting point for examining creative computation, randomness, regularity, programming culture and the history of the Commodore 64.

The interesting question for us is not simply:

How do I reproduce this pattern?

Instead ask:

What is the smallest change I can make to create a different system?

Change one thing

Try changing only one parameter at a time.

Probability

if (random() < 0.8) {
  // state A
} else {
  // state B
}

Number of states Instead of two possible lines, create three or four possible marks.

Scale Change the size of each cell.

Direction Build vertically, diagonally or from the centre outward.

Visual unit Replace the diagonal lines with:

Rule Instead of choosing completely randomly, make the decision depend on:

Each change produces a different relationship between structure and variation.

References

Generative Design: grids as systems

The book Generative Design: Creative Coding for the Web with JavaScript in p5.js by Benedikt Groß, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni is one of the main practical references for this course. It approaches programming from a visual design perspective and provides a large collection of clearly structured examples together with the complete source code. The code is openly available and can be modified, compared and reused as a starting point for experiments. ([GitHub][2])

For this session, the P.2.1 Grid examples are especially relevant. They explore how a regular grid can become a generative system through changes in:

Selected grid and module studies from Generative Design.

When looking at the examples, do not only look at the final image. Open the code and identify:

A useful exercise is to take one example and change one relationship rather than the whole program.

For example:

Keep the grid and loop structure, but replace the visual module.

Or:

Keep the module, but change how its size or rotation responds to position.

This is often a better way to learn from existing code than copying the complete visual result.

References

Four ways to create variation

When building your own systems, it can help to distinguish different sources of variation.

1. Systematic variation

A value changes according to a predictable rule.

small → medium → large

For example:

2. Alternation

Two or more states repeat in sequence.

A B A B A B A B

Or:

A A B A A B A A B

3. Conditional variation

A rule changes when a condition becomes true.

if column is even → draw a circle
else → draw a line

This is useful for introducing exceptions without losing the overall structure.

4. Probabilistic variation

A decision is made according to probability.

70% → state A
30% → state B

Randomness does not mean that everything must be equally likely.

Repetition, variation, exception

A useful way to develop a system is:

repeat → vary → interrupt

Start with something regular.

○ ○ ○ ○ ○ ○ ○ ○

Introduce systematic variation.

○ ◯ ◯ ◯ ◉ ◉ ◉ ◉

Introduce an exception.

○ ○ ○ ○ ● ○ ○ ○

Introduce controlled randomness.

○ ● ○ ○ ● ○ ● ○

These can produce very different visual experiences even though the underlying structure remains almost identical.

Things to investigate

When you find an interesting pattern or generative artwork, try to reverse-engineer it before looking for code.

Ask:

  1. What is the smallest repeated element?
  2. How is the space organised?
  3. Which properties remain constant?
  4. Which properties vary?
  5. Is the variation continuous or discrete?
  6. Is it deterministic or probabilistic?
  7. Are there exceptions?
  8. When does the system stop?
  9. Could the same rules produce a very different result?
  10. What would happen if you changed only one rule?

The goal is not to copy the appearance of an example. The goal is to understand the system that could produce it.

→ Notes on this session
→ Back to Session 2