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 5 / 11 [Procedural Generation with JavaScript]](https://i.ytimg.com/vi/BBFNvmUKxJ0/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world. In this video were diving into the art of adding decorative elements to the virtual world—specifically, buildings and trees. In this video we start by defining the bases of these structures.
Now, you might wonder why not use the same graph editing tools weve explored before? Well, if youre planning to create expansive worlds and desire precise alignment, it can get quite tedious. So, were going to leverage the functionalities we already have and implement a clever algorithm for procedurally generating buildings alongside the roads. And for that extra touch of realism, well randomly place trees where they naturally fit.
Admittedly, this solution may limit your ability to design buildings exactly as you envision them, but the trade-off is worth it. With this approach, world generation becomes incredibly fast and straightforward. In fact, youll be able to build vast cities in no time! 🏢🌳
Heres a sneak peek of the algorithm: We start by creating thicker envelopes, then use the same process as before to extract the outer segments. We keep the segments long enough to support at least one building and, for the exceptionally long ones, divide them into multiple supports. Finally, we generate polygons around these structures using envelopes and apply some fine-tuning to achieve the desired results.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
4. Roads = follow along
5. Buildings And Trees= code after this lesson
💻COPY CODE FROM HERE💻
https://radufromfinland.com/projects/virtualworld/CODES/lesson_5.js
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐My Video on Distance to Segment⭐
https://youtu.be/jvqomjmMsPI
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:17 Top-level code
03:03 Generating Buildings
19:58 Generating Trees
26:55 Avoid illegal locations
39:18 Fine-tuning")
![3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]](https://i.ytimg.com/vi/BqX994oVyNE/mqdefault.jpg "3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
In Lesson 10 of the Understanding AI course, Im excited to teach you how to implement a unique perspective in your self-driving car project: one from the cars viewpoint. The fascinating part? We wont be using any libraries to achieve this effect, as the underlying math is surprisingly straightforward. I believe understanding the fundamentals is crucial, and youll appreciate the simplicity of the method.
I stumbled upon a helpful video (https://youtu.be/6td_zpQC1U4) during my own learning journey, which inspired the approach Im about to share with you. While the method Ill teach is a bit different, it caters to our self-driving cars ability to turn around, allowing us to see things from any angle. The core mathematical principles, however, remain almost the same. For another perspective, I recommend checking out the referenced video.
Get ready for some in-depth learning on creating a 3D camera sensor in JavaScript using math. Were diving into the world of perspective views, and by the end of this lesson, youll be able to implement this exciting feature in your own projects. Join me in exploring the mathematical magic behind 3D cameras, and dont forget to like, share, and subscribe for more lessons on AI, game development, and innovative programming techniques!
💻CODE 💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 5. Procedural Sound
Code After This Lesson: 6. Camera Part 1
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Video about 3D: https://youtu.be/6td_zpQC1U4
#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson
⭐TIMESTAMPS⭐
00:00 Introduction
01:01 Quick Debugging
02:42 Camera Object
09:58 Rendering what the Camera sees
14:05 Explaining the Projection
19:30 Debugging / Fixing Problems")
