Workshop › OutRun-style Racer › Step 8 of 44

Stripes

What we are doing

A plain gray road will not look like it moves: there is nothing on it for the eye to follow. We paint the segments light and dark, three at a time. When the road starts moving, these stripes will rush towards you.

```js
for (let i = 0; i < DRAW; i++) {
  const index = (base + i) % segments.length
  const z = (base + i) * SEG - position
  const near = project(0, -CAMERA_HEIGHT, z)
  const far = project(0, -CAMERA_HEIGHT, z + SEG)
  const light = Math.floor(index / 3) % 2 === 0
  if (z > 0) quad(light ? '#6b7280' : '#646b75', near.x, near.y, near.w, far.x, far.y, far.w)
}
```

What it means

index is the segment's number in the list; % (remainder) wraps it back to 0 after the last segment.
Math.floor(index / 3) is 0 for segments 0–2, 1 for 3–5, and so on; % 2 === 0 asks "is it even?". So light switches every three segments.
light ? a : b picks a when light is true, otherwise b.

Your turn

Right under the for line write the index line.
Above the if (z > 0) line write the light line.
In quad(, replace '#6b7280' with light ? '#6b7280' : '#646b75'.

Skills: Drawing on a canvas

← The road ahead Paint from far to near →

All steps