Workshop › OutRun-style Racer › Step 10 of 44

Kerbs and a center line

What we are doing

Race tracks have red and white kerbs at the edges and a dashed line in the middle. Both are trapezoids too: the kerb a little wider than the road and painted before it, the center line very thin and painted after it.

```js
const light = Math.floor(index / 3) % 2 === 0
quad(light ? '#f8fafc' : '#dc2626', near.x, near.y, near.w * 1.15, far.x, far.y, far.w * 1.15)
quad(light ? '#6b7280' : '#646b75', near.x, near.y, near.w, far.x, far.y, far.w)
if (light) quad('#f8fafc', near.x, near.y, near.w * 0.03, far.x, far.y, far.w * 0.03)
```

What it means

• The kerb is 1.15 times as wide as the road, white on light segments and red on dark ones. The road covers its middle.
• On light segments only, a white line 0.03 times the road's width is painted on top: light and dark take turns, so the line is dashed.

Your turn

In the second loop, write the kerb line above the road quad and the center line below it.

Skills: Drawing on a canvas

← Paint from far to near Striped grass →

All steps

1. Sky and ground
2. Draw again and again
3. Perspective
4. One piece of road
5. A road made of segments
6. Where we are on the track
7. The road ahead
8. Stripes
9. Paint from far to near
10. Kerbs and a center line
11. Striped grass
12. Moving is one number
13. Which keys are down?
14. The gas pedal
15. Brake, coast and a top speed
16. Your car
17. Speedometer
18. A pedal for phones
19. Move the camera sideways
20. Steering
21. No turning on the spot
22. The grass is slow
23. Steering by touch
24. A track with curves
25. Bend the road
26. No jumps in the curve
27. Which segment am I on?
28. Curves pull you outwards
29. Other cars
30. Distance on a loop
31. Cars that shrink with distance
32. Traffic moves
33. Rear-end crash
34. Counting laps
35. Show the lap
36. A lap timer
37. Show the time
38. Best lap
39. Show the best lap
40. Racing or finished
41. The finish line
42. Finished!
43. Race again
44. Build it yourself: beat the clock