Workshop › OutRun-style Racer › Step 25 of 44
The cleverest trick of the old racers: the road is not really curved. While drawing, each segment is shifted sideways a
little more than the one before: x += dx, then dx += curve. A growing shift makes a smooth curve.
```js
// Work out where every segment is on screen, from near to far, bending the road a little more at each curve.
const base = Math.floor(position / SEG)
let x = 0
let dx = 0
const shown = []
for (let i = 0; i < DRAW; i++) {
const index = (base + i) % segments.length
const z = (base + i) * SEG - position
const near = project(x - playerX * ROAD, -CAMERA_HEIGHT, z)
const far = project(x + dx - playerX * ROAD, -CAMERA_HEIGHT, z + SEG)
x += dx
dx += segments[index].curve
if (z > 0) shown.push({ index, near, far })
}
```x is how far the current segment is shifted sideways, dx how much more the next one will be.x, the far edge by x + dx; then x grows by dx, and dx grows by this segment's
curve.curve is 0 and the shift stops growing; the road goes on in the direction it has.let x = 0 and let dx = 0 under base.near line put x in front of - playerX * ROAD; in the far line put x + dx.far line write x += dx and dx += segments[index].curve.Skills: Velocity and gravity, Drawing on a canvas
← A track with curves No jumps in the curve →