Radu Mariescu-Istodor | Procedural Drawing and Animation with JavaScript | Coding on a Flight! @Radu | Uploaded 1 month ago | Updated 2 hours ago
Join me on another flight as I code a procedural plane drawing and animation using JavaScript! ✈️ In this video, I'll walk you through creating a detailed plane design and adding interactive animations, all on an HTML Canvas. Whether you're a coding enthusiast or just looking for a fun project, this tutorial has something for everyone. Here's what you'll learn:
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing a plane procedurally with JavaScript
- Creating detailed plane parts like the propeller, wings, and tail
- Adding interactivity with sliders for animation
- Implementing smooth animations and event listeners
- Live coding challenges and solutions
Check out the final demo on my website and let me know if you'd like to see more projects like this. Like, comment, and subscribe for more coding adventures!
DEMO: radufromfinland.com/projects/plane_2
Join me on another flight as I code a procedural plane drawing and animation using JavaScript! ✈️ In this video, I'll walk you through creating a detailed plane design and adding interactive animations, all on an HTML Canvas. Whether you're a coding enthusiast or just looking for a fun project, this tutorial has something for everyone. Here's what you'll learn:
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing a plane procedurally with JavaScript
- Creating detailed plane parts like the propeller, wings, and tail
- Adding interactivity with sliders for animation
- Implementing smooth animations and event listeners
- Live coding challenges and solutions
Check out the final demo on my website and let me know if you'd like to see more projects like this. Like, comment, and subscribe for more coding adventures!
DEMO: radufromfinland.com/projects/plane_2
![3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]](https://i.ytimg.com/vi/BqX994oVyNE/hqdefault.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")
