# Map Pixels to the Complex Plane

*Task 1 of 5 · [Escape-Time Fractals](https://gpu.rocks/learn/escape-time-fractals-0de4764c.md) · GPU.js Learn*

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.

## Figures

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

## Goal

**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

```js
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.

## Starter code

```js
// Which complex number does THIS pixel own?
const gpu = new GPU({ mode });

const distanceField = gpu.createKernel(function (xMin, yMin, step) {
  // TODO: map this thread onto the complex plane:
  //   const x = this.thread.x;   ← hoisting makes it a float
  //   cr = xMin + x * step   (and the same for ci with y)
  // then return the squared magnitude cr² + ci².
  return this.thread.x;
}, { output: [64, 64] });

const field = await distanceField(-2, -2, 4 / 64);
console.log('cell [32][32] sits at the origin:', field[32][32]);
console.log('corner cell [0][0]:', field[0][0]);
```

---

Interactive version: https://gpu.rocks/learn/escape-time-fractals-0de4764c/1

[Next task](https://gpu.rocks/learn/escape-time-fractals-0de4764c/2.md)