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 6 / 11 [Pseudo 3D with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world.
In this video, we learn a way to make our items 3D. While you could certainly add some sprites to your existing 2D interface, creating a 3D look is a whole different experience.
Ive previously demonstrated how to use images for adding cars, and even offered tips for recoloring sprites in previous tutorials. But what if youre aiming for a genuine 3D appearance? You could completely refactor your application to utilize a 3D rendering engine. Like:
⭐ Bretto 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
I want to teach you a way to get the 3D look without using a 3D engine because I find this effect visually appealing, and its surprisingly straightforward to implement.
Beyond the visual aspect, you may also find the underlying mathematics intriguing. While 3D renderers primarily employ triangles or voxels, our focus wont involve these elements. Nonetheless, this exploration touches upon fundamental principles of 3D rendering, providing insights into how these complex systems function.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
5. Buildings And Trees = follow along
6. Fake 3D = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐My Video on the Euclidean Distance⭐
https://youtu.be/3rPwfmrCwVw
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:29 Creating the Tree Object
05:08 Explaining the 3D approach
10:47 Styling the 3D Trees
16:02 Random number generation
20:35 Creating the Building Object A Virtual World - JavaScript Course: Lesson 6 / 11 [Pseudo 3D with JavaScript]](https://i.ytimg.com/vi/aKzlooeJNM8/mqdefault.jpg)
![🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor]
Ill be coding a simple candle simulation where the flame always points up (even if you rotate the device). 🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor]](https://i.ytimg.com/vi/avxStAp0mco/mqdefault.jpg)







