Task 4 of 4

Paint the Pattern

Payoff time. The whole simulation is wired below — a 64×64 grid and a steps dial saying how long to run it — 200 is the value that turn the seed square into coral — and it ends holding v, a grid of numbers with coral growing in it. Numbers deserve pixels: one graphical kernel, exactly like the painters in 3.1, turns the V field into the picture the module cover promised.

The palette is fixed so we can test it: brightness t = min(1, v·2.5), painted as color(t, t·t, 0.25 + 0.75·t) — a deep-blue ocean at v = 0 rising through violet to white-hot at the pattern's crest.

Goal: complete the paint kernel — map this thread's v value through the palette and put it on screen.

Requirements

Hint 1 — same move as the luminance painter

This is the paint kernel from Pixels from Scratch with a fancier ramp: read one number from the grid, compute the channels, call this.color(). Math.min works inside kernels.

Hint 2 — the whole body
const t = Math.min(1, v[this.thread.y][this.thread.x] * 2.5);
this.color(t, t * t, 0.25 + 0.75 * t, 1);

Same idea elsewhere

Compute passes that end in a draw are the shape of every GPU simulation you've seen on the web: WebGPU chains compute pipelines into a render pipeline whose fragment shader is your paint; Metal apps do the same with a compute encoder feeding a fragment function. The data never has to leave the card.

All tasks in Reaction–Diffusion

  1. The Laplacian: Ask Your Neighbors
  2. One Step of Gray–Scott
  3. Feed It Back: 100 Steps
  4. Paint the Pattern

This page is an interactive exercise — the editor, the GPU runner and your saved progress need JavaScript. The text above is the full brief.