Radu Mariescu-IstodorAnother homage to Dragonball. In this one I compare coders with Super Saiyans and... well, just watch it! You're going to love this! Trust me :-)
I'll show you the 7 levels coders can reach. These seven levels of code are just those that I know of. I wouldn't be surprised if more levels exist beyond that. Comment and let me know if I'm missing some :-)
7 Levels of Code (If Programmers could go Super Saiyan)Radu Mariescu-Istodor2021-06-18 | Another homage to Dragonball. In this one I compare coders with Super Saiyans and... well, just watch it! You're going to love this! Trust me :-)
I'll show you the 7 levels coders can reach. These seven levels of code are just those that I know of. I wouldn't be surprised if more levels exist beyond that. Comment and let me know if I'm missing some :-)
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_appJavaScript Infinite Zoom EffectRadu Mariescu-Istodor2024-10-04 | In this video, I’ll teach you how to code a basic web app using JavaScript and HTML Canvas to create an infinite zoom animation effect. Inspired by @joescott and his infinite zoom video (youtu.be/1kjvgWBHzec), I built an app that automates the tedious process of resizing images and filling in the gaps with Photoshop AI, while also fixing stutter issues. In this video, I'll show you how to use procedurally generate some images and do the infinite zoom. Later, in Part 2 I'll show you how you can use any images you want (like those generated by Photoshop's AI).
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_appRealistic Spinning Wheels with JavaScript (SEISURE WARNING!)Radu Mariescu-Istodor2024-09-20 | Ever noticed how online spinning wheels (like roulette wheels) sometimes lack that realistic touch? They just don't seem to capture the natural blending of colors that occurs when you spin a real-life color wheel. But fear not! In this video, I'll share with you a simple yet effective technique to code a more lifelike color blending effect for your spinning wheels. 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!10 Ways to Sum Array Elements in JavaScriptRadu Mariescu-Istodor2024-09-11 | Welcome to an enlightening journey through JavaScript array addition techniques! In programming, there's often more than one way to achieve a task, and selecting the most suitable method can greatly enhance code clarity and efficiency. Today, we're delving into the realm of array summation and exploring 10 distinct methods to add up the values of an array in JavaScript. 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=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0HProcedural Drawing and Animation with JavaScript | Coding on a Flight!Radu Mariescu-Istodor2024-09-06 | 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!
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_appAnimating a Plane on a Path with JavaScript | Live Coding on a Plane!Radu Mariescu-Istodor2024-08-23 | 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_1Polyrhythms in JavaScript | How Math Can Make Your Code Better (#SoMEπ )Radu Mariescu-Istodor2024-08-16 | In this video I teach you about good coding practices when building a fun project. It emphasizes how understanding math concepts can result in simpler, easier to understand code that also correlates with fewer bugs.
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!
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
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
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_appJavaScript Impossible Triangle Project TutorialRadu Mariescu-Istodor2024-08-02 | Hey coding enthusiasts! Ever wanted to dive into the mind-bending world of optical illusions? In this tutorial, I'll guide you through the mesmerizing art of coding Oscar Reutersvärd's impossible triangle illusion. But that's not all – I'll also show you how to create a simple shape editor using HTML, CSS, and JavaScript, allowing you to design your own mind-boggling shapes!
🔍 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.
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! 🚀🎩Advanced Drawing App | LIVE JavaScript Coding | Part 3: Multi-selection, Undo, Redo and ImagesRadu Mariescu-Istodor2024-07-27 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZl
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
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_appHow To Code With ChatGPT?Radu Mariescu-Istodor2024-07-19 | Welcome to an eye-opening exploration of AI-assisted coding with ChatGPT! As technology continues to advance, AI tools like ChatGPT are becoming increasingly prevalent in the programming landscape. But how effective are they really? In this video, I'll provide you with firsthand insights into the capabilities of ChatGPT for coding tasks, dispelling common misconceptions and offering practical guidance on how to leverage this powerful tool effectively.
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!
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
⭐LINKS⭐ My Video on Circles: youtu.be/W6cirmhLSSw My Video on Vectors: youtu.be/nzyOCd9FcCACoding The Trolley Problem in JavaScriptRadu Mariescu-Istodor2024-07-05 | Join me on another coding adventure as I turn my train simulation into a fun and ethical dilemma game about the trolley problem! 🚂🐱 In this video, I demonstrate how to create a game where you must divert a train to save a cat, using JavaScript and HTML Canvas. Perfect for beginners and experienced coders alike, this tutorial walks you through:
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/trolleyproblemRecreating a Train Simulation with JavaScript | Coding on the Train!Radu Mariescu-Istodor2024-06-28 | Join me on a train ride as I recreate my first train simulation using JavaScript! 🚂 In this video, I'll show you how to draw train tracks and animate a train using dashed lines and Bezier curves, all on an HTML Canvas. Whether you're a beginner or an experienced coder, this tutorial has something for everyone. Here's what you'll learn:
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_2JavaScript Beginner Project Tutorial: The Ebbinghaus IllusionRadu Mariescu-Istodor2024-06-21 | Hey coders! Today, I've got an exciting tutorial for you where we dive into the mesmerizing world of visual illusions. In this video, I'll guide you step by step through coding the Ebbinghaus illusion using JavaScript and HTML Canvas. Plus, we'll take it a step further and add some animation to bring this optical illusion to life!
🖥️ 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! 🚀🖌️Understanding Data with AI (ChatGPT 3.5 and Python)Radu Mariescu-Istodor2024-06-14 | Any data should come with some kind of documentation, but very often it doesn’t. In this video I’ll show you how to use large language models to help you understand what some structured data is. We’ll use Chat GPT and try to understand and visualize the data from here: 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
Details: youtu.be/w8n3D8yUZKM Prizes: youtu.be/EhJ7qD5HwpY Submission Portal: discord.gg/gJFcF5XVn9How to Fake data in AppsRadu Mariescu-Istodor2024-05-24 | Hey, everyone! In this tutorial, I'll show you a simple trick using browser developer tools to generate fake data in Gmail. It's a handy technique to capture screenshots without exposing any personal information. Whether you want to share your screen for tutorials, presentations, or just to keep your sensitive details private, this method works like a charm!
🔒 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! 🚀✨
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!
⭐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-TuningCamera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15]Radu Mariescu-Istodor2024-05-10 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
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!
⭐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 MarkersTilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]Radu Mariescu-Istodor2024-04-26 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
⭐TIMESTAMPS⭐ 00:00 Introduction 01:29 Basic Project Setup 08:15 Using Device Orientation 15:47 Using Gravity 20:25 Integrating with the Racing Game3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]Radu Mariescu-Istodor2024-04-19 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
⭐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-Screen3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15]Radu Mariescu-Istodor2024-04-12 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
⭐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 ProblemsProcedural Sounds for Games with JavaScript and WebAudioAPI [Understanding AI - Lesson 9 / 15]Radu Mariescu-Istodor2024-04-05 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
⭐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 GameAI Racing Game in JavaScript [Understanding AI - Lesson 8 / 15]Radu Mariescu-Istodor2024-03-29 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
⭐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⭐🏆⭐PRIZES: Racing AI Competition⭐🏆⭐ DEADLINE: May 15ᵗʰ 2024Radu Mariescu-Istodor2024-03-22 | When designing your AI car, you can use the playground as instructed previously, but you are not limited to it as long as you produce a compatible “.car” file. This extra freedom comes with a warning: changing car specifications like the max speed, acceleration, friction is not allowed and you will be disqualified if you attempt to do so. You are only allowed to modify the sensors configuration and the neural network. Feel free to ask anything on Discord, you can also submit early and I can say if something is allowed or not.
🏆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/enAR Dragon Ball - Vanilla JavaScript - 3h Live Stream (in memory of Akira Toriyama)Radu Mariescu-Istodor2024-03-21 | I try to code an effect where a blue ball turns into a Dragon Ball in real-time, in front of a camera.
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!
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. 🚗🗺️
⭐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?Understanding AI - Lesson 5 / 15: Navigating to TargetRadu Mariescu-Istodor2024-03-01 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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!
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. 🚗🧭
⭐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 CodebaseUnderstanding AI - Lesson 4 / 15: Where Extra Dimensions Come From?Radu Mariescu-Istodor2024-02-23 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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. 🚗🌐
⭐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 ProblemUnderstanding AI - Lesson 3 / 15: Multilabel Neural NetworksRadu Mariescu-Istodor2024-02-16 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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. 🚗🧠
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.
⭐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 4Understanding AI - Lesson 1 / 15: A Simple Neural NetworkRadu Mariescu-Istodor2024-02-02 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
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
⭐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 ClarrificationsDrawing the YinYang with JavaScriptRadu Mariescu-Istodor2024-01-26 | Let's practice our coding skills by coding the YinYang symbol. While doing so, I'll explain the importance of viewing things bottom up and top down, as well.Drawing the Twitter Logo with JavaScriptRadu Mariescu-Istodor2024-01-19 | Remember when the Twitter logo was nice? Yeah, me too... Let's draw it on an HTML Canvas using JavaScript. It's actually quite complicated to do, so, I'm gonna teach you how to implement a simple drawing app designed for that purpose!
Where I learned about the logo: designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-birdCoding a Spinning Canvas App with JavaScriptRadu Mariescu-Istodor2024-01-12 | I'll teach you how to make a spinning canvas app that lets us draw kind of like how pottery is made. We'll use just vanilla JavaScript and HTML Canvas to make the app, but if you're having trouble with the math, check out my other explainer here: youtu.be/nzyOCd9FcCADrawing CIRCLES in 10 Different Ways with JavaScriptRadu Mariescu-Istodor2024-01-05 | Let's test the limits of the HTML Canvas and use JavaScript to draw circles in 10 different ways! And, fun story, @Goukiesm pointed out a way that is faster than the usual way of doing it. Watch the whole video to find out :-)
Codes are on my website: radufromfinland.com🚙Self-driving car🚙 Live❓Q&A❓Radu Mariescu-Istodor2023-12-20 | I answer questions from the Self-driving car course and show all hidden features of the Demo app.A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]Radu Mariescu-Istodor2023-12-15 | Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. This is the final video of Phase 2. In it, you'll learn to load the large world from the last lesson and implement a mini-map.
The mini-map really helps when the world we create is very big. Let's learn to code one using JavaScript and HTML Canvas. 🗺️
⭐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🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor]Radu Mariescu-Istodor2023-12-07 | I'll be coding a simple candle simulation where the flame always points up (even if you rotate the device).A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]Radu Mariescu-Istodor2023-12-01 | Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. The world editor we built is nice. Feels really fast to use, definitely minimizing the number of clicks. But you know what’s better than a few clicks?
⭐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. 🌎
⭐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)