Task 1 of 5

Map Pixels to the Complex Plane

A fractal isn't drawn — it's evaluated. There is a function defined on the complex plane, and every pixel asks: what does that function do at my point? So before any fractal math, each thread must know which complex number it owns.

Three numbers describe the camera: xMin and yMin pin the bottom-left corner of the view, and step is the width of one pixel in plane units. Thread (x, y) then sits at c = (xMin + x·step) + (yMin + y·step)·i. Change the three numbers and the same kernel becomes a zoom lens.

xMin, yMin, step: three numbers turn a pixel count into a place

Goal: map each thread to its point (cr, ci) on the complex plane and return the squared magnitude cr² + ci² — a distance field we can sanity-check before iterating anything.

Requirements

Hoist the thread ids into consts: const x = this.thread.x — as a const it becomes a float you can scale
Map to the plane: cr = xMin + x * step, ci = yMin + y * step
Return cr * cr + ci * ci — the squared distance from the origin

Hint 1 — pixels are integers, planes are not

this.thread.x counts 0…63 — and it's an integer. Assign it to a const first (const x = this.thread.x;) so the GPU treats it as a float; then x * step turns pixel counts into plane distance, and adding xMin slides the view into place. Same story for y.

Hint 2 — the whole body

const x = this.thread.x;
const y = this.thread.y;
const cr = xMin + x * step;
const ci = yMin + y * step;
return cr * cr + ci * ci;

Same idea elsewhere

Index-to-domain mapping is step one of nearly every GPU program: fragment shaders scale normalized uv coordinates into world space, CUDA turns blockIdx * blockDim + threadIdx into a grid coordinate, WebGPU does the same with global_invocation_id. Integer id in, domain point out.

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.