Uploaded December 2024 | Updated September 2026, 2 weeks ago
PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfalh9Ll82j6OKdx1QINOZom
This December, I’m creating a Christmas calendar with vanilla JavaScript and HTML canvas. Every day, I’ll share a tutorial where I procedurally generate a unique “Christmasy” icon. These icons are perfect for projects this time of year, and I want them to be free, scalable, and customizable.
Join me to practice JavaScript, learn about coordinates, basic math, and programming techniques. It’s a great way to dive into modularity, reusability, and writing consistent code. Plus, I’ll showcase YOUR versions on December 24th if you share them with me!
💻Code💻 github.com/gniziemazity/christmas_calendar
💬Discord💬 discord.gg/gJFcF5XVn9
☕Buy me a Coffee?☕ buymeacoffee.com/radum
⚡️Join this Channel⚡️youtube.com/@Radu/join
PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfalh9Ll82j6OKdx1QINOZom
This December, I’m creating a Christmas calendar with vanilla JavaScript and HTML canvas. Every day, I’ll share a tutorial where I procedurally generate a unique “Christmasy” icon. These icons are perfect for projects this time of year, and I want them to be free, scalable, and customizable.
Join me to practice JavaScript, learn about coordinates, basic math, and programming techniques. It’s a great way to dive into modularity, reusability, and writing consistent code. Plus, I’ll showcase YOUR versions on December 24th if you share them with me!
💻Code💻 github.com/gniziemazity/christmas_calendar
💬Discord💬 discord.gg/gJFcF5XVn9
☕Buy me a Coffee?☕ buymeacoffee.com/radum
⚡️Join this Channel⚡️youtube.com/@Radu/join
![A Virtual World - JavaScript Course: Lesson 3 / 11 [Pan & Zoom with JavaScript]](https://i.ytimg.com/vi/S4HMcN2YlgU/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 3 / 11 [Pan & Zoom with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world. In this video Ill teach you how to add a dynamic viewport to our graph editor using basic HTML, CSS and JavaScript.
While the current editor may be great for smaller tasks, the dynamic viewport will be really useful if you want to create larger graphs that extend beyond your screens boundaries. The viewport will allow zooming and panning, just like the editing experience you find in software like Photoshop.
By the end of this tutorial, youll have the ability to work on expansive graphs with ease, making your editing process incredibly flexible. But thats not all – well also ensure that your hard work doesnt vanish into thin air. Ill teach you how to save your graph so that it remains intact even after refreshing the page.
Its time to get that birds eye view of your graphs, quite literally! 🦅 Lets dive in and make your graph editing experience more versatile and persistent.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
2. Graph Editor = follow along
3. Dynamic Viewport = code after this lesson
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emojis I used in the video⭐
🗑️💾
⭐My Video on 2D Vectors⭐
https://youtu.be/nzyOCd9FcCA
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:06 Top-level Code Structure
02:01 Zoom Functionality
09:47 Drag / Pan Functionality
26:30 Saving and Loading")
![Fine-Tuning the Racing Game with Self-driving Cars [Understanding AI - Lesson 15 / 15]](https://i.ytimg.com/vi/SHrIPpbElkY/mqdefault.jpg "Fine-Tuning the Racing Game with Self-driving Cars [Understanding AI - Lesson 15 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
Welcome to the grand finale, Lesson 15 of the Understanding AI course! In this concluding update, well add some finishing touches to our racing game. Well play around with styles to give the game a polished look, integrate cars into the minimap, explore a simple collision handling method, and finally, Ill share a neat trick on making the car visually impressive.
Get your editors fired up and join me for one last ride!
I really hope you enjoyed this course. If you found it helpful, please remember to like and share it with others so they too can embark on this learning adventure. Stay tuned for an upcoming live stream event!
💻CODE 💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 10. Camera Input
Code After This Lesson: 11. Fine Tuning
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#RacingGame #RacingGameJavaScript #Collisions #JavaScriptCollisions #3DJavaScript #3DNoLibraries #JavaScriptMiniMap
⭐TIMESTAMPS⭐
00:00 Introduction
01:02 De-emphasizing the Other Cars
05:26 Showing all Cars on MiniMap
11:30 Background and Buildings Style
16:26 Restyling the Stats
17:36 Collision Handling
26:47 Styling the Car
49:10 Fine-Tuning")
![Using Dijkstras Shortest Path With AI [Understanding AI - Lesson 7 / 15]](https://i.ytimg.com/vi/TKIKFrcvnv4/mqdefault.jpg "Using Dijkstras Shortest Path With AI [Understanding AI - Lesson 7 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
In this seventh lesson of the Understanding AI course, we delve into the practical application of Dijkstras algorithm in teaching AI cars to follow the shortest path. Just determining the shortest route is not sufficient; the car needs to navigate it effectively.
We do that by generating a corridor around the shortest path, compelling the AI car to adhere to it while following the right-hand rule. This innovative approach ensures precise navigation without the need for explicit target points. Join me on this journey of understanding AI, where theory meets practical implementation in the fascinating world of autonomous vehicle algorithms. Dont forget to like, share, and subscribe for more insightful lessons!
🚗FINAL CHALLENGE: DESIGN AND TEST YOUR RACING CAR HERE🚗
https://radufromfinland.com/projects/aiCarPlayground/?s=race_1
https://radufromfinland.com/projects/aiCarPlayground/?s=race_2
https://radufromfinland.com/projects/aiCarPlayground/?s=race_3
https://radufromfinland.com/projects/aiCarPlayground/?s=race_4
OR THESE WITH THE DECISION BOUNDARY SLOW (IT CAN BE SLOW...):
https://radufromfinland.com/projects/aiCarPlayground/?s=race_1_d
https://radufromfinland.com/projects/aiCarPlayground/?s=race_2_d
https://radufromfinland.com/projects/aiCarPlayground/?s=race_3_d
https://radufromfinland.com/projects/aiCarPlayground/?s=race_4_d
💻CODE💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 2. Dijkstra Part 1
Code After This Lesson: 3. Dijkstra Part 2
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#DijkstrasAlgorithm #UnderstandingAI #Pathfinding #JavaScriptCoding #AIPlayground #InteractiveLearning #LocationBasedApplications
⭐TIMESTAMPS⭐
00:00 Introduction
01:09 Generating the Corridor
06:05 Temporary Graph Manipulation
19:35 The Final Challenge")
