Back to projects

Project case study

Self-Drive Car

Fleet of neural-network cars that learns to drive through neuroevolution, on Canvas in plain JavaScript.

My roleDeveloper
Technologies used
  • Canvas API
  • JavaScript
  • HTML
  • CSS
  • Node.js
Open demoView repository (opens in a new tab)Open video
Neural Drive Lab with the road, the cars and their ray sensors, the neural network and per-generation metrics.
self-drive-car.vercel.app / Home page

Problem

Teaching a car to drive without labelled data needs a way to select good behaviour.

A small network alone often crashes in traffic.

Solution

Architecture at a glance
  • Randomly generated synthetic traffic.
Technical decisions
  1. 9-ray sensor and a feedforward network with interpolation-based mutation (course base).
  2. Safety layer that assesses risk per lane and corrects commands.
  3. Fitness with penalties for lane, smoothness, reverse, standing still and proximity, with elitism.

Result

An honest study on a course's base, with its own safety, fitness and persistence layers.

  • Canvas 2D
  • Neuroevolution
  • Crediting a study base

Learnings and limitations

  • The safety layer uses the real traffic positions, not only the sensors.
  • The network activation is a step, with output 0 or 1.
  • The optional backend is not published.

More about the project

Full case details, collapsed for optional reading.

Full description

Simulation where a fleet of cars with small neural networks learns to drive in traffic through neuroevolution.

The base comes from Radu Mariescu-Istodor's Self-driving car – No libraries course: car, road, ray sensors and neural network in plain JavaScript.

On top of it, this project adds a deterministic safety layer, a fitness function with penalties, training presets and persistence of the best brain.

The safety layer reads the real traffic positions and overrides the network when blocked, so driving is largely rule-based.

Plain JavaScript with Canvas 2D, a PWA and an optional Node backend with tests; published as a static site.

Features and highlights
  • Simulation with a neural network view.
  • Training presets.
  • Save, import and export the best brain.
  • Keyboard shortcuts.
  • PWA.
  • Credits the base to Radu Mariescu-Istodor's course and separates what is its own.
  • Adds a deterministic safety layer on top of the network.
  • Renders the simulation at 16.7 ms per frame (p50) in the browser.
  • Saves and restores the best brain as JSON.
Technical architecture and data

Technical architecture

How the case was designed as a product

Fleet of neural-network cars that learns to drive through neuroevolution, on Canvas in plain JavaScript.

Canvas APIWeb platformJavaScriptLanguageHTMLWeb platformCSSWeb platformNode.jsFramework

Data used

  • Randomly generated synthetic traffic.

Core components

  • Simulation with a neural network view.
  • Training presets.
  • Save, import and export the best brain.
  • Keyboard shortcuts.
  • PWA.

Technical decisions

  • Canvas 2D
  • Neuroevolution
  • Crediting a study base

Trade-offs

  • The safety layer uses the real traffic positions, not only the sensors.
  • The network activation is a step, with output 0 or 1.
  • The optional backend is not published.
How to run
  1. npm install && npm run start
  2. Or: python -m http.server 5500
  3. Build: npm run build && npm run preview
Additional media
Project demonstration video.
Credits

Developed by Matheus Siqueira on the base of Radu Mariescu-Istodor's Self-driving car – No libraries course - https://www.matheusdev.tech

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case