🧬 Self-Parking Car Evolution

Training the car to do self-parking using a genetic algorithm.

• 🚕 Launch the demo
• 📃 Read about how it works

This is an experimental project with the aim to learn the basics of how genetic algorithm works by teaching the cars to do the self-parking. The evolution process is happening directly in the browser. You may check the evolution source-code (in TypeScript) or read the explanation of how it works in my blog-post.

At the beginning of the evolution the generation of cars has random genomes which make them behave something like this:

On the 40th generation the cars start learning what the self-parking is and start getting closer to the parking spot (although hitting the other cars along the way):

Another example with a bit more challenging starting point:

Genetic Source-Code

The ≈92% of the code in this repository relates to the UI logic (3D simulation of the cars world, form controls for the evolution training process, etc.).

However, the actual code that implements a genetic algorithm takes less than <500 lines of code.

Development Details

The project is a React application written on TypeScript. Styled with BaseWeb.

The 3D world simulation is made with Three.js library using @react-three/fiber wrapper. The physics is simulated with Cannon.js using cannon-es wrapper.

The whole evolution simulation is happening directly in the browser.

To launch the project, fork/clone it and run the following commands:

npm install
npm run start

The website will be available on http://localhost:3000/self-parking-car-evolution.

Hints:

• You may upload one of the pre-trained checkpoints to avoid starting the evolution from scratch.
• Use the ?debug=true URL param to see the FPS performance monitor and debugging logs in the console (i.e. http://localhost:3000/self-parking-car-evolution?debug=true).
• Training progress is being saved to the local storage for each generation (not for each batch/group).