Task 2 of 4

Checkerboard Logic

Smooth ramps become hard-edged patterns with two tools: Math.floor to chop coordinates into cells, and the remainder operator % to make the cells repeat. Math.floor(this.thread.x / 16) asks "which 16-pixel band am I in?" — and % 2 answers "odd or even?".

The starter already draws vertical stripes with exactly that trick. A checkerboard is the same idea in both axes at once: compute a cell index for x and y, add them, and take the parity of the sum — cells that touch on an edge always disagree.

Goal: upgrade the stripes to an 8×8 checkerboard of 16-pixel cells — paint (cellX + cellY) % 2 into all three color channels.

Requirements

Hint 1 — the second axis

Mirror the existing line for y:

const cellY = Math.floor(this.thread.y / 16);
Hint 2 — why the sum?

Moving one cell right changes cellX by 1; moving one cell up changes cellY by 1. Either move flips the parity of cellX + cellY — which is exactly what a checkerboard does. So: const v = (cellX + cellY) % 2;

Same idea elsewhere

Procedural patterns are a GPU staple: GLSL and WGSL shaders build checkers, stripes and grids from floor() and mod() with no texture in sight, and CUDA kernels lean on the same modular arithmetic on thread ids to stripe work across blocks.

All tasks in Pixels from Scratch

  1. Paint with Coordinates
  2. Checkerboard Logic
  3. Plot a Function
  4. Ripples: Think in Polar

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