# Paint with Coordinates

*Task 1 of 4 · [Pixels from Scratch](https://gpu.rocks/learn/pixels-from-scratch-d2869039.md) · GPU.js Learn*

Set `graphical: true` and a kernel stops returning numbers — instead
every thread paints **exactly one pixel** by calling
`this.color(r, g, b, a)`, channels 0–1. The output shape becomes the canvas:
`output: [128, 128]` is a 128×128 picture, 16,384 threads, one per pixel.

A solid color is one line — and the starter already paints one. The interesting part is
that each thread knows *where* it is: `this.thread.x` counts columns from
the left, `this.thread.y` counts rows from the **bottom** (GL
convention). Divide either by the canvas size and you get a smooth 0–1 ramp, ready to feed
straight into a color channel.

## Figures

- **every thread knows where it stands — divide by 128 and position becomes color**

## Goal

**Goal:** turn the flat gray into a two-axis gradient — red rising with
`x`, green rising with `y`, blue fixed at `0.5`.

## Requirements

- Keep `graphical: true` and `output: [128, 128]`
- Red channel = `this.thread.x / 128`
- Green channel = `this.thread.y / 128`
- Blue stays `0.5`, alpha stays `1`

## Hint 1 — where am I?

`this.thread.x` runs 0…127 here, so
`this.thread.x / 128` runs 0…0.992 — a ready-made red ramp.
Same move with `this.thread.y` for green.

## Hint 2 — the one-liner

The whole kernel body:

```js
this.color(this.thread.x / 128, this.thread.y / 128, 0.5, 1);
```

## Same idea elsewhere

Normalized pixel coordinates are the *uv* every shader language starts
from: WebGPU and Metal fragment shaders derive them from the fragment position, and CUDA
image kernels divide thread indices by the image width the same way. The famous red-green
"uv debug gradient" is exactly this kernel.

## Starter code

```js
// graphical: true turns a kernel into a painter — one thread per pixel.
const gpu = new GPU({ mode });

const gradient = gpu.createKernel(function () {
  // Right now all 16,384 threads paint the SAME color.
  // TODO: mix this thread's coordinates into the color —
  //   red   = this.thread.x / 128
  //   green = this.thread.y / 128
  //   blue  = 0.5
  this.color(0.2, 0.2, 0.2, 1);
}, {
  output: [128, 128],
  graphical: true,
});

await gradient();
render(gradient.canvas);
```

---

Interactive version: https://gpu.rocks/learn/pixels-from-scratch-d2869039/1

[Next task](https://gpu.rocks/learn/pixels-from-scratch-d2869039/2.md)