Radu Mariescu-Istodor
Help me make a NEW Machine Learning Course
updated
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream is:
- Looking at Contributions
- Color Component / Gradients
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
⭐ Links ⭐
Test the app: radufromfinland.com/projects/forjoe
⭐ Creative Coding Videos I mentioned ⭐
Houses, Trees: youtu.be/HL3ThwW4b64
Christmas Tree: youtu.be/MSyXn3kBoN4
Car: youtu.be/NkI9ia2cLhc
☕Buy me a Coffee?☕
buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@Radu/join
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Looking at Contributions
- Minor Refactoring
- Image Editing Tool
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
Join me as we delve into the world of JavaScript animation and explore how to bring realism to online roulette wheels and other spinning visual elements.
By the end of this tutorial, you'll be equipped with the knowledge to create captivating animations that mimic the fluidity of real-world color transitions.
So, grab your coding editor and get ready for a spin!
Despite its simplicity, this task offers a wealth of learning opportunities, from understanding different iteration methods to optimizing algorithms for performance. Join me as we dissect each technique, uncover its strengths and weaknesses, and gain insights into when to use each approach.
⭐Math and Code Fundamentals⭐
youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
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
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Result of Refactoring
- Summarize how everything works!
- Maybe a new feature (Layers, Groups, ...)
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
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
The project was inspired by the polyrhythms on the @project_jdm channel:
youtube.com/@project_jdm
Check them out if you haven't seen them yet!
While building this, we'll learn about procedural sound generation techniques, demonstrate how to enhance code structure for better readability and maintainability, and showcase the power of math in simplifying complex codebases.
If you've ever doubted the usefulness of math in coding, this video is tailor-made for you! We'll debunk the myth and show you firsthand how a bit of mathematical understanding can elevate your programming skills to new heights. So, grab your coding gear and get ready to follow along with this exciting project!
const soundFrequencies = [
1760, 1567.98, 1396.91, 1318.51, 1174.66, 1046.5, 987.77, 880,
783.99, 698.46, 659.25, 587.33, 523.25, 493.88, 440, 392, 349.23,
329.63, 293.66, 261.63
];
💻CODE💻
github.com/gniziemazity/polyrhythm
⭐10 Ways to draw Circles⭐
youtu.be/W6cirmhLSSw?si=VagXmoQoEDhCJ5Xm
⭐More WebAudioAPI Tutorials⭐
youtube.com/playlist?list=PLB0Tybl0UNfbHdMGj5VfLDGqAC-ugEqfy
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Contributions
- Refactoring
- Bug Fixes
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Major Refactoring
- Bug Fixes
- Polishing
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Gizmo (Transform tool)
- Viewport
- Refactoring
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
🔍 Uncover the secrets behind one of the most famous optical illusions discovered by Oscar Reutersvärd. Follow along as we delve into HTML, CSS, and JavaScript to bring this impossible triangle to life on your browser. Plus, I'll equip you with the tools to unleash your creativity by building a shape editor – design and code your very own impossible shapes!
🔧 Keywords: Impossible triangle illusion, Oscar Reutersvärd, HTML CSS JavaScript tutorial, Shape editor web app, Web development projects.
LINKS
Self-driving Car (A virtual world): youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
2D Vectors: youtu.be/nzyOCd9FcCA
Interpolation: youtu.be/J_puRs40GhM
Get ready to challenge perceptions and create the impossible! Whether you're a coding beginner or a seasoned developer, this tutorial offers a unique blend of optical illusion insights and practical web development skills. Don't forget to like, subscribe, and hit the notification bell for more mind-bending coding projects! 🚀🎩
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Undo Improvements
- Redo
- Import / Export
- Viewport (maybe)
- Refactoring
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is I have a to-do list and I try to do as many things as I can during the stream. The plan for this stream was:
- Save / Load
- Undo / Redo
- Gizmo resize / rotate
- REMEMBER PROPERTIES PANEL !!!
-----------------------------
- Maybe Pen Tool (with bezier handles)
- Maybe Oval Tool (maybe width and height and bezier handles)
- Maybe Text Tool
I check the chat every 45 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
Drawing from my own experiences and observations, I'll delve into the nuances of AI-assisted development, exploring its potential benefits and limitations. Through a series of coding-related tasks, including code explanation, bug detection, code improvement, and code extension, we'll assess ChatGPT's performance and evaluate its suitability for various programming scenarios.
While AI can be a valuable resource for learning to code and accelerating development workflows, it's essential to approach it with caution and understanding. Throughout this tutorial, I'll share strategies for effectively interacting with ChatGPT, ensuring that you derive maximum value from its assistance while maintaining control over your codebase.
Let's embark on this journey together and learn how to chat with the chat!
⭐Coding with AI⭐
youtube.com/playlist?list=PLB0Tybl0UNfYbmuds_0h1B10impbZdgSa
Welcome to the live stream where I code an advanced drawing app with you guys!
Now, there are plenty of drawing apps out there, but... I often use a mix of tools when drawing stuff, and I would like a tool that can do everything I want (and more). I also want it to be fast, accessible and free.
The way this will go is that I have a to-do list for the day and I try to accomplish everything during the stream.
I check the chat every 30 minutes or if I'm stuck on something and looking for help.
At the end of the stream we'll plan what happens next time. I'll also share the code so you can play with it and you can also propose improvements on Discord: discord.gg/gJFcF5XVn9
💻CODE💻
github.com/gniziemazity/advanced_drawing_app
⭐LINKS⭐
My Video on Circles: youtu.be/W6cirmhLSSw
My Video on Vectors: youtu.be/nzyOCd9FcCA
Highlights:
- Drawing and animating a train along curved tracks
- Implementing the trolley problem scenario with a cat emoji as the victim
- Using keyboard controls to switch tracks and avoid game over
- Adding a scoring system and increasing difficulty with each round
- Styling and refining the game's appearance and functionality
Try out the final game on my website and share your scores with me on Twitter or Discord. Like, comment, and subscribe for more coding projects and challenges!
GAME: radufromfinland.com/projects/trolleyproblem
Highlights:
- Setting up an HTML Canvas with custom styles
- Drawing train tracks procedurally with JavaScript
- Creating and animating a train along the tracks
- Implementing smooth curves with Bezier curves
- Adding interactivity with customizable parameters
- Live coding challenges and solutions
Check out the final demo on my website and stay tuned for more projects, including a game based on the trolley problem! Like, comment, and subscribe for more coding adventures.
Old Version: youtu.be/ZNkapOL4OBw
DEMO: radufromfinland.com/projects/train_2
🖥️ Explore the fascinating intersection of psychology and web development as we recreate the Ebbinghaus illusion on your browser. Learn how to manipulate shapes and sizes dynamically using JavaScript, and see the illusion in action on an HTML Canvas.
🎨 Keywords: Ebbinghaus illusion, JavaScript coding, HTML Canvas tutorial, Animated optical illusion, Web development project.
By the end of this tutorial, you'll not only understand the coding behind the Ebbinghaus illusion but also be able to create your own interactive visual effects. Don't forget to like, subscribe, and hit the notification bell to stay tuned for more coding projects and web development tutorials! 🚀🖌️
radufromfinland.com/data/info.txt
On this channel I normally do JavaScript tutorials, but this time we’ll go with what Chat GPT wanted (Python). You can get Python from here: python.org
You'll also need the matplotlib python library. Here are instructions on how to install it: matplotlib.org
I use Visual Studio Code to write the code. If you don't have a code editor yet, I recommend downloading it here: code.visualstudio.com
To setup Visual Studio Code to work with Python you can follow the instructions from here:
code.visualstudio.com/docs/languages/python
The data in this demo is from my Machine Learning course:
youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
Check it out to learn more about working with data!
⭐More Coding with AI Tutorials⭐
youtube.com/playlist?list=PLB0Tybl0UNfYbmuds_0h1B10impbZdgSa
Details: youtu.be/w8n3D8yUZKM
Prizes: youtu.be/EhJ7qD5HwpY
Submission Portal: discord.gg/gJFcF5XVn9
🔒 Learn how to safeguard your privacy with this step-by-step guide. I'll walk you through the process, and the best part is, you can apply this trick to other applications as well. It's all about using the developer tools in your browser to create dummy data that looks real but won't compromise your personal info.
Follow along, and let's keep our online interactions safe and secure. Don't forget to like, subscribe, and hit the notification bell for more helpful tutorials on protecting your digital life! 🚀✨
⭐LINKS⭐
Quotes: dummyjson.com/quotes
Breaking Bad Quotes: https://breakingbadquotes.xyz
Welcome to the grand finale, Lesson 15 of the "Understanding AI" course! In this concluding update, we'll add some finishing touches to our racing game. We'll play around with styles to give the game a polished look, integrate cars into the minimap, explore a simple collision handling method, and finally, I'll share a neat trick on making the car visually impressive.
Get your editors fired up and join me for one last ride!
I really hope you enjoyed this course. If you found it helpful, please remember to like and share it with others so they too can embark on this learning adventure. Stay tuned for an upcoming live stream event!
💻CODE 💻
github.com/gniziemazity/understanding_ai
Follow Along: 10. Camera Input
Code After This Lesson: 11. Fine Tuning
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#RacingGame #RacingGameJavaScript #Collisions #JavaScriptCollisions #3DJavaScript #3DNoLibraries #JavaScriptMiniMap
⭐TIMESTAMPS⭐
00:00 Introduction
01:02 De-emphasizing the Other Cars
05:26 Showing all Cars on MiniMap
11:30 Background and Buildings Style
16:26 Restyling the Stats
17:36 Collision Handling
26:47 Styling the Car
49:10 Fine-Tuning
In Lesson 12 of the "Understanding AI" course, join me in implementing camera controls for our racing game using the marker detector code we built in the previous tutorial. This innovative approach will elevate your gaming experience as we delve into using marker centroids to determine tilt, allowing for dynamic control within the game.
Picture this – pulling back with the marker activates the brake, and with a prolonged hold, it seamlessly switches to reverse. I'll guide you step-by-step through this process, demonstrating how to draw an augmented reality steering wheel that visually enhances the sensation of gripping and steering.
It's time to merge the worlds of AI, game development, and marker detection for an immersive racing experience. So, buckle up and get ready to accelerate – vroom! Like, share, and subscribe for more lessons on AI, game development, and cutting-edge programming techniques!
💻CODE 💻
github.com/gniziemazity/understanding_ai
Follow Along: 8. Phone Input AND 9. Marker Detector
Code After This Lesson: 10. Camera Input
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#RacingGame #RacingGameJavaScript #CameraInput #ImageProcessing #JavaScriptWebcamGame #JavaScriptWebcamControls
⭐TIMESTAMPS⭐
00:00 Introduction
00:58 Camera Controls
14:22 Augmented Reality
24:28 Detect Closeness to Camera
Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control.
Let's explore the potential of this feature not just for games, but for other applications too. I'll share my friend's creation, "Jazzman vs. Metalheadz," which showcases the versatility of tilt controls.
The applications extend beyond gaming – think about measuring tree heights or distances to distant objects. If you're interested, I have tutorials on those topics as well. Towards the end of the video, I'll demonstrate how to integrate tilt controls into our racing game, tying it back to the "Understanding AI" course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention we'll be doing some nononooooo again? You won't want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
My Videos with Markers: youtube.com/playlist?list=PLB0Tybl0UNfb2mpLdkgVNRHC1VCMGthq_
Coding my Personal Avatar: youtu.be/U88NM8ScsPY
Summary of the Avatar Project: youtu.be/JFMTudIJLH0
#ImageProcessing #JavaScriptImageProcessing #JavaScriptMarkerDetector #JavaScriptMarkers
⭐TIMESTAMPS⭐
00:00 Introduction
01:21 Basic Project Setup
02:43 Accessing the Camera
04:45 Image Processing
08:10 Getting the ImageData
13:38 Measuring 'Blueness' of Pixels
21:43 Visualizing Pixel Properties
26:30 Thresholding
28:41 Marker Location and Size
32:49 Two Markers
Remember those early mobile games where you could steer by tilting the phone? In this video, I'll guide you through using the device orientation sensor to capture tilt movements. It's a fantastic technique that opens up a world of possibilities for game control.
Let's explore the potential of this feature not just for games, but for other applications too. I'll share my friend's creation, "Jazzman vs. Metalheadz," which showcases the versatility of tilt controls.
The applications extend beyond gaming – think about measuring tree heights or distances to distant objects. If you're interested, I have tutorials on those topics as well. Towards the end of the video, I'll demonstrate how to integrate tilt controls into our racing game, tying it back to the "Understanding AI" course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention we'll be doing some nononooooo again? You won't want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💻CODE FOR THE RACING GAME PART💻
github.com/gniziemazity/understanding_ai
Follow Along: 7. Camera Part 2
Code After This Lesson: 8. Phone Input
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
TEST on My Website: radufromfinland.com/projects/phoneRacer
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Measuring Tree Height Tutorial: youtu.be/0hxNFuo5Ncc
Measuring Distance Tutorial: youtu.be/qjuQYFdcSxw
Jazzman vs. Metalheadz: play.google.com/store/apps/details?id=com.matti.mononen.jazzman
#RacingGame #RacingGameJavaScript #OrientationSensorJavaScript #JavaScriptDeviceOrientation #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:29 Basic Project Setup
08:15 Using Device Orientation
15:47 Using Gravity
20:25 Integrating with the Racing Game
In Lesson 11 of the "Understanding AI" course, I'm thrilled to unveil the magic of 3D extrusions in JavaScript. Today, I'll guide you through the process of making elements pop up in the third dimension, a technique commonly known as extrusion. And when I say everything, I mean it – from buildings and cars to road borders.
But here's where it gets really exciting! I'll demonstrate how to move the camera behind our car, allowing us to see it in action, and share a trick often used in racing games to enhance the feeling of speed. Get ready for an eye-opening experience as I expose you to some really cool techniques that will elevate your game development skills.
Join me in this lesson where we explore 3D extrusions and dynamic camera movement in JavaScript, unlocking a new dimension in your self-driving car project. Like, share, and subscribe for more lessons on AI, game development, and cutting-edge programming concepts!
💻CODE 💻
github.com/gniziemazity/understanding_ai
Follow Along: 6. Camera Part 1
Code After This Lesson: 7. Camera Part 2
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Video about Speed: youtu.be/e9OriySqLjQ
#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson #Extrusion #Speed
⭐TIMESTAMPS⭐
00:00 Introduction
01:05 Extruding Buildings
07:49 Extruding Cars
10:07 Extruding Trees
10:56 Extruding Road Borders
15:17 View from Behind
16:59 The feeling of Speed
19:30 Removing the Other Cars
23:40 Full-Screen
In Lesson 10 of the "Understanding AI" course, I'm excited to teach you how to implement a unique perspective in your self-driving car project: one from the car's viewpoint. The fascinating part? We won't be using any libraries to achieve this effect, as the underlying math is surprisingly straightforward. I believe understanding the fundamentals is crucial, and you'll appreciate the simplicity of the method.
I stumbled upon a helpful video (youtu.be/6td_zpQC1U4) during my own learning journey, which inspired the approach I'm about to share with you. While the method I'll teach is a bit different, it caters to our self-driving car's 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. We're diving into the world of perspective views, and by the end of this lesson, you'll be able to implement this exciting feature in your own projects. Join me in exploring the mathematical magic behind 3D cameras, and don't forget to like, share, and subscribe for more lessons on AI, game development, and innovative programming techniques!
💻CODE 💻
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: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Video about 3D: 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
Welcome to Lesson 9 of the "Understanding AI" course, where I'll guide you through the exciting process of creating procedurally generated racing game sounds using JavaScript and the WebAudioAPI. In this video, I'll teach you how to generate sound from scratch, starting with a simple beeping noise that we can play at different frequencies. We'll then dive into the intricacies of creating dynamic engine noises for our racing game.
These procedurally generated sounds aren't limited to our project alone – you can use them in any of your creative endeavors. However, I'll 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 car's actions in the game.
So, get ready for some sound advice! We'll explore the world of sound generation in JavaScript, adding an auditory dimension to our gaming experience. Join me in this immersive lesson, and let's make our racing game truly come to life with unique, procedurally generated sounds. Don't forget to like, share, and subscribe for more lessons on AI, game development, and creative sound design!
💻CODE FOR THE RACING GAME PART💻
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: 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
Welcome to Lesson 8 of the "Understanding AI" course, where I'll guide you through the process of transforming a self-driving car simulation into an exhilarating racing game using JavaScript! In this tutorial, I'll show you how to take control of the main car while letting AI handle the others. We'll implement crucial features like a countdown timer, progress monitoring, and a scoreboard for a complete gaming experience.
In our racing game, I've made a deliberate choice to exclude collisions between cars, ensuring a fair and competitive environment. After all, who wants their AI-controlled car to be unexpectedly smashed by others on race day?
Now, fire up your JavaScript editors, as it's time to dive into the world of racing game development! Join me as we code the non-collision racing experience you've been eagerly waiting for. Let the race begin, and don't forget to like, share, and subscribe for more lessons on AI and game development in JavaScript!
💻CODE💻
github.com/gniziemazity/understanding_ai
Follow Along: 3. Dijkstra Part 2
Code After This Lesson: 4. Racing Game
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Trackmania Video: youtu.be/Dw3BZ6O_8LY
#RacingGame #RacingGameJavaScript #UnderstandingAI #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:36 Racing Game Interface
11:20 Measuring the Progress
25:02 Showing the Stats
41:04 Fine-tuning
45:11 Start Counter
51:20 Extending the Road at the End
🚗SELF-DRIVING CAR COURSE (PHASE 3)🚗
youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
💬DISCORD💬
discord.gg/gJFcF5XVn9
🚗PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=race_1
radufromfinland.com/projects/aiCarPlayground/?s=race_2
radufromfinland.com/projects/aiCarPlayground/?s=race_3
radufromfinland.com/projects/aiCarPlayground/?s=race_4
🏆PRIZES🏆
- Everyone who defeats me with their AI cars will get one month channel membership for free
- The top 5 will get a recommendation letter from me (on LinkedIn, for example)
- The top 3 can also make a video / blog post describing their solution and I will promote it on my channel
- The winner (best AI submission) can have a video call with me (zoom, teams, etc) where we discuss your submission; you can show code, diagrams, slides, etc. I will record the call, edit it and post it on my channel
🏆DRAFT PROGRAM🏆
If the winner will be a student, alumni, or faculty member of Karelia, Riveria or UEF, we can offer free access to the Draft Program® (if you have a business idea you will get 1000 € funding and coaching): draftprogram.com/en
End result:
radufromfinland.com/projects/dragonBall
You can check out some of my DragonBall related videos here:
youtube.com/playlist?list=PLB0Tybl0UNfZsh9KEX3ZQIkXzR1Yr0nRJ
In this seventh lesson of the "Understanding AI" course, we delve into the practical application of Dijkstra's algorithm in teaching AI cars to follow the shortest path. Just determining the shortest route is not sufficient; the car needs to navigate it effectively.
We do that by generating a corridor around the shortest path, compelling the AI car to adhere to it while following the right-hand rule. This innovative approach ensures precise navigation without the need for explicit target points. Join me on this journey of understanding AI, where theory meets practical implementation in the fascinating world of autonomous vehicle algorithms. Don't forget to like, share, and subscribe for more insightful lessons!
🚗FINAL CHALLENGE: DESIGN AND TEST YOUR RACING CAR HERE🚗
radufromfinland.com/projects/aiCarPlayground/?s=race_1
radufromfinland.com/projects/aiCarPlayground/?s=race_2
radufromfinland.com/projects/aiCarPlayground/?s=race_3
radufromfinland.com/projects/aiCarPlayground/?s=race_4
OR THESE WITH THE DECISION BOUNDARY SLOW (IT CAN BE SLOW...):
radufromfinland.com/projects/aiCarPlayground/?s=race_1_d
radufromfinland.com/projects/aiCarPlayground/?s=race_2_d
radufromfinland.com/projects/aiCarPlayground/?s=race_3_d
radufromfinland.com/projects/aiCarPlayground/?s=race_4_d
💻CODE💻
github.com/gniziemazity/understanding_ai
Follow Along: 2. Dijkstra Part 1
Code After This Lesson: 3. Dijkstra Part 2
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#DijkstrasAlgorithm #UnderstandingAI #Pathfinding #JavaScriptCoding #AIPlayground #InteractiveLearning #LocationBasedApplications
⭐TIMESTAMPS⭐
00:00 Introduction
01:09 Generating the Corridor
06:05 Temporary Graph Manipulation
19:35 The Final Challenge
Dive into the world of pathfinding with JavaScript! In this video, we demystify the significance of Dijkstra's algorithm and its role in making intelligent agents, like our self-driving car, more adept at finding their way to any location.
Whether you've been following the self-driving car codebase or not, fear not – we're implementing almost everything from scratch, making it accessible to everyone. The codebase aids in testing and paves the way for future lessons on teaching cars to follow the path.
Join me in this informative session where I aim to help you grasp Dijkstra's algorithm in the quickest way possible – pun intended! We'll explore its core concepts and functionalities, laying the foundation for potential efficiency enhancements and advanced applications, such as computing the fastest path or incorporating real-time traffic information.
Share your learning experience in the comments – did coding Dijkstra's algorithm make it clearer for you? Need a better explainer? Your feedback matters, and I'm here to help you navigate the intricacies of this essential algorithm. Stay tuned for more insights and advanced lessons from my expertise in location-based applications. 🚗🗺️
💻CODE💻
github.com/gniziemazity/understanding_ai
Follow Along: 1. Starting Codebase
Code After This Lesson: 2. Dijkstra Part 1
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#DijkstrasAlgorithm #UnderstandingAI #Pathfinding #JavaScriptCoding #AIPlayground #InteractiveLearning #LocationBasedApplications
⭐TIMESTAMPS⭐
00:00 Introduction
01:26 Graph Review
03:24 Starting to code Dijkstra's Algorithm
09:08 Expanding
16:36 Backtracking
24:03 One-way Roads
27:00 Want More Dijkstra?
Step into Lesson 5 of the "Understanding AI" course, where we take our AI car on a new journey! In this session, we introduce a compass sensor to experiment with navigation.
While the compass approach may not be the ultimate solution, we delve into its implementation to showcase its limitations in practical scenarios. Join me as we uncover the shortcomings and understand why the upcoming study of path-finding algorithms is crucial for enhancing our AI car's capabilities.
In this lesson I'll also guide you through updating the self-driving car codebase to seamlessly integrate the cars we create in the playground, setting the stage for the upcoming path-finding adventures. It's time to get back into the code saddle – pun intended!
💻CODE💻
1. Follow Along (11. MiniMap): github.com/gniziemazity/virtual-world
2. Code After This Lesson (1. Starting Codebase): github.com/gniziemazity/understanding_ai
Join me in this enlightening lesson as we advance our understanding of AI, experiment with practical applications, and gear up for the coding challenges ahead. Whether you're a coding enthusiast or new to the world of AI, this lesson promises valuable insights and hands-on learning. 🚗🧭
🚗THE PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=tgt_0
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
#CompassSensors #UnderstandingAI #AIPlayground #PathFindingAlgorithms #InteractiveLearning #CodingSkills #CarNavigationExperiment #ArtificialIntelligenceExperimentation
⭐TIMESTAMPS⭐
00:00 Introduction
01:15 Compass Sensor
03:21 Basic Driving Logic
06:45 Simple Turn Logic
08:39 Using the Compass Sensor
10:55 Problem with This Approach
13:25 Adapting the Codebase
Welcome to Lesson 4 of the "Understanding AI" course, where we take our car navigation to new heights! In this session, we upgrade our neural network to 5D, introducing five inputs and propelling our understanding into higher-dimensional spaces.
The car is smoothly navigating the road and maze, but what happens when we add road markings and more sensors? Join me as we explore the intricacies of integrating five inputs into our neural network, delving into the fascinating world of higher-dimensional navigation.
Prepare to witness the AI car's transformation as it becomes aware of its surroundings, responding intelligently to road markings. The journey into higher dimensions is filled with excitement, and I'll guide you every step of the way. Whether you're a beginner or have some AI experience, this lesson is designed to elevate your understanding and empower you to navigate the complexities of artificial intelligence with confidence. 🚗🌐
🚗THE PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=mrk
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Machine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
#5DNeuralNetworks #UnderstandingAI #NeuralNetworkInputs #AIPlayground #CarNavigationAI #HigherDimensionalLogic #InteractiveLearning #ArtificialIntelligenceUpgrade
⭐TIMESTAMPS⭐
00:00 Introduction
00:58 New Sensors
05:21 Steering Logic
13:50 Stop Logic
19:10 More about Stopping
21:30 Traffic Light Logic
25:51 Homework 7
27:22 Real-world Problem
Embark on a new frontier of AI with Lesson 3 of the "Understanding AI" course! In this lesson, I'll guide you through the process of expanding our neural network's capabilities by introducing multiple outputs. We'll transition from a single output to managing two, and eventually, four outputs, enabling the network to command the car to move in various directions.
Fear not if you're not familiar with advanced terminology – I'll simplify the concepts for you. What we're implementing here is known as a multilabel neural network, distinct from the multiclass neural network covered in my previous machine learning course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
Unlike a multiclass network, our new creation can simultaneously instruct the car to go forward and left, opening up exciting possibilities.
Join me in this engaging session as we break down the barriers of neural network outputs, explore practical applications in car navigation, and delve into the nuances of multilabel networks. Whether you're a beginner or have some AI experience, this lesson is designed to broaden your understanding and empower you to navigate the complexities of artificial intelligence. 🚗🧠
🚗THE PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=rev_3
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Machine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
Vanilla JavaScript Chart Tutorial: youtu.be/n8uCt1TSGKE
Top-view Cars Clip: youtu.be/jZrjE_ixu18
#MultilabelNeuralNetworks #UnderstandingAI #NeuralNetworkOutputs #AIPlayground #MachineLearningBasics #CarControlAI
⭐TIMESTAMPS⭐
00:00 Introduction
01:17 Going Backwards
04:15 Homework 5
04:51 Understanding 3 Inputs
21:00 Right-hand Rule Fails
21:37 Fine-tuning the Logic
26:36 Homework 6
32:15 Different Network Structure
41:27 Deep Neural Networks
Dive deeper into the world of Neural Networks with Lesson 2 of the "Understanding AI" course! In this session, we explore how a simple genetic algorithm helps optimize network parameters. We'll also see the power of hidden layers and their role in shaping the behavior of neural networks. Join me as we move beyond single-input neurons and venture into the realm of multi-layer perceptrons!
Discover the significance of hidden neurons and nodes, understanding why they're termed "hidden". Gain insights into the terminology and we'll also debunk common misconceptions about activation functions.
Join me on this learning journey! 🚀🧠
🚗THE PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=fwd_g
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Phase 1: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Phase 2: youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
Desmos 3D: desmos.com/3d
Another Playground: playground.tensorflow.org
#HiddenLayers #NeuralNetworks #AIPlayground #MachineLearning #Perceptron #ActivationFunctions #ScikitLearn #AIProgression
⭐TIMESTAMPS⭐
00:00 Introduction
00:45 Genetic Algorithm
07:03 What the Network Really Learns
11:40 Two Inputs
31:08 Hidden Layers
38:37 Boolean Operations
41:22 Homework 3
41:32 Misconceptions
42:32 Homework 4
Embark on an exciting journey into the world of Artificial Intelligence with my new course, "Understanding AI". In this first lesson, we dive into the fundamentals of Neural Networks, breaking away from the conventional Machine Learning context. Try out this unique hands-on experience where you'll manually tweak network parameters to teach a car how to drive within a specially crafted playground.
Whether you're new to AI or seeking a deeper understanding, this course caters to all levels. I have over a decade of machine learning expertise, and will emphasize the importance of revisiting basics in an era of easy-to-use complex models. Homework assignments and a final challenge to race AI cars await you, with live stream events and prizes on the horizon.
The course covers essential topics such as Dijkstra's shortest path algorithm, game mechanics, camera sensor creation, and implementing analog steering through mobile apps and image processing with augmented reality. All implemented in plain JavaScript without external libraries, giving you a comprehensive understanding of the system's inner workings.
AI is more than just Neural Networks – it's a combination of various elements. This course demystifies the distinction between Artificial Intelligence and Machine Learning. While there's no Machine Learning in this course, I do plan to teach that someday as well. If you want to help collect data, go here and race:
🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙🚙
radufromfinland.com/projects/aiRacer
🚗THE PLAYGROUND🚗
radufromfinland.com/projects/aiCarPlayground/?s=default
⭐LINKS⭐
Phase 1: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Phase 2: youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
Prerequisites: youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
Machine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
3b1b's Neural Network Video: youtu.be/aircAruvnKk?si=JB6fvUT3Ko1mkU3x
Another Playground: playground.tensorflow.org
💬DISCORD💬
discord.gg/gJFcF5XVn9
💻CODE💻
1. Phase 1 github.com/gniziemazity/self-driving-car
2. Phase 2 github.com/gniziemazity/virtual-world
☕Buy me a Coffee?☕
buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@radu/join
Excited to get started? Put your neurons into overdrive and join me on this fascinating AI adventure! 🚗💻
#UnderstandingAI #AIPlayground #NeuralNetworks #SelfDrivingCar #AICourse #javascript
⭐TIMESTAMPS⭐
00:00 Introduction
06:34 The Playground
14:40 One Neuron
21:48 Decision Boundary Plot
25:05 Homework 1
29:05 Homework 2
29:13 Clarrifications
Where I learned about the logo: designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird
Things I mention in the video
My Videos on Circles: youtube.com/playlist?list=PLB0Tybl0UNfYzb8GvgQBDYHBTM9hiH9bG
Pythagorean Theorem: youtu.be/iqSlzYXdFzw
2D Vectors Tutorial: youtu.be/nzyOCd9FcCA
Draw the Portal Game: youtu.be/0SxiyLk2IMM
My Kamehameha: youtube.com/playlist?list=PLB0Tybl0UNfaqkqYWoGivTozv16qsF35J
Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Machine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
The videos where I coded the 3 visualizers are here: youtube.com/playlist?list=PLB0Tybl0UNfbMgV6SNJxPrPC5wuAzh-Jk
Coding after swimming in ice: youtu.be/oJYcRXaVg-M
Coding a game with ChatGPT: youtu.be/FlDwEUQRJOw
Codes are on my website:
radufromfinland.com
The mini-map really helps when the world we create is very big. Let's learn to code one using JavaScript and HTML Canvas. 🗺️
Have Fun! :-)
⭐PLAYLIST⭐
youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
radufromfinland.com/projects/virtualworld
💻CODE💻
github.com/gniziemazity/virtual-world
10. OpenStreetMap = follow along
11. MiniMap = code after this lesson
⭐ALL PREREQUISITES⭐
youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
☕Buy me a Coffee?☕
buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
00:42 Including the Large World File
02:49 Preparing for the MiniMap
05:48 MiniMap Implementation
07:58 Scaling the MiniMap
11:00 Marking the MiniMap center
11:49 Outro
⭐NO CLICKS!⭐
Let's learn about OpenStreetMap: how to query data from it using overpass turbo and how to parse it in our code. You’ll also learn about real-world coordinates, how they work and the geometry of our 3D world. 🌎
Have Fun! :-)
⭐PLAYLIST⭐
youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
radufromfinland.com/projects/virtualworld
💻CODE💻
github.com/gniziemazity/virtual-world
9. Integration = follow along
10. OpenStreetMap = code after this lesson
⭐LINKS⭐
openstreetmap.org
https://overpass-turbo.eu [ Note that overpass has also an API ;-) ]
⭐ALL PREREQUISITES⭐
youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emoji I used in the video⭐
🗺️✔️❌
☕Buy me a Coffee?☕
buymeacoffee.com/radum
⚡️Join this Channel⚡️
youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:01 Preparing to use OSM Data
05:55 OpenStreetMap and Overpass Turbo
12:53 Parsing OSM Data
16:19 Latitude and Longitude
24:29 Understanding Coordinates
25:34 Proper Scaling
34:46 One-way Road Segments
38:14 Optimization
42:50 Saving the World Failed (Partially)