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
⭐ 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
Видео Build a Virtual World Filled with Self-Driving Cars – JavaScript Tutorial канала freeCodeCamp.org
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
⭐ 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
Видео Build a Virtual World Filled with Self-Driving Cars – JavaScript Tutorial канала freeCodeCamp.org
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
College Precalculus – Full Course with Python CodeCode a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full CourseFull HTTP Networking Course – Fetch and REST APIs in JavaScriptDeep Learning for Computer Vision with Python and TensorFlow – Complete CourseFull-Stack Next.js, TypeScript, and AWS Course – Code a Quote GeneratorBuild AI Apps with ChatGPT, DALL-E, and GPT-4 – Full Course for BeginnersAWS Solutions Architect Associate Certification (SAA-C03) – Full Course to PASS the ExamMicroservice Architecture and System Design with Python & Kubernetes – Full CourseReact Hook Form Course for Beginners (inc. Zod + Material UI)Back End Developer Roadmap 2024DevOps with GitLab CI Course - Build Pipelines and Deploy to AWSDynamic Programming - Learn to Solve Algorithmic Problems & Coding ChallengesWeb App Vulnerabilities - DevSecOps Course for BeginnersJavaScript Game Development Course for BeginnersTensorFlow for Computer Vision Course - Full Python Tutorial for BeginnersCreate a Design System with CSS - Web Development CoursePython for Bioinformatics - Drug Discovery Using Machine Learning and Data AnalysisAdvanced Git Tutorial - Interactive Rebase, Cherry-Picking, Reflog, Submodules and moreAutomate with Python – Full Course for BeginnersPython API Development - Comprehensive Course for BeginnersFrontend Development Course - Create a Blog with HTML & CSS