Build a Chart using JavaScript (No Libraries) Radu Mariescu-Istodor 2023-02-17 | In this tutorial I teach you how to implement a chart using JavaScript and HTML Canvas. Our javascript chart app will allow to drag and zoom the data with the mouse and style the points using transparency, colors, emojis and I’ll even teach you some image processing techniques to recolor the emojis. This custom chart supports hovering over and selecting items as well.We implement the chart using vanilla JavaScript (without using libraries). But we will use some math, especially interpolation quite a lot. If you understand what I do, great! Otherwise, maybe watch my math-related videos first:Interpolation:youtu.be/J_puRs40GhMLinear Algebra:youtu.be/nzyOCd9FcCATrigonometry:youtu.be/xK3vKWMFVgwA good chart component is a useful tool and customizing it can be very important depending on the task at hand. We use this chart in the Machine Learning Course where we plot our feature values but later we'll customize it to do other things as well:youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4Today's video also teaches how to generate fake data.💻 Codegithub.com/gniziemazity/javascript_chart⭐️TIMESTAMPS⭐️00:00 Intro00:01:36 Generating Fake Data00:19:35 Creating the Chart class00:25:28 Extracting data and pixel bounds00:29:50 Drawing the data00:37:20 Drawing the axes00:52:59 Mouse interaction01:06:32 Zooming the data01:16:56 Styling the points01:27:51 Recoloring the emojis01:38:30 Emphasizing points on hover01:45:30 Selecting points on click01:48:05 Connecting the chart with the list01:54:25 Fine tuning01:56:32 Debugging and fixing issues02:04:32 Outro and Homework
Advanced Drawing App | LIVE JavaScript Coding | Part 9 Radu Mariescu-Istodor 2024-10-07 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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 / GradientsI 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
JavaScript Infinite Zoom Effect Radu Mariescu-Istodor 2024-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).⭐ Links ⭐Test the app: radufromfinland.com/projects/forjoe⭐ Creative Coding Videos I mentioned ⭐Houses, Trees: youtu.be/HL3ThwW4b64Christmas Tree: youtu.be/MSyXn3kBoN4Car: youtu.be/NkI9ia2cLhc☕Buy me a Coffee?☕buymeacoffee.com/radum⚡️Join this Channel⚡️youtube.com/@Radu/join
Advanced Drawing App | LIVE JavaScript Coding | Part 8: Text Tool, Background Removal Radu Mariescu-Istodor 2024-09-25 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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 ToolI 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
Realistic Spinning Wheels with JavaScript (SEISURE WARNING!) Radu Mariescu-Istodor 2024-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 JavaScript Radu Mariescu-Istodor 2024-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=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
Procedural Drawing and Animation with JavaScript | Coding on a Flight! Radu Mariescu-Istodor 2024-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 solutionsCheck 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
Advanced Drawing App | LIVE JavaScript Coding | Part 7: Refactoring, Summary, Layers Radu Mariescu-Istodor 2024-08-29 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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
Animating a Plane on a Path with JavaScript | Live Coding on a Plane! Radu Mariescu-Istodor 2024-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 solutionsDon’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
Polyrhythms in JavaScript | How Math Can Make Your Code Better (#SoMEπ ) Radu Mariescu-Istodor 2024-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_jdmCheck 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
Advanced Drawing App | LIVE JavaScript Coding | Part 6: New UI, Shape Rotation, Refactoring Radu Mariescu-Istodor 2024-08-10 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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 FixesI 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
Advanced Drawing App | LIVE JavaScript Coding | Part 5: Refactoring Tools, Main and Viewport Radu Mariescu-Istodor 2024-08-08 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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- PolishingI 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
Advanced Drawing App | LIVE JavaScript Coding | Part 4: Pan, Zoom, Bounding Box and Gizmo Resize Radu Mariescu-Istodor 2024-08-06 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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- RefactoringI 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
JavaScript Impossible Triangle Project Tutorial Radu Mariescu-Istodor 2024-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.LINKSSelf-driving Car (A virtual world): youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO2D Vectors: youtu.be/nzyOCd9FcCAInterpolation: youtu.be/J_puRs40GhMGet 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 Images Radu Mariescu-Istodor 2024-07-27 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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)- RefactoringI 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
Advanced Drawing App | LIVE JavaScript Coding | Part 2: Shortcuts, Properties Panel, Save and Load Radu Mariescu-Istodor 2024-07-25 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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 ToolI 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
How To Code With ChatGPT? Radu Mariescu-Istodor 2024-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!⭐Coding with AI⭐youtube.com/playlist?list=PLB0Tybl0UNfYbmuds_0h1B10impbZdgSa
Advanced Drawing App | LIVE JavaScript Coding | Part 1: Paths, Rectangles, Fills and Strokes Radu Mariescu-Istodor 2024-07-12 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfaxaLvusZR7KoB1mU-ewTZlWelcome 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/W6cirmhLSSwMy Video on Vectors: youtu.be/nzyOCd9FcCA
Coding The Trolley Problem in JavaScript Radu Mariescu-Istodor 2024-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 functionalityTry 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
Recreating a Train Simulation with JavaScript | Coding on the Train! Radu Mariescu-Istodor 2024-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 solutionsCheck 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/ZNkapOL4OBwDEMO: radufromfinland.com/projects/train_2
JavaScript Beginner Project Tutorial: The Ebbinghaus Illusion Radu Mariescu-Istodor 2024-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-Istodor 2024-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.txtOn 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.orgYou'll also need the matplotlib python library. Here are instructions on how to install it: matplotlib.orgI use Visual Studio Code to write the code. If you don't have a code editor yet, I recommend downloading it here: code.visualstudio.comTo setup Visual Studio Code to work with Python you can follow the instructions from here:code.visualstudio.com/docs/languages/pythonThe data in this demo is from my Machine Learning course:youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4Check it out to learn more about working with data!⭐More Coding with AI Tutorials⭐youtube.com/playlist?list=PLB0Tybl0UNfYbmuds_0h1B10impbZdgSa
Self-driving car - Q&A - And a Magic Trick Radu Mariescu-Istodor 2024-06-06 | Feel free to ask any questions about the course!
Self-driving car - Competition *LIVE* Radu Mariescu-Istodor 2024-05-31 | I race against your AI Cars!Details: youtu.be/w8n3D8yUZKMPrizes: youtu.be/EhJ7qD5HwpYSubmission Portal: discord.gg/gJFcF5XVn9
How to Fake data in Apps Radu Mariescu-Istodor 2024-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! 🚀✨⭐LINKS⭐Quotes: dummyjson.com/quotesBreaking Bad Quotes: https://breakingbadquotes.xyz
Fine-Tuning the Racing Game with Self-driving Cars [Understanding AI - Lesson 15 / 15] Radu Mariescu-Istodor 2024-05-17 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Welcome 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_aiFollow Along: 10. Camera InputCode 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 Introduction01:02 De-emphasizing the Other Cars05:26 Showing all Cars on MiniMap11:30 Background and Buildings Style 16:26 Restyling the Stats17:36 Collision Handling26:47 Styling the Car49:10 Fine-Tuning
Camera Input for Racing Game in JavaScript [Understanding AI - Lesson 14 / 15] Radu Mariescu-Istodor 2024-05-10 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81In 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_aiFollow Along: 8. Phone Input AND 9. Marker DetectorCode 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 Introduction00:58 Camera Controls14:22 Augmented Reality24:28 Detect Closeness to Camera
Detecting Colored Markers with JavaScript [Understanding AI - Lesson 13 / 15] Radu Mariescu-Istodor 2024-05-03 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Remember 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=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYMy Videos with Markers: youtube.com/playlist?list=PLB0Tybl0UNfb2mpLdkgVNRHC1VCMGthq_Coding my Personal Avatar: youtu.be/U88NM8ScsPYSummary of the Avatar Project: youtu.be/JFMTudIJLH0#ImageProcessing #JavaScriptImageProcessing #JavaScriptMarkerDetector #JavaScriptMarkers⭐TIMESTAMPS⭐00:00 Introduction01:21 Basic Project Setup02:43 Accessing the Camera04:45 Image Processing08:10 Getting the ImageData13:38 Measuring 'Blueness' of Pixels21:43 Visualizing Pixel Properties26:30 Thresholding28:41 Marker Location and Size32:49 Two Markers
Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15] Radu Mariescu-Istodor 2024-04-26 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Remember 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_aiFollow Along: 7. Camera Part 2Code After This Lesson: 8. Phone Input💬DISCORD💬discord.gg/gJFcF5XVn9⭐LINKS⭐TEST on My Website: radufromfinland.com/projects/phoneRacerSelf-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYMeasuring Tree Height Tutorial: youtu.be/0hxNFuo5NccMeasuring Distance Tutorial: youtu.be/qjuQYFdcSxwJazzman vs. Metalheadz: play.google.com/store/apps/details?id=com.matti.mononen.jazzman#RacingGame #RacingGameJavaScript #OrientationSensorJavaScript #JavaScriptDeviceOrientation #LearnJavaScript⭐TIMESTAMPS⭐00:00 Introduction01:29 Basic Project Setup08:15 Using Device Orientation15:47 Using Gravity20:25 Integrating with the Racing Game
3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15] Radu Mariescu-Istodor 2024-04-19 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81In 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_aiFollow Along: 6. Camera Part 1Code After This Lesson: 7. Camera Part 2💬DISCORD💬discord.gg/gJFcF5XVn9⭐LINKS⭐Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYVideo about Speed: youtu.be/e9OriySqLjQ#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson #Extrusion #Speed⭐TIMESTAMPS⭐00:00 Introduction01:05 Extruding Buildings07:49 Extruding Cars10:07 Extruding Trees10:56 Extruding Road Borders15:17 View from Behind16:59 The feeling of Speed19:30 Removing the Other Cars23:40 Full-Screen
3D Camera in JavaScript - No Libraries [Understanding AI - Lesson 10 / 15] Radu Mariescu-Istodor 2024-04-12 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81In 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_aiFollow Along: 5. Procedural SoundCode After This Lesson: 6. Camera Part 1💬DISCORD💬discord.gg/gJFcF5XVn9⭐LINKS⭐Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYVideo about 3D: youtu.be/6td_zpQC1U4#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson⭐TIMESTAMPS⭐00:00 Introduction01:01 Quick Debugging02:42 Camera Object09:58 Rendering what the Camera sees14:05 Explaining the Projection19:30 Debugging / Fixing Problems
Procedural Sounds for Games with JavaScript and WebAudioAPI [Understanding AI - Lesson 9 / 15] Radu Mariescu-Istodor 2024-04-05 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Welcome 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_aiFollow Along: 4. Racing GameCode 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 Introduction01:12 Basic Project Setup01:57 Using the WebAudioAPI04:38 Visualizing Sounds08:40 Debugging11:30 Envelopes16:56 Engine Noise22:41 Finalizing the Sound functions23:44 Adding the Sound to the Racing Game
AI Racing Game in JavaScript [Understanding AI - Lesson 8 / 15] Radu Mariescu-Istodor 2024-03-29 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Welcome 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_aiFollow Along: 3. Dijkstra Part 2Code After This Lesson: 4. Racing Game💬DISCORD💬discord.gg/gJFcF5XVn9⭐LINKS⭐Self-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYTrackmania Video: youtu.be/Dw3BZ6O_8LY#RacingGame #RacingGameJavaScript #UnderstandingAI #LearnJavaScript⭐TIMESTAMPS⭐00:00 Introduction01:36 Racing Game Interface11:20 Measuring the Progress25:02 Showing the Stats41:04 Fine-tuning45:11 Start Counter51:20 Extending the Road at the End
⭐🏆⭐PRIZES: Racing AI Competition⭐🏆⭐ DEADLINE: May 15ᵗʰ 2024 Radu Mariescu-Istodor 2024-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.🚗SELF-DRIVING CAR COURSE (PHASE 3)🚗youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81💬DISCORD💬discord.gg/gJFcF5XVn9🚗PLAYGROUND🚗radufromfinland.com/projects/aiCarPlayground/?s=race_1radufromfinland.com/projects/aiCarPlayground/?s=race_2radufromfinland.com/projects/aiCarPlayground/?s=race_3radufromfinland.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
AR Dragon Ball - Vanilla JavaScript - 3h Live Stream (in memory of Akira Toriyama) Radu Mariescu-Istodor 2024-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.End result:radufromfinland.com/projects/dragonBallYou can check out some of my DragonBall related videos here:youtube.com/playlist?list=PLB0Tybl0UNfZsh9KEX3ZQIkXzR1Yr0nRJ
Using Dijkstras Shortest Path With AI [Understanding AI - Lesson 7 / 15] Radu Mariescu-Istodor 2024-03-15 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81In 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_1radufromfinland.com/projects/aiCarPlayground/?s=race_2radufromfinland.com/projects/aiCarPlayground/?s=race_3radufromfinland.com/projects/aiCarPlayground/?s=race_4OR THESE WITH THE DECISION BOUNDARY SLOW (IT CAN BE SLOW...):radufromfinland.com/projects/aiCarPlayground/?s=race_1_dradufromfinland.com/projects/aiCarPlayground/?s=race_2_dradufromfinland.com/projects/aiCarPlayground/?s=race_3_dradufromfinland.com/projects/aiCarPlayground/?s=race_4_d💻CODE💻github.com/gniziemazity/understanding_aiFollow Along: 2. Dijkstra Part 1Code 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 Introduction01:09 Generating the Corridor06:05 Temporary Graph Manipulation19:35 The Final Challenge
Dijkstras Algorithm in JavaScript [Understanding AI - Lesson 6 / 15] Radu Mariescu-Istodor 2024-03-08 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Dive 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_aiFollow Along: 1. Starting CodebaseCode 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 Introduction01:26 Graph Review03:24 Starting to code Dijkstra's Algorithm09:08 Expanding16:36 Backtracking24:03 One-way Roads27:00 Want More Dijkstra?
Understanding AI - Lesson 5 / 15: Navigating to Target Radu Mariescu-Istodor 2024-03-01 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Step 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-world2. Code After This Lesson (1. Starting Codebase): github.com/gniziemazity/understanding_aiJoin 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 Introduction01:15 Compass Sensor03:21 Basic Driving Logic06:45 Simple Turn Logic08:39 Using the Compass Sensor10:55 Problem with This Approach13:25 Adapting the Codebase
Understanding AI - Lesson 4 / 15: Where Extra Dimensions Come From? Radu Mariescu-Istodor 2024-02-23 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Welcome 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 Introduction00:58 New Sensors05:21 Steering Logic13:50 Stop Logic19:10 More about Stopping21:30 Traffic Light Logic25:51 Homework 727:22 Real-world Problem
Understanding AI - Lesson 3 / 15: Multilabel Neural Networks Radu Mariescu-Istodor 2024-02-16 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Embark 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_4VnFrqRC4Unlike 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_4VnFrqRC4Vanilla JavaScript Chart Tutorial: youtu.be/n8uCt1TSGKETop-view Cars Clip: youtu.be/jZrjE_ixu18#MultilabelNeuralNetworks #UnderstandingAI #NeuralNetworkOutputs #AIPlayground #MachineLearningBasics #CarControlAI⭐TIMESTAMPS⭐00:00 Introduction01:17 Going Backwards04:15 Homework 504:51 Understanding 3 Inputs21:00 Right-hand Rule Fails21:37 Fine-tuning the Logic26:36 Homework 632:15 Different Network Structure41:27 Deep Neural Networks
Understanding AI - Lesson 2 / 15: Hidden Layers Radu Mariescu-Istodor 2024-02-09 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Dive 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=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYPhase 2: youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEODesmos 3D: desmos.com/3dAnother Playground: playground.tensorflow.org#HiddenLayers #NeuralNetworks #AIPlayground #MachineLearning #Perceptron #ActivationFunctions #ScikitLearn #AIProgression⭐TIMESTAMPS⭐00:00 Introduction00:45 Genetic Algorithm07:03 What the Network Really Learns11:40 Two Inputs31:08 Hidden Layers38:37 Boolean Operations41:22 Homework 341:32 Misconceptions42:32 Homework 4
Understanding AI - Lesson 1 / 15: A Simple Neural Network Radu Mariescu-Istodor 2024-02-02 | PLAYLIST: youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81Embark 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=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYPhase 2: youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEOPrerequisites: youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0HMachine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC43b1b's Neural Network Video: youtu.be/aircAruvnKk?si=JB6fvUT3Ko1mkU3xAnother Playground: playground.tensorflow.org💬DISCORD💬discord.gg/gJFcF5XVn9💻CODE💻1. Phase 1 github.com/gniziemazity/self-driving-car2. Phase 2 github.com/gniziemazity/virtual-world☕Buy me a Coffee?☕buymeacoffee.com/radum⚡️Join this Channel⚡️youtube.com/@radu/joinExcited 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 Introduction06:34 The Playground14:40 One Neuron21:48 Decision Boundary Plot25:05 Homework 129:05 Homework 229:13 Clarrifications
Drawing the YinYang with JavaScript Radu Mariescu-Istodor 2024-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 JavaScript Radu Mariescu-Istodor 2024-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-bird
Coding a Spinning Canvas App with JavaScript Radu Mariescu-Istodor 2024-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/nzyOCd9FcCA
Drawing CIRCLES in 10 Different Ways with JavaScript Radu Mariescu-Istodor 2024-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 :-)Things I mention in the videoMy Videos on Circles: youtube.com/playlist?list=PLB0Tybl0UNfYzb8GvgQBDYHBTM9hiH9bGPythagorean Theorem: youtu.be/iqSlzYXdFzw2D Vectors Tutorial: youtu.be/nzyOCd9FcCADraw the Portal Game: youtu.be/0SxiyLk2IMMMy Kamehameha: youtube.com/playlist?list=PLB0Tybl0UNfaqkqYWoGivTozv16qsF35JSelf-driving Car Course: youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyYMachine Learning Course: youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4
Coding Sorting Visualizers with ChatGPT and JavaScript Radu Mariescu-Istodor 2023-12-29 | In this video I show you how to use ChatGPT to update my previous sorting visualizers to show other algorithms: Insertion sort and QuickSort. This isn't a tutorial per se, just showing a way to get help from ChatGPT when coding.The videos where I coded the 3 visualizers are here: youtube.com/playlist?list=PLB0Tybl0UNfbMgV6SNJxPrPC5wuAzh-JkCoding after swimming in ice: youtu.be/oJYcRXaVg-MCoding a game with ChatGPT: youtu.be/FlDwEUQRJOwCodes are on my website:radufromfinland.com
🚙Self-driving car🚙 Live❓Q&A❓ Radu Mariescu-Istodor 2023-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-Istodor 2023-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. 🗺️Have Fun! :-) ⭐PLAYLIST⭐youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO⭐FINAL APP⭐radufromfinland.com/projects/virtualworld💻CODE💻github.com/gniziemazity/virtual-world10. OpenStreetMap = follow along11. 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 Introduction00:42 Including the Large World File02:49 Preparing for the MiniMap05:48 MiniMap Implementation 07:58 Scaling the MiniMap11:00 Marking the MiniMap center11:49 Outro
🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor] Radu Mariescu-Istodor 2023-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-Istodor 2023-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. 🌎Have Fun! :-) ⭐PLAYLIST⭐youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO⭐FINAL APP⭐radufromfinland.com/projects/virtualworld💻CODE💻github.com/gniziemazity/virtual-world9. Integration = follow along10. OpenStreetMap = code after this lesson⭐LINKS⭐openstreetmap.orghttps://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 Introduction01:01 Preparing to use OSM Data05:55 OpenStreetMap and Overpass Turbo12:53 Parsing OSM Data16:19 Latitude and Longitude24:29 Understanding Coordinates25:34 Proper Scaling34:46 One-way Road Segments38:14 Optimization 42:50 Saving the World Failed (Partially)
