A self-driving car simulator that runs in a single browser tab. Cars with randomly wired neural networks are dropped onto a road full of traffic, and over many generations of selection and mutation they learn to drive. There are no frameworks and no ML libraries.
The Idea
Neural networks usually come wrapped in libraries that hide the interesting parts. We wanted to build every piece by hand: car physics, raycast sensors, collision detection, a feedforward network and the genetic algorithm that trains it. The goal was to watch learning happen live, with the network's activity drawn next to the road while it drives.
It started from the basics, a canvas, a car and keyboard controls, and grew in small commits: sensors, damage detection, traffic awareness, then the network visualiser and a refined fitness function. A later iteration added a second learning method so the two could be compared on the same road.
What We Built
-
✦
Raycast sensors Each car casts twelve rays: eight spread across a 135° forward arc and four facing backward. Every ray reports the nearest hit against the road borders and the traffic cars.
-
✦
A hand-written network A feedforward network takes 24 inputs, the twelve sensor readings plus their ray angles. It has a 16-neuron hidden layer and four outputs: forward, left, right and reverse. Each car's body is a polygon, and crashes are detected by intersecting it with the borders and the traffic.
-
✦
Neuroevolution A generation of cars drives at once, scored by distance travelled, plus speed × 5, plus 20 for every car overtaken. The best brain is saved, and the next generation starts from mutated copies of it. Mutation pulls every weight toward a random value by a rate you can adjust.
-
✦
Endless traffic New traffic is generated ahead of the leading car and removed once it falls far behind. This keeps the road challenging without letting the object count grow without limit.
-
✦
Live network visualiser The leading car's network is drawn beside the road in real time, with labelled sensor inputs. You can see which rays are driving each decision.
-
✦
Training controls and a brain library You can set the car count from 1 to 200, the mutation rate and the top speed, and run the simulation at 2×, 4× or 8×. Training can be paused, skipped to the next generation or restarted from the keyboard. Brains are saved per generation, ranked by fitness, and can be exported or imported as JSON.
-
✦
A reinforcement-learning mode A second mode swaps evolution for Deep Q-Learning on a single car. It has an experience-replay buffer of 5,000 steps, epsilon-greedy exploration that decays each episode, and clipped weight updates.
The Stack
It's vanilla JavaScript on an HTML5 Canvas, with no build step and no dependencies. Open the HTML file and it runs. The network, the mutation and the Q-learning updates are plain arrays and loops. A small math module handles interpolation and polygon intersection. A central state module stores the generation count, best-ever scores and training settings in localStorage, alongside the current best brain and the light or dark theme, so a training session survives a page reload.
What We Learned
Much of the work sat outside the network itself. The commit history shows sensor ray counts tried and reverted, the sensors extended to detect traffic, and the fitness calculation refined alongside traffic regeneration. The final fitness formula rewards speed and overtaking directly, not just distance. Training heuristics from running it are documented with the project: start with a mutation rate of 0.3 to 0.4, drop it to 0.1 to 0.2 for fine-tuning, and run 50 to 100 cars where the machine allows. The simulator runs entirely client-side, so the quality of a trained brain depends on how long a session is left running. The original genetic-algorithm build is public, source on GitHub. The reinforcement-learning mode, speed controls and brain import and export came in a later iteration.
Need something similar? Reach out. We build interactive simulations and explainers that show how AI makes its decisions.