Creative Coding · Session c08

Arrays

A list of suspects — track everything at once.

An array is an ordered list: []. You can put anything in it — numbers, strings, or whole objects with multiple properties. Once things are in an array, you can loop through all of them with a single for…of loop.

Here each firefly is an object with x, y, speed, and a personal glow pulse. Stored in an array. Every frame: one loop updates all 35 of them.

Live sketch — Firefly Night

Tap or click to add more fireflies. Watch the counter.

Fireflies: 35

let fireflies = [];   // the array — starts empty

function setup() {
  createCanvas(420, 280);

  // fill the array with 35 firefly objects
  for (let i = 0; i < 35; i++) {
    fireflies.push({
      x:     random(width),
      y:     random(height),
      vx:    random(-0.9, 0.9),   // horizontal speed
      vy:    random(-0.9, 0.9),   // vertical speed
      phase: random(TWO_PI)       // glow offset
    });
  }
}

function draw() {
  background(10, 18, 35);       // night sky

  // one loop handles ALL fireflies
  for (let f of fireflies) {

    // move
    f.x += f.vx;
    f.y += f.vy;

    // bounce off edges
    if (f.x < 0 || f.x > width)  f.vx *= -1;
    if (f.y < 0 || f.y > height) f.vy *= -1;

    // pulsing glow — sin() gives a smooth 0 → 1 → 0 cycle
    let glow = (sin(frameCount * 0.04 + f.phase) + 1) / 2;

    noStroke();
    fill(190, 255, 140, glow * 60);
    circle(f.x, f.y, 20);         // soft outer glow
    fill(220, 255, 170, glow * 200 + 55);
    circle(f.x, f.y, 5);          // bright core
  }
}

// tap / click to add a new firefly at that spot
function mousePressed() {
  fireflies.push({
    x: mouseX, y: mouseY,
    vx: random(-0.9, 0.9),
    vy: random(-0.9, 0.9),
    phase: random(TWO_PI)
  });
}

Array vocabulary:
fireflies.push(obj) — add one item to the end of the list
fireflies.length — how many items are in the list
fireflies[0] — the first item (arrays count from 0, not 1!)
fireflies[fireflies.length - 1] — the last item
for (let f of fireflies) — visit every item, call it f

Think of fireflies as the detective's suspect list — the for…of loop is the detective going through each suspect one by one, checking their alibi (updating their position).

🔍 Crack the case — two bugs, one sketch

This code is supposed to print the last firefly's position after clicking, but something goes wrong. Find both bugs:

function mousePressed() {
fireflies.push({ x: mouseX, y: mouseY, phase: 0 });
let last = fireflies[fireflies.length]; // bug 1
console.log(last.x, last.y);
}

for (let f of firefly) { // bug 2
f.x += f.vx;
}

Clue 1: Arrays index from 0. The last item is at index length - 1, not length.
Clue 2: Check the variable name very carefully.

Challenges

Change 35 to 200 in setup(). Does it get slow? Try 500. At what number does it start to struggle?
Add a size property to each firefly: size: random(3, 9). Use f.size as the diameter of the bright core circle instead of the fixed 5.
Make fireflies drift gently toward the mouse — after f.x += f.vx, add a tiny pull: f.vx += (mouseX - f.x) * 0.0003. Do the same for vy and mouseY. Watch them swarm.
Add a colour property: hue: random(360). Switch to colorMode(HSB, 360, 100, 100) in setup(), then use fill(f.hue, 80, 100, alpha). Each firefly gets its own colour!
Open challenge: Make fireflies "expire" after 10 seconds (600 frames). Add born: frameCount when pushing. In draw(), after the loop, write: fireflies = fireflies.filter(f => frameCount - f.born < 600);. The canvas slowly empties unless you keep clicking.

Arc 2 complete! 🎉 You've now learned to write your own functions, scatter things with randomness, freeze arrangements with seeds, and track dozens of objects in arrays. Arc 3 will introduce if/else logic for collision detection, and your first real mini-game — a target catcher. Well done!

Arrays

Live sketch — Firefly Night

Ask your tutor