Build a Virtual World Filled with Self-Driving Cars – JavaScript Tutorial
5,243Learn to build a virtual environment entirely from the ground up using basic HTML, CSS, and JavaScript. You can easily make something like Pokemon Go using it, but you'll learn to fill it with the self-driving cars from Radu's other course: https://youtu.be/Rs_rAxEsAvI
In this course, you'll learn valuable skills like: mathematics, algorithms, programming, and design—skills that greatly benefited Radu during his PhD and his time at Microsoft. Here's what you'll learn:
* Building a spatial graph from scratch and creating an editor with a dynamic viewport.
* Understanding the mathematics and logic behind user-friendly interfaces in modern software.
* Generating road borders, buildings, and trees using geometry and creating a 3D effect.
* Implementing road markings to prepare for advanced self-driving challenges.
* Enhancing the world editor for user convenience and maximizing auto-generated content.
* Loading real-world data from openstreetmap for city-based simulations.
* Creating a minimap for navigation in expansive worlds.
Created by @Radu
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
🔗Phase 1 - Self-Driving Cars with JavaScript: https://www.youtube.com/watch?v=Rs_rAxEsAvI
💻CODE💻
https://github.com/gniziemazity/virtual-world
💻COPY CODE FROM HERE💻
https://radufromfinland.com/projects/virtualworld/CODES/lesson_4.js
https://radufromfinland.com/projects/virtualworld/CODES/lesson_5.js
👨💻MATERIAL FROM STUDENTS👨💻
Brett ported the code from Phase 1 to ThreeJS:
https://github.com/Bretto/evolution
@davidmurphy563 ported the code from Phase 1 to Godot:
https://youtu.be/FJFrSCEWqLU?si=toU4O43h2oaJmKUy
⭐RECOMMENDED PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐PREREQUISITES I SPECIFICALLY MENTION⭐
Pythagorean Theorem: https://youtu.be/iqSlzYXdFzw
Euclidean Distance: https://youtu.be/3rPwfmrCwVw
2D Vectors: https://youtu.be/nzyOCd9FcCA
Distance to Segment: https://youtu.be/jvqomjmMsPI
Segment Intersection: https://youtu.be/fHOLQJo0FjQ
Interpolation: https://youtu.be/J_puRs40GhM
⭐EMOJIS⭐
🗑️💾🌐🛑🚶🚙🅿️🚦⚠️🎯📁
⭐EXTRA VIDEOS⭐
Adding the Self-driving Cars
https://youtu.be/wH2aNJxltus
Using Real-world Data (OpenStreetMap)
https://youtu.be/IKwkOajkSHs
How to make a MiniMap
https://youtu.be/ecZRuuLjGQA
☕Buy Radu a Coffee?☕
https://www.buymeacoffee.com/radum
⭐ Contents ⭐
⌨️ (0:00:00) Introduction
⌨️ (0:05:21) Project Setup
⌨️ (0:10:16) Spatial Graphs
⌨️ (0:47:50) Graph Editor
⌨️ (1:27:30) Dynamic Viewport
⌨️ (2:03:15) Generating Roads
⌨️ (2:49:25) Buildings And Trees
⌨️ (3:31:47) Pseudo 3D
⌨️ (4:04:59) Road Markings
⌨️ (5:09:65) Saving the World
⌨️ (5:40:57) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news