Uploaded August 2024 | Updated September 2026, 2 weeks ago
Join me on a coding adventure in the sky! In this video, I recreate a classic Macromedia Flash animation technique using JavaScript while on a plane. Watch as I build a fully functional plane animation on an HTML Canvas, complete with motion tweens, path drawing, and smooth orientation to the path.
Highlights:
- Setting up a basic Canvas project with HTML and CSS
- Drawing a plane and designing its shape programmatically
- Implementing path drawing with event listeners for interactivity
- Animating the plane along the drawn path
- Adding features like path resampling and smoothing
- Live coding challenges and solutions
Don’t miss the live demo on my website for the full experience! Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Like, comment, and subscribe for more coding content!
DEMO: radufromfinland.com/projects/plane_1
Join me on a coding adventure in the sky! In this video, I recreate a classic Macromedia Flash animation technique using JavaScript while on a plane. Watch as I build a fully functional plane animation on an HTML Canvas, complete with motion tweens, path drawing, and smooth orientation to the path.
Highlights:
- Setting up a basic Canvas project with HTML and CSS
- Drawing a plane and designing its shape programmatically
- Implementing path drawing with event listeners for interactivity
- Animating the plane along the drawn path
- Adding features like path resampling and smoothing
- Live coding challenges and solutions
Don’t miss the live demo on my website for the full experience! Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Like, comment, and subscribe for more coding content!
DEMO: radufromfinland.com/projects/plane_1
![Procedural Sounds for Games with JavaScript and WebAudioAPI [Understanding AI - Lesson 9 / 15]](https://i.ytimg.com/vi/yfscQFZcGIc/mqdefault.jpg "Procedural Sounds for Games with JavaScript and WebAudioAPI [Understanding AI - Lesson 9 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
Welcome to Lesson 9 of the Understanding AI course, where Ill guide you through the exciting process of creating procedurally generated racing game sounds using JavaScript and the WebAudioAPI. In this video, Ill teach you how to generate sound from scratch, starting with a simple beeping noise that we can play at different frequencies. Well then dive into the intricacies of creating dynamic engine noises for our racing game.
These procedurally generated sounds arent limited to our project alone – you can use them in any of your creative endeavors. However, Ill demonstrate how to seamlessly integrate these sounds into our racing game with self-driving cars. Imagine the beeps enhancing your countdown timer and the engine noise dynamically changing based on the cars actions in the game.
So, get ready for some sound advice! Well explore the world of sound generation in JavaScript, adding an auditory dimension to our gaming experience. Join me in this immersive lesson, and lets make our racing game truly come to life with unique, procedurally generated sounds. Dont forget to like, share, and subscribe for more lessons on AI, game development, and creative sound design!
💻CODE FOR THE RACING GAME PART💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 4. Racing Game
Code After This Lesson: 5. Procedural Sound
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#RacingGame #RacingGameJavaScript #GameSound #RacingGameSounds #RacingSoundsJavaScript #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:12 Basic Project Setup
01:57 Using the WebAudioAPI
04:38 Visualizing Sounds
08:40 Debugging
11:30 Envelopes
16:56 Engine Noise
22:41 Finalizing the Sound functions
23:44 Adding the Sound to the Racing Game")
![A Virtual World - JavaScript Course: Lesson 8 / 11 [Saving the World]](https://i.ytimg.com/vi/zt8QDgwdqr8/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 8 / 11 [Saving the World]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. In this video well learn a critical phase of our UI development journey! So far, weve been saving our graph data in local storage and regenerating it when the page loads. But in this way we lose those markings, cant store multiple worlds, and the random appearance of trees might not be something you want.
Moreover, as we move into working with real-world data, youll realize that drawing such extensive graphs manually isnt practical. Thats why its crucial to explore a more efficient approach: storing information in actual world files that can be loaded when needed! 🌍
Lets learn about data persistence and discover how to save and load your graph efficiently, preserving all your hard work and making your UI development experience smoother.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
7. Markings = follow along
8. Saving The World = code after this lesson
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emoji I used in the video⭐
📁
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:09 Saving in Local Storage
04:09 The Problems with the Quick Solution
05:28 The Proper Solution
07:33 Loading the Envelopes
11:16 Loading the Buildings and the Trees
14:14 Loading the Markings
21:30 Saving and Loading from File
28:56 Storing the Zoom / Drag info")
