Session 3: Examples & References

Change Over Time

A generative system does not need to remain still. Values can change, repeat, drift, accumulate, synchronise or respond to time.

While looking through these examples, ask:

John Whitney: motion as a system

John Whitney, Arabesque, 1975. Computer-generated film.

John Whitney was one of the pioneers of computer-generated moving images. His films use relatively simple geometric elements, mathematical relationships, repetition and carefully controlled motion to create complex visual compositions.

In works such as Catalog, Permutations and Arabesque, motion is not something added after the image has been designed. Movement, rhythm and transformation are part of the system itself.

In Arabesque, geometric points and forms follow mathematical relationships that continuously transform over time.

Look for

Questions

Try this

Begin with one point or circle moving in a cycle.

Then add another element using:

Do not design the final shape directly.

Let the relationship between the movements create the composition.

Video

References

Cycles and oscillation

Many forms of change do not continue indefinitely in one direction.

They return.

Examples include:

A useful mathematical tool for describing cyclical change is the sine wave.

      ╭───╮       ╭───╮
     ╱     ╲     ╱     ╲
────╯       ╰───╯       ╰────

A sine value repeatedly moves between two extremes.

In code, that repeating value can control:

The important idea is:

a cycle converts the passage of time into a repeating value

Code example

Lissajous figures: several cycles at once

Lissajous figures produced by combining oscillations with different frequencies and phases.

A Lissajous curve is produced when one oscillating value controls the horizontal position while another controls the vertical position.

For example:

let x = sin(t);
let y = sin(t * 2);

Even though both movements are individually simple, their relationship can produce a much more complex trajectory.

Changing only the ratio between the two frequencies produces a different family of forms.

Look for

Try this

Create a point whose position is controlled by two cycles:

let x = width / 2 + sin(t) * 150;
let y = height / 2 + sin(t * 2) * 150;

Then change only the relationship between the frequencies.

Try:

1 : 1
1 : 2
2 : 3
3 : 4

What changes when the cycles are almost, but not quite, synchronised?

References

Steve Reich: rhythm and phase

Basic repeating pattern from Steve Reich’s Piano Phase.

Steve Reich’s Piano Phase (1967) begins with two performers repeating the same short musical pattern.

At first they play together.

One performer then gradually increases speed while the other maintains the original tempo. The two patterns slowly move out of alignment.

Eventually they meet again.

The musical material remains extremely limited, but the relationship between the two repetitions continually changes.

This process is known as phasing.

Look for

The important idea is:

Complexity can come from the relationship between cycles rather than from adding more material.

Questions

Try this

Create two oscillating elements.

Give them almost the same speed:

let a = sin(frameCount * 0.05);
let b = sin(frameCount * 0.052);

Watch how their relationship changes over time.

You could map the two values to:

Video

References

Accumulation: the past remains visible

Not every frame needs to erase what came before.

If the background is not cleared, the previous state remains visible and the image can accumulate over time.

This produces a very different relationship with time.

Instead of:

new frame replaces old frame

we get:

new frame + previous frames = accumulated image

A movement can therefore become a drawing.

A behaviour can leave a trace.

Time becomes visible through what remains.

LIA: code, motion and traces

LIA, flow, 2006. Generative audiovisual work.

LIA’s practice has explored software, code, motion and generative systems since the 1990s.

In flow, small graphic elements multiply repeatedly. The impression of movement comes largely from their continuous proliferation and accumulation rather than from conventional animated objects travelling across the screen.

Other works use motion, traces, transformation and repeated behaviour to build images gradually over time.

This is useful because it shifts the question from:

Where is the object moving?

to:

What image is being produced by the history of the system?

Look for

Questions

Try this

Create a moving point or line without clearing the background every frame.

Compare:

function draw() {
  background(255);
  // draw
}

with:

function draw() {
  // draw without clearing
}

Then experiment with partially transparent backgrounds.

How much history should remain visible?

References

Tatsuo Miyajima: many simultaneous times

Tatsuo Miyajima, Keep Changing, Connect with Everything, Continue Forever, 1998.

Tatsuo Miyajima frequently works with electronic counters that cycle through numbers.

In Keep Changing, Connect with Everything, Continue Forever, hundreds of LED counters move through numerical cycles at different speeds.

The counters do not all share one universal rhythm.

Each one has its own tempo.

Some are also connected so that the completion of one counting cycle can trigger another.

The result is not one clock but a field of many simultaneous temporal systems.

Look for

Questions

The last question is particularly important because it points toward the next session.

Try this

Create several elements with different temporal intervals.

For example:

A → changes every 30 frames
B → changes every 45 frames
C → changes every 70 frames

Watch when their changes coincide.

Then try making one event trigger another.

References

Time as input

So far, most examples have created their own internal time.

A program can also respond to time outside itself.

For example:

second();
minute();
hour();

The current time can become another source of data.

This creates a different kind of system:

real-world time → rule → visual behaviour

Examples:

seconds → rotation
minutes → number of elements
hours → colour

But a system connected to real-world time does not need to look like a conventional clock.

It might communicate:

→ Clock and timepiece references

Five ways to change over time

When building a temporal system, it can help to distinguish different kinds of change.

1. Linear change

A value continually increases or decreases.

0 → 1 → 2 → 3 → 4 → 5

For example:

2. Cyclical change

A value returns repeatedly.

0 → 1 → 0 → -1 → 0 → 1

For example:

3. Event-based change

Something happens at an interval or when a condition becomes true.

wait → event → wait → event

For example:

4. Stateful change

The next state depends on the current state.

current state → rule → next state

For example:

5. Time-driven change

An external source of time controls the system.

current time → visual parameter

For example:

These approaches can also be combined.

From space to time

Session 2 explored repetition across space:

● ● ● ● ● ●

Session 3 explores repetition across time:

state 1 → state 2 → state 3 → state 4

Many of the same questions still apply:

The important shift is that the output is no longer a single fixed composition.

The history of the system becomes part of the work.

Things to investigate

When looking at a moving or time-based generative work, try to identify the system behind it.

Ask:

  1. What changes from one moment to the next?
  2. What remains constant?
  3. What controls the speed of change?
  4. Is the change linear, cyclical or event-based?
  5. Does the system remember previous states?
  6. Does anything accumulate?
  7. Are several cycles happening simultaneously?
  8. Are those cycles synchronised?
  9. Does the system ever return to exactly the same state?
  10. Is it using internal time or real-world time?
  11. Could the system continue forever?
  12. What would remain if the animation stopped?

The goal is not simply to make something move.

The goal is to understand how time is structured inside the system.

→ Clock and timepiece references
→ Notes on this session
→ Back to Session 3