Visualizations
475 / 500

475 · Games

Drift Racer

Pacejka tire physics on a generated circuit, with a drifting AI that plans ahead.

Each car is a dynamic bicycle model with yaw inertia and load transfer, and its tires follow the Pacejka magic formula: grip rises with slip angle to a peak and then falls away, which is what lets a car hold a slide. The rear tire shares one friction circle between drive and cornering, so throttle in a corner steps the tail out, and every sliding wheel paints a mark into the world texture, so the asphalt keeps a record of each lap. The circuit is a closed spline through jittered polar points, and the racing line is the curve inside the track with the least total squared curvature (projected Gauss-Seidel, coarse to fine), with a speed profile from the friction limit plus braking and power passes. The grip drivers track that line; the red car is a small model-predictive controller that simulates 25 combinations of steering and throttle half a second ahead every frame and picks the one that keeps it sideways, on the line and never spinning. The overlay shows that search, the 25 futures fanned out ahead of the car with the chosen one in white, over the racing line colored by its speed profile from red braking zones to cyan straights.

Try it. Arrow keys or WASD drive the red car (space is the handbrake), or hold the pointer and the car steers toward it. The other cars turn into ghosts while you drive. C cycles the camera between cars, L hides the racing line and planner overlay, and N builds a new circuit.

  • Pacejka tire model
  • Minimum-curvature racing line
  • Model predictive control
  • Friction circle

View the source · one module, plus a small shared runtime for sizing, the animation loop and input

Build your own

Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.

Build a top-down racing game with real drifting physics using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.

Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens. Paint green grass and a gray closed track: a smooth loop through a dozen random points around an ellipse (a closed Catmull-Rom spline), stroked about 14 meters wide.
- Model the car as a "bicycle": one front wheel and one rear wheel on a rigid body with position, heading, forward and sideways velocity, and yaw rate. Work in meters and seconds.
- Each frame, compute each tire's slip angle (the angle between where the wheel points and where it is actually moving) and turn it into a sideways force with the Pacejka magic formula, F = mu * load * sin(C * atan(B * slip)) with B about 10 and C about 1.9. Grip peaks at a small slip angle and then falls off, which is what makes sliding possible.
- Add rear-wheel drive and brakes, and limit the rear tire's total force to a friction circle, so that heavy throttle in a corner takes grip away from cornering and the tail steps out.
- Steer with the arrow keys, update the physics in a few small steps per frame, and follow the car with the camera.

Once that works, make it beautiful:
- Draw the car as a little rotated sprite with a shadow, windows and racing stripes, and show the front wheels turning.
- Keep the whole world in one offscreen canvas and draw dark tire marks into it whenever a wheel is sliding, so the track remembers every drift. Add puffs of tire smoke.
- Add red and white curbs on the corners, mowing stripes in the grass and a few trees with soft shadows.

Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as AI cars that follow a computed racing line, a lap timer with a ghost of your best lap, or a minimap.
PreviousSlicing Four DimensionsA hyperplane sweeps through 4D shapes, leaving glassy 3D cross sections. NextCeltic KnotworkManuscript knot panels woven from a grid of breaks. Click to reweave the threads.

Related visualizations

  • Ghost RacersMachine learning Sixty neural-net cars evolve to race a track, then face one you draw.
  • RRT* ParkingAlgorithms A self-driving car grows a tree of curved manoeuvres, then reverses into its spot.
  • Mode 7 TrackRetro The per-scanline floor trick of 16-bit kart racers, with a debug view of every row.
  • Marble LabyrinthGames A wooden tilt maze where a careful AI steers a steel ball between the holes.
  • Procedural PinballRetro Generated pinball tables in perspective, played by an AI that simulates its flips.
  • Gridlock SolverAlgorithms Map every position of a sliding-car puzzle, solve it, and generate harder ones.
  • Pool Trick ShotsGames Billiards with real spin physics and an AI that plans by simulating every shot.
  • Rotating SnakesIllusions A perfectly still image whose wheels turn wherever you are not looking.
  • RendezvousGames Dock a capsule with a station, where thrusting toward it sends you backward.

Use ← and → to move between demos. While the canvas has focus, keys go to the demo instead.

← More from Emergent Mind Labs