Task 3 of 5

Paint by Iteration Count

Those counts are the picture. Make the kernel graphical and let every thread color its own pixel: points that hit the 100 cap are inside the set — paint them black — and everything else gets a shade from its count. That's the whole recipe behind every Mandelbrot poster ever printed.

This module's palette maps t = count / 100 to this.color(t, t·t, 0.5 + 0.5·t, 1) — fast escapes glow deep blue, slow ones burn toward white near the boundary, where all the detail hides.

Goal: same escape-time loop, but graphical: true — interior pixels black, escaped pixels shaded by three cosines a third of a turn apart — a full colour wheel across t = count / 100.

Requirements

Keep the guarded 100-pass loop from the last task (already in place)
If count reached 100, paint black: this.color(0, 0, 0, 1)
Otherwise compute t = count / 100, then a = 6.28318 * t, and paint this.color(0.5 + 0.5 * Math.cos(a), 0.5 + 0.5 * Math.cos(a + 2.0944), 0.5 + 0.5 * Math.cos(a + 4.18879), 1)

Hint 1 — two kinds of pixel

Branch on the cap: if (count < 100) { …shade… } else { …black… }. Both branches must call this.color() — a graphical thread always paints exactly one pixel.

Hint 2 — the shade branch

const t = count / 100;
const a = 6.28318 * t;
this.color(0.5 + 0.5 * Math.cos(a), 0.5 + 0.5 * Math.cos(a + 2.0944), 0.5 + 0.5 * Math.cos(a + 4.18879), 1);

Same idea elsewhere

Mapping a scalar to a color is a transfer function — in scientific visualization and medical imaging it's usually a 1D texture the fragment shader samples by value; here the colormap is three inline formulas. Same trick, WebGPU to Metal.

All tasks in Escape-Time Fractals

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