Workshop › OutRun-style Racer › Step 7 of 44
Now the real road replaces the test piece: for each of the next 100 segments we project its near and far edge and paint a trapezoid. Laid end to end they make a road running to the horizon.
```js
const DRAW = 100 // segments drawn
// Work out where every segment is on screen, from near to far.
const base = Math.floor(position / SEG)
for (let i = 0; i < DRAW; i++) {
const z = (base + i) * SEG - position
const near = project(0, -CAMERA_HEIGHT, z)
const far = project(0, -CAMERA_HEIGHT, z + SEG)
if (z > 0) quad('#6b7280', near.x, near.y, near.w, far.x, far.y, far.w)
}
```DRAW is how many segments we draw; further away they would be dots anyway.base is the segment the camera is on (0 for now; it grows when we drive). Math.floor rounds down.z is how far the start of segment base + i is in front of the camera.near and far are its two edges on screen. if (z > 0) skips a segment at or behind the camera (DEPTH / 0 would
be infinite).DEPTH line write the DRAW line.draw, delete the three test lines and write the comment, base and the for loop in their place.Skills: Loops, Drawing on a canvas
← Where we are on the track Stripes →