Uploaded December 2022 | Updated September 2026, 2 weeks ago
In this video I teach you how to use vanilla JavaScript to make a Sparkler (or Fireworks). We code the sparkler from scratch, by implementing a simple particle system and show the sparkler over a video coming from the camera in real-time. It's a small project that teaches you about accessing the camera, basic image processing and particle physics. Have fun!
⭐️LINKS⭐️
Lesson on Interpolation (LERP): youtu.be/J_puRs40GhM
Video about the Squared Root: youtu.be/VIWw8evmg6o
Pythagorean Theorem: youtu.be/iqSlzYXdFzw
Draw the Portal (Dr. Strange Game): youtu.be/0SxiyLk2IMM
⭐️MY OTHER JS VFX⭐️
Torch: youtu.be/Q_SbeuxHUzA
Spiderman's web shooters: youtu.be/xkhvb_GYgx4
Dr. Strange's portal opening: youtu.be/0SxiyLk2IMM
KameHameHa: youtu.be/qcQqlzYCXNM
Matrix Effect on shirt: youtu.be/GmB0ge-CuZo
Theremin: youtu.be/k8seP2yEKqQ
⭐️CODING ULTRAMARATHON⭐️
I implemented many javascript camera effects during my coding ultramarathon: youtube.com/playlist?list=PLB0Tybl0UNfYqtrzXghkjL3UP1-17D3rE
⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
0:29 Project setup
2:22 Accessing Camera
6:27 Implementing the Effect class
11:22 Getting Image Data from HTML Canvas
14:07 Get blue Pixel Locations
20:41 Distance between Colors
24:47 Getting the Average location
27:04 Particle System
30:54 Styling the Sparkles
In this video I teach you how to use vanilla JavaScript to make a Sparkler (or Fireworks). We code the sparkler from scratch, by implementing a simple particle system and show the sparkler over a video coming from the camera in real-time. It's a small project that teaches you about accessing the camera, basic image processing and particle physics. Have fun!
⭐️LINKS⭐️
Lesson on Interpolation (LERP): youtu.be/J_puRs40GhM
Video about the Squared Root: youtu.be/VIWw8evmg6o
Pythagorean Theorem: youtu.be/iqSlzYXdFzw
Draw the Portal (Dr. Strange Game): youtu.be/0SxiyLk2IMM
⭐️MY OTHER JS VFX⭐️
Torch: youtu.be/Q_SbeuxHUzA
Spiderman's web shooters: youtu.be/xkhvb_GYgx4
Dr. Strange's portal opening: youtu.be/0SxiyLk2IMM
KameHameHa: youtu.be/qcQqlzYCXNM
Matrix Effect on shirt: youtu.be/GmB0ge-CuZo
Theremin: youtu.be/k8seP2yEKqQ
⭐️CODING ULTRAMARATHON⭐️
I implemented many javascript camera effects during my coding ultramarathon: youtube.com/playlist?list=PLB0Tybl0UNfYqtrzXghkjL3UP1-17D3rE
⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
0:29 Project setup
2:22 Accessing Camera
6:27 Implementing the Effect class
11:22 Getting Image Data from HTML Canvas
14:07 Get blue Pixel Locations
20:41 Distance between Colors
24:47 Getting the Average location
27:04 Particle System
30:54 Styling the Sparkles
![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")
