Race Cars Screensaver
Race Cars is a free, in-browser screensaver that shows a field of top-down cars lapping a winding circuit forever, jostling for position on the straights. It runs instantly on a canvas with no download or install. Press ESC at any time to exit.
How the Race Cars screensaver works
The circuit is generated mathematically rather than drawn by hand. A base ellipse is bent into a closed loop by summing three sine waves of frequencies 2, 3, and 5 with random amplitudes and phases, producing a smooth but irregular track that always closes on itself.
Roughly every 22 seconds a brand-new set of track parameters is generated and the layout morphs smoothly into it over about three seconds, so the circuit slowly reshapes itself without ever jumping. The road is stroked as a thick rounded line with a dashed center line and a checkered start/finish drawn at the line.
Each car — 6 by default, up to 8 — travels along the same parametric path by advancing a position value from 0 to 1, offset sideways into its own lane. Its forward step is its personal base pace times your Speed setting, modulated by a slow sine so cars surge and fall back and trade places.
Cars are drawn as colored rectangles oriented along the track tangent, with a tinted cockpit and small black tires, each pulling its color from a fixed eight-color palette by index.
Closed curves and top-down racing
Top-down racing is among the oldest video game formats. Atari’s Gran Trak 10, released for arcades in 1974, is described as the first arcade car racing video game and the first to use a steering wheel, with the track seen from above. Seen from above, a car is just a small shape on a path, and what the eye reads as racing is mostly relative motion.
Why a sum of sines always makes a valid circuit comes down to periodicity. If the distance of a track from its centre is a combination of waves with whole-number frequencies around the circle, then after one full turn each wave returns to where it started, so the line meets itself with no gap or kink. Real circuits are not made this way, because designers have to balance corner radii, run-off space, spectator areas and overtaking opportunities.
In this saver, cars trade places because each one’s speed is modulated by a slow sine, so it surges and falls back. Real racing has its own reason for position changes: slipstreaming, where a car following closely behind another meets less air resistance and can catch up. Real drivers use it deliberately to set up passes.
A worked example
With the defaults — 6 cars, speed 5, track #3a3f48 on grass #16301c — six brightly colored cars circulate a dark asphalt loop on green grass, swapping places on the straights, while the circuit gently morphs into a new shape every 20–28 seconds. Set Cars to 8 and Speed to 10 for a packed, fast-moving grid.
Settings & tips
- Use the Cars slider (2–8) to set the size of the field; more cars means more position-swapping on the straights.
- Adjust Speed (1–10) to taste — low for a relaxed parade lap, high for a frantic sprint.
- Recolor the scene with the Track color and Grass color pickers to match a real circuit or your own palette.
Frequently asked questions
- Is the Race Cars screensaver free?
- Yes. Race Cars runs free in your browser with no download, install, or account needed. Open the page and it starts at once.
- How do I exit the Race Cars screensaver?
- Press the ESC key to exit at any time and return to the page. The race runs by itself until then.
- Is the race track always the same?
- No. The circuit is generated from random parameters and smoothly morphs into a new shape roughly every 20 to 28 seconds, so the layout keeps changing.
- How many cars can race at once?
- The Cars slider sets the field from 2 to 8 vehicles, each in its own color and lane.
- Does Race Cars work on phones and Macs?
- Yes. It runs on an HTML canvas in any modern browser, so it works on Windows, macOS, Linux, and mobile devices without a plugin.
- What is slipstreaming?
- A vehicle travelling just behind another sits in a pocket of disturbed air, so it faces less drag and can pull alongside. Racing drivers and cyclists use the effect.
- Do real circuits look like these tracks?
- Real circuits are designed around safety, spectators and overtaking, and are often built from straights joined by corners of chosen radius. The generated tracks are smooth curves with no such constraints.
- Why does a track from a few sine waves always close?
- Each wave completes a whole number of cycles in one lap, so the end of the lap lines up exactly with the start. That guarantees a closed loop.