Build a Virtual World Filled with Self-Driving Cars – JavaScript Tutorial

Learn 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 🔗Phase 3: https://youtube.com/watch?v=w8n3D8yUZKM 💻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 ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐ 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