What if collecting changed the world instead of a score?

There is no counter on screen. The only sign of progress is the sky. Every catch makes the background darker and the tree brighter, so collecting slowly turns the day into night.

The moonlight has ended up in a tree. The player’s job is to shake it loose and give it back. Giving it back is a feeling, not a place on screen.

Each drop of light floats slowly upward as it fades, as if it already knows where it is going.

Collecting light makes the world darker. The more you gather, the closer it comes to night, the hour that belongs to the moon.

1. 01

   Searching

   A pale, bright day and a dark tree. The player looks closely for where to click.

2. 02

   Rhythm

   Some clicks shake light loose and some don’t. The player settles into a quiet back and forth with the tree.

3. 03

   Night

   The sky is dark and the tree glows. The light has all gone up, and nothing is left to do but look.

Gathering turned into a slow change of time. After thirty catches the day is gone and the tree glows on its own. The feeling that came out of it is giving back, not taking.

setup()

Grows the tree once with drawTree() and stores every branch as a line segment.

drawTree()

Recursive: each branch splits into 2–3 children, turning up to 60° and shrinking to 60–85% of its length, until branches are shorter than 6 px.

mousePressed()

Measures the click’s distance to each branch segment with distToSegment(), then rolls the 50% chance.

draw()

Maps the number of catches to sky and tree colour, then moves each drop of light up and fades it.

function draw() {
  // 0 → 30 catches: the sky goes from day (250) to night (80)
  let bgBase = map(lightCount, 0, 30, 250, 80, true);
  background(bgBase, bgBase - 10, bgBase - 20);

  // ...and the tree brightens as the sky darkens
  let treeBrightness = map(lightCount, 0, 30, 40, 180, true);
  for (let b of branches) {
    strokeWeight(b.w);
    stroke(treeBrightness, treeBrightness - 10, treeBrightness - 30, b.alpha);
    line(b.x1, b.y1, b.x2, b.y2);
  }

  // each drop of light rises slowly and fades
  for (let i = lights.length - 1; i >= 0; i--) {
    let l = lights[i];
    l.y -= 0.3;
    l.alpha -= 0.8;
    fill(255, 240, 180, l.alpha);
    noStroke();
    ellipse(l.x, l.y, l.size);
    if (l.alpha <= 0) lights.splice(i, 1);
  }
}

Comments added for reading. Two map() calls replace a score display: the same counter drives the sky and the tree in opposite directions.

Full source on OpenProcessing ↗The embedded sketch above also has a Code tab with the complete source.

See the method behind the series →