Creative Coding · Session c07

Randomness

Chaos you can repeat — the detective's secret weapon.

random(min, max) returns a different number every time it's called — so your sketch looks different every run. But there's a twist: randomSeed(n) locks the sequence. Same seed → same "random" numbers, every single time. Like a crime scene: seal it with a seed and the evidence never moves while you investigate.

Live sketch — Evidence Board

Each arrangement is a different "case". Space opens a new case. Press 1–9 to jump to case number 1–9 directly — the board freezes so you can study it.

Current case: 42

let seed = 42;        // which "case" is on the board

function setup() {
  createCanvas(420, 280);
  noLoop();              // draw once; redraw() called on key press
}

function draw() {
  randomSeed(seed);     // ← same seed = same layout, always

  background(155, 110, 60);  // cork board

  for (let i = 0; i < 22; i++) {
    let x    = random(20, 400);
    let y    = random(25, 260);
    let sz   = random(12, 30);
    let kind = floor(random(3));  // 0, 1, or 2

    push();
    translate(x, y);
    rotate(random(-0.35, 0.35));

    if (kind === 0) drawNote(sz);
    if (kind === 1) drawFootprint(sz);
    if (kind === 2) drawPin(sz);

    pop();
  }
}

function keyPressed() {
  if (key === ' ')                 seed = floor(random(9999));
  if (key >= '1' && key <= '9') seed = int(key) * 137;
  redraw();
}

Two kinds of randomness:
• random() — a different number every call: 47.3, 12.8, 91.1, … — unpredictable.
• randomSeed(42) — resets the sequence to always be the same starting point. The numbers are still "random-looking", but always in the same order. It's like shuffling cards: the shuffle looks random, but if you always start with the same riffle technique, you get the same order.

push() and pop() save and restore the drawing state — translate and rotate only affect what's drawn between them.

🔍 Crack the case — find the bug

A student wrote this code and the "same seed" trick stopped working — every reload shows a different board even with seed = 42. Can you spot why?

function draw() {
background(155, 110, 60);
for (let i = 0; i < 22; i++) {
let x = random(20, 400);
let y = random(25, 260);
}
randomSeed(seed); // ← is this in the right place?
}

Clue: randomSeed() resets the sequence from that point forward — but by then, all the random numbers have already been generated.

Challenges

Change seed = 42 to seed = 99. The evidence moved. Change it back to 42 — the same layout returns. Why? What does the seed actually control?
Increase the loop from 22 to 40 clues. Then try 5. How does the density of evidence change the feeling of the scene?
Add a fourth kind of evidence: if (kind === 3) drawQuestion(sz). Write drawQuestion(sz) using textSize(sz * 1.5) and text('?', 0, 0). Don't forget to update floor(random(3)) to floor(random(4)).
Add a connecting red string: after drawing all clues, loop through the first 5 positions and draw lines between them. You'll need to store the positions in an array first — hint: let positions = [] before the loop, then positions.push({x, y}) inside.
Open challenge: Make a "case file" overlay — a semi-transparent rect in one corner with the case number printed on it: text('Case #' + seed, 10, 10). Style it like a police case file label.

Next session → c08: Arrays You've already used one array (positions). Next time you'll store dozens of objects — each with its own x, y, speed, and glow — and update them all in a single loop. Forty fireflies, one array.

Randomness

Live sketch — Evidence Board

Ask your tutor