Self-Driving Car with JavaScript Course - Neural Networks and Machine Learning
HTML-код
- Опубликовано: 26 апр 2024
- Learn how to create a neural network using JavaScript with no libraries. In this course you will learn to make a self-driving car simulation by implementing every component step-by-step. You will learn how to implement the car driving mechanics, how to define the environment, how to simulate some sensors, how to detect collisions, and how to make the car control itself using a neural network.
The course covers how artificial neural networks work, by comparing them with the real neural networks in our brain. You will learn how to implement a neural network and how to visualize it so we can see it in action.
✏️ Dr. Radu Mariescu-Istodor created this course. Check out his channel: / @radu
💻 Code: github.com/gniziemazity/Self-...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:44) Car driving mechanics
⌨️ (0:32:26) Defining the road
⌨️ (0:50:50) Artificial sensors
⌨️ (1:10:07) Collision detection
⌨️ (1:23:20) Simulating traffic
⌨️ (1:34:57) Neural network
⌨️ (2:03:10) Parallelization
⌨️ (2:18:31) Genetic algorithm
⌨️ (2:29:40) Ending
⭐️ Links ⭐️
🔗 Radu's website (with enhanced version of code): radufromfinland.com
🔗 Radu's workplace (consider applying): karelia.fi/en/front-page
🔗 Segment intersection (Math and JavaScript code): • Segment intersection f...
🔗 Visualizing a neural network in JavaScript: • Self-driving car - No ...
🔗 Visualizer code: radufromfinland.com/projects/...
🔗 Drawing random color cars in JavaScript: • Self-driving car - No ...
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
After this course, learn from Radu how to make your self-driving cars drive in a virtual world! ruclips.net/video/V_C7L7zelz8/видео.html
is there any part 2 for this video?
@@sdexstarlord Yes, the playlist linked in the first comment.
no way he really did it in *javascript* with 0 libraries
i am definitely watching this video multiple times, thanks for the video yall
Wow
Wow
Wow
Wow
Bogus!
I love how he types each character at the same speed, even if it's not necessary fast, it's so mesmerizing to watch such consistency.
You noticed :-) I tried a different approach for this one (also did a lot of takes to minimize the typos :-D)
@@Radu 100% worth it its just feels so smooth to follow
"going infinitely far but also going nowhere" that's life for you. Loved this tutorial, full of substance!
Thanks :-)
This is by far one of the best videos in terms of neural networks and their real-time implementation
Thank you :-) glad you like it!
Great! Now I can change my Tesla’s default self driving software to my own
😂😂😂😂
This is nowhere near as sophisticated as Tesla’s Full Self Driving software.
Lol haha... I will join you in your mission 😁😁
Would be funny if your implementation is better then 🤣
Yaaa U can 😁
This tutorial is absolutely amazing. I've done some tutorials with tensorflow, but this really helps me understand better, and I love the end result. Very cool
Great to hear :-)
@@Radu I know this is old but I'm trying to understand this code better what is happening with #addKeyboardListeners(); under the constructor, why the #? I can't find it through googling and need a little direction if you don't mind helping.
edit: never mind I think I figured it out, its "private class fields" right? wow that took me way to long to figure out, assuming thats correct. absolutly beautiful coding and I learned so much! thank you!
@@MrThatguy333 aaaaaaàaàààaaààààaaàààààààààààààààààaàaàààààààaààaaaa
@@Raduyou've generated only some traffic I want to generate infinite traffic how can i do that?
@@Audionic1 infinite won't fit in memory, but an object pool where you repurpose cars so they appear again is possible. Some people did it on my Discord... can't really explain such a thing in a YT comment.
I'm a relatively experienced programmer and JS is perhaps my strongest side. I haven't played with machine learning before (except for reading a couple articles) and this video served as a great introduction. I'm planning to expand on the example code by adding a random traffic generator, design a fitness function (perhaps use the number of dummy vehicles passed as a success metric) and automate the iterations.
That sounds like a great plan. Good luck experimenting and learning :-)
One of the best courses of this channel! This man is a genius! He structured all the implementation and its improvements in a way that makes you feel inspired. Great content!
Thanks again for the feedback :-)
Yes Bro this man is a genius!
16:50 important tip about using arrow functions instead of function declaration within classes. Arrow functions mean that this.left refer to controls as the context. If we did function declaration, this would refer to the function as the context and as there is no this.left within functions, it would lead to errors.
Thank you for making things even clearer :-)
The way he explains things feels like he's just describing the code in the very simple way things are!
When he is coding, it feels like he's telling a story while he writes the code! If this is the way he thinks while coding, he is a genius!!!! I love the way he describes and explains things! 10/10! It's as if we coders/programmers were just talking to the machine/code.
Thank you. This is very scripted, of course and edited (I had multiple takes). But if curious, I do have some unscripted (even live) coding videos on my channel :-)
@@Radu I will take a look at them. :)
@@vicyoslinuxofficial2607 Cool :-)
I loved this video. I know a lot of JS and some ML basics, but this video put them together in a very cohesive way such that I still learned a lot! You mentioned at the end considering making a follow up course, I would love to see that! Please do, I would be very interested in that. I subbed to your channel and will be watching for new videos, thanks a lot for making this video Radu!
Really happy to hear you learned something from this. I'm quite sure I'll do the follow up course someday (maybe this year). Meanwhile, I'll post some lighter content.
This is very well done. The typing is smooth as butter so you're not distracted by typos, corrections, or a very slow typist. The pace is about perfect for somebody who knows how to code but wants to build a model and learn to train an AI. I often find "intro" courses absurdly slow but this was great! I translated your code to Kotlin but my results were about the same. I've been trying to find a good "how does a neural network work" video for some time and this was just perfect. Thanks!
Thank you. Glad you liked it :-)
For more great visualizations, look at Sebastian Lague on youtube. He has a series on neural networks where he also goes more into the mathematical functions behind "teaching" a network.
@@PTS1337 Thanks for the tip!
This is the First time ever I saw implementing a Neural Network with Coding! Thank You for Bringing this to US!!
Congratulations :-)
Amazing course and great teaching methods, Radu! Appreciate FCC sharing another excellent resource. 100%!!!
Thank you, Botur!
Clear, calm and informative
10/10
Thanks a lot!
Thanks for watching!
Thanks so much ! You guys are helping me make my portfolio a lot better
AMAZING TUTORIAL. I really had a great pleasure following all project steps. The developper here, has a genuine pedagogical approach that makes everything easy for learners . Thanks. (btw, your calm voice made the knowledge flow confortable for the audience)
Thank you for all the nice words :-)
This chanel is the best code chanel in the youtube. thank you for everything
Man among boys in JS. Coolest thing about no libs is that that courses will last forever
😎 Thanks!
debug tip: if you can't get the console.table(this) working at 15:00 or so (aka controls.js does not work) make sure you have added the line "this.controls = new Controls();" in car.js constructor
many thanks and please do follow-up with more material! we need more guys like you, Dr Mariescu-Istodor
i'd like to understand how to add more layers, and delve deeper into it
I'm planning different extensions to this course. Let's see what I come up with :-)
One of the best coder and the best teacher to teach programming. Would love to learn more from you bro . Radu , you are really great man ..
Thank you :-)
just finished making my first track! thanks bro for all the help with learning soft soft. much love
awesome video! im so very noob but i love watching all these videos on coding and what not. it amazes me. i am 35 and just getting into tech now. i wish i would have been more eager with learning as a youth but, better late than never! thank you so much for your info videos! keep them coming!
Im almost 39....its never too late! I actually have better study habits now than i ever had in High School or College
This is the best video I've ever seen on youtube in my entire life. The level of this man is so high, he's got javascript, math and ai tattooed in his mind like it is the ability of breathing for any human being
I'm flattered to read a comment like this :-) I guess it's what you get with many (>20) years of practice... JavaScript is not my forte, though... I like to use it on RUclips because it's so easy for people to follow along (no need to install anything).
@@Radu you got it, it is so easy to follow because its live coding, but really? You are live coding a videogame with NPCs powered by AI living in an abstracted physical world, from scratch. In 2.5 hours. Thats just alien bro, I have never seen such a thing, I am following you forever.
@@migdress thanks for motivating me like that :-)
this tutorial is simply GOLD! thank you man
One of the best code tutorials I've seen. Excellent work. Incredibly useful. Well done!
You're welcome :-)
Thank you, Radu this was a good lesson. I'm a beginner in Java-script and this kept me motivated to do more complex tasks.
You're welcome!
Love it. "Naturally, I want the car to explode on impact" 🤣
:-))
I've been trying to wrap my head around AI and ML since a long time, but this is by far the simplest way to understand how it works, without learning any additional language. I know Javascript. You just got a subscriber. Keep it coming!
Thanks for subscribing :-)
You're one of the greatest teachers i've ever seen so far! Thank you
Thank you!
It's a very good channel, it's worth subscribing and watching his other tutorials in vanilla JS.
Thanks, Aitor :-) for recommending my content!
Omg I was looking for ml course using Js and when I opened RUclips I was recommended this gem. Thanks alot
It's so pleasing. The setuping and mastering softs amazing.
This video was so good! Yes I would LOVE the suggested course, PLEASE!!!
Cool :-) It's on my list and I'll make it someday.
You did a great job Radu. I just went through the whole course and I am really happy with the results and learning outcomes. I feel like I have taken my programming skills up to a new level. I liked and subscribed so I will check out your other content. I would be interested in any follow-ups to this course like you mentioned at the end of the video. Overall, I feel confident that I can take it from here with developing this program further thanks to your thorough explanations and consistent typing speed. Coding with Radu 👨💻👩💻 for the win!
Wow :-) glad to hear you learned so much and like my channel! thanks for watching!
Thank you very much guys ......we need more ppl like yall on this earth
Exceptional training course with coding in real time with crystal clear explanations during work. Never seen such a valuable video.
Really happy to hear this :-) Thanks for watching!
This is such an extremely fun course, great teacher too!
Thank you.
Why buy a Tesla when you can build it for free and drive it at no risk? What a fantastic course, thanks for making this available!
Your too tapped.
Amazing tutorial. Learned and enjoyed a ton from it. Thank you, Dr. Radu. You are an amazing teacher.
Thanks :-) glad you liked it!
Would love it if you continue this series...the best thing i ever saw on RUclips❤️
Thanks :-) I will make more videos on top of these, but currently have other things in editing, so, it will still take a while.
I was just checking around but ended up watching the entire thing.As a person who knows only C++, I have to say Javascript looks superior
How well do you know C++?
@@xaviermagnus8310 not much,I'm still a beginner but I know it better than any other language.i just don't like it having a separate graphics library
@@bayedevilakazi6328 The reason to use C++ would show up fast exposing this to harder tests.
Lol c++ is all pointers and memory,
He codes without errors and has all the data in his mind so he can just write code without console logging... what a dangerous man! In other words... wow you are very smart and such a talented developer. I am very amazed! Thanks for this tutorial!
I practiced a lot to teach this course... it's not how I code in real :-P if curious, you can check the Avatar video I published recently :-D it's 12 hours of normal coding (unscripted).
he also has the power of editing and multiple takes.
i am amazed too . I don't mind if it has edits. its still incredible skill
@@tanmaypanadi1414 haha :-)
@@tanmaypanadi1414 thank you!
Such a great content with a splendid professor,
Thank you for the knowledge and the good mood !!!
Thanks :-)
Mulțumim frumos, Radu! Ne faci mândri! 😊
Cu placere :-)
I was really looking for a machine learning tutorial :)
Great course. I think that double localStorage call should be optimized, but other than that, absolutely great!
I think you're right!
Очень крутой курс. Огромное спасибо.
definitely diving into your videos. Thank you so much for taking the ti to teach us that are green in the field. Have a great day
You can tell it is a great video right in the first five minutes
Thank you, Lucas :-) hope you like the rest of it too!
Thanks freeCodeCamp for bringing that amazing content!
I've been watching this video since yesterday afternoon, pausing, writing the code and sometimes my own versions of some snippets of code.
After playing again, I always realized that Radu did the same thing in a more elegant way and with much less lines of code!
A huge thanks, Radu!!! Following your channel, too!
Thanks :-) Glad you liked the course!
Perfectly. I am glad that there are people who are ready to help and promote young talents. Beginner streamers. I can say that you are a hero, brother. Do not listen to idiots.
I love you man! just from the fact that you took a quick second to explain the arrow function at 16:00 made me really happy!
Cool :-) glad it helped!
Time to make my own tesla
Nice one xD
@@priyanshukatuwal பரோரரேமரோரேஏப
Elon Musk should fear us now 😂
@@unk9 he sure will brother
**This is ELON MUSK**
"I want to get rid of that margin." - Every developer's first instinct.
Haha, true :-D
@1:47:58
YES ABSOLUTELY READY!
Loving the content so far and was quite intrigued by the use of biases.
Cheers!
I'm planning some extensions to the course, but it will still take a while (looking for quality rather than quantity).
Thank you for that great course! It's really interesting and your explanations are very good. Thanks :)
You're welcome! Thanks for watching :-)
@57:48
Even after fixing the curly braces, the sensor lines don't show up for me. The error reads "Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Sensor.draw (sensor.js:42:29)
at Car.draw (car.js:77:21)
at main.js:7:5".
If I console.log the start and end of each ray in the update method of the Sensor class (instead of the draw method), the console logs out what look like correct pixel values.
What am I doing wrong? How do I fix this?
For some reason, the this.rays.size is 0 when calling the draw method...
I have written the following condition in the draw method and nothing logs out.
if (this.rays.size > 0) {
console.log(this.rays[i][0].x);
console.log(this.rays[i][1].y);
}
@@zohebahmad9633 Could you share your code on the Discord linked on my channel? Hard to say without seeing the whole thing.
@@Radu sure
@@Radu Somehow changing the this.rayCount in the for loop in the draw method to this.rays.length fixes the error...
Now my sensors work perfectly! However, only inside the for loop (ensuring the for loop uses this.rays.length and nothing else... not even a constant integer)
OMG IT'S THE "car.draw(ctx)" BEFORE THE animate() IN main.js THAT WAS CAUSING ALL THIS TROUBLE!!! DON'T KNOW HOW ANY OF THIS WORKS BUT THAT WAS THE PROBLEM!!!
This was an amazing tutorial! Though, I think the sensors are too short ranged!
You can experiment :-) the code is available. I think long range means that the car can see further ahead, but it also increases the resolution of the sensors, meaning that training the neural network will become harder. Our optimization method is quite simple and the possibility space grows with longer rays.
OMG, you seem to be an professional! So can
ya also share your opinions about Pollen? I'm in deep love with their project. It's simple to use and makes a massive profit!
@@user-zi2fv4df7v Can you be more specific, which Pollen you are referring to?
@@Radu Yeah it was just an observation I made while watching at the airport. I'm also new to JavaScript and machine learning so I will be going through this tutorial again while hands on to learn more about it. I said the sensors were too short jokingly because I thought giving the car more time to detect traffic may result in the car learning to avoid traffic quicker. I shall experiment on that. I appreciate this tutorial by the way.
@@kzdm5255 :-) sure. I actually had longer sensors at first. But it was challenging to find the right parameter values so that I can get the behavior I needed when making the video.
Explanation of arrow function in controls dot js was amazing!
Glad you liked it :-)
All what i need for game. Including collision detection, movement physics, raycasting and so on in one course. The best! Also crazy you explained me the spreat operator in two sentences. Before my brain was so in stuck.
Glad to hear it helps :-)
I had not believed AI can be implemented using JS. Sir, I wish I could be your student.
Well... since you're watching this, I guess you are :-)
In case someone runs in the issue where the lines(lanes) disappear from the middle when setting setLineDash([20,20]) -- the problem is that your infinity number is too high. Change it to something like const infinity = 10000000; and it should fix the problem for you
Thanks!
Thank you!
thank you so much I thought it was a browser not supporting setlinedash issue lol
thanks
omg, how does this even work. why is everything ok with a regular line, but not with a dashed line? I spent a lot of time trying to figure out what I was doing wrong, huge thanks!
Great content, keep up the great work mate! Subscribed for more videos!
I have been looking for something like this for a long time.
Glad you like it! See you around!
Amazing and very clear course! It helped me to start with Neural Networks.
Glad to hear!
I can’t watch the video. It says “No stream” any suggestions????
same here
Try vpn
Same
Vpn to France worked
Refresh the page, if doesn't work, clear browser cache. If on mobile app, completely stop it and restart it.
Thank you for the great tutorial, Radu! I had a quick js question. I am stuck however at the artificial sensor section. My code produces an error running "this.rays[i][1].x". It's a TypeError that tells me that "undefined" doesn't have "x" property.
When I replaced line "this.rays[i][*]" with numbers the code runs and the rays are drawn. But I noticed that the when I console.logged "this.rays", the first term is "undefined." I was wondering if this is something you encountered when coding this project? If so, how did you fix it?
Thanks
Hi! It would help if I could see the code somehow.
I got the same error if you have the solution please send send it to me
@@Radu I got the same error please help
@@akshatchouhan5199 You might have an extra car.draw(ctx) in main.js, above the animate function.
@@Radu thanks the error is gone now
Love this tutorial keep them coming.
this is the first video of yours I watched You are a gem, you tried your best to recover his data. I had never watched a video like this before. I am glad to subscribe to your channel.
Glad you liked it :-)
Can't wait until the "code your own anime waifu bot in JavaScript" video drops
:-)) check the most recent video on my channel (close enough?)
At 11:30.
I have completely followed the coding. Though after saving the files and refreshing the page, I have the following error:
*Uncaught ReferenceError: height is not defined*
*at new Car (car.js:6:15)*
*at main.js:6:11*
Could someone explain what might be the issue please?
Thanks in advance.
Hard to say without seeing the code. Are you using the 'this' keyword before height?
Finally understood how machine learning works just thank you, wanted to start some projects but could not understand how
The best video on RUclips! Thank you so much for this.
1:09:50
function getIntersection(A,B,C,D){
const tTop=(D.x-C.x)*(A.y-C.y)-(D.y-C.y)*(A.x-C.x);
const uTop=(C.y-A.y)*(A.x-B.x)-(C.x-A.x)*(A.y-B.y);
const bottom=(D.y-C.y)*(B.x-A.x)-(D.x-C.x)*(B.y-A.y);
if(bottom!=0){
const t=tTop/bottom;
const u=uTop/bottom;
if(t>=0 && t=0 && u
Thanks!
At about 42:00 when adding ctx.setLineDash([20, 20]) it instead just removed the middle lines completely. I couldn't figure out where I went wrong.
Anyone else have this issue?
Yeah, others complained about it too. Your constant for I infinity is probably too large.
@@Radu That fixed it, thanks!
can you explain why it happens?
Thanks
@@Radu Multumesc! :D
Okay best video out there! Straight to the point and crisp video. Thank you so much! Life Saver!
Thanks :-) Glad you liked it!
This is working for real!!!everyone should try this tutorial!!thankyou somuch
I have been following the code and I don't know how to fix the error: "Uncaught ReferenceError: Car is not defined
at main.js:7:11" can someone help me please
Could you share your whole code somehow? I can't say what the problem is from this error message.
@@Radu I got it figureed out. the problem is that in the index.html file I had the scripts in a different order so main.js was getting called before car.js. thank you!
@@rafaelbustillo1308 ah, OK. Makes sense!
hi i am radu -> decode -> hi i am raju
Raju sounds cooler, though...
You are a life saver! Kudos to you! You rock!!
man I missed this kind of tutorials lol. Great work here, thanks!!!
At 57:50 I get a "Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Sensor.draw (sensor.js:37:29)
at Car.draw (car.js:77:21)
at main.js:7:5"
error. Any help would be appreciated!!!
If You left a copy of car.draw(ctx); in main.js outside animation loop, delete it and it should work fine
@@raidarkivistik Yeah... unfortunately I move that line down quite quickly in the video.
@@raidarkivistik Thank you so much! It works perfectly now!
@@raidarkivistik godsend
for all those too lazy to copy the intersect function
function lerp(A, B, t) {
return A + (B - A) * t;
}
function getIntersection(A, B, C, D) {
const tTop = (D.x - C.x) * (A.y - C.y) - (D.y - C.y) * (A.x - C.x);
const uTop = (C.y - A.y) * (A.x - B.x) - (C.x - A.x) * (A.y - B.y);
const bottom = (D.y - C.y) * (B.x - A.x) - (D.x - C.x) * (B.y - A.y);
if (bottom != 0) {
const t = tTop / bottom;
const u = uTop / bottom;
if (t >= 0 && t = 0 && u
Thanks for sharing this :-)
@@Radu No worries! Loved the course ;) but I don't know how I feel about you calling me out for using JS oveer Python hahah
@@benrogers8390 would you prefer a python version? :-)
this has been the most fun best interesting tutorial on youtube. well done!
Thank you. Glad you liked it :-)
That is awesome man! I've started similar project two weeks ago, and got stack with it!
Now I see what I did wrong )) Thanks for your manual
Wow, really? That's awesome!
I have a problem in 57:48 . it gives me:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Sensor.draw (sensor.js:34:40)
at Car.draw (car.js:51:21)
at main.js:7:5
I tried removing car.draw(ctx) in main.js file in line 7 as there were said in comments but I can't see rays that way. Help please🤦♂
If you can share the code somehow (like in the discord linked on my channel), I can have a look.
same error, did you manage to figure it out?
@@lol51329 removing the car.draw(ctx) in main.js in line 7 worked for me.
Why the hell he needs vs code
What do you use?
Iam glad to see your reply ☺️
I also use VS code but as you are not using any syntax highlighting or auto suggestions, I just commented why you use vs code you can use notepad for that.
@@gireeshbhat4158 :-)) ah, ok, I get it now.
Well, I like the themes in VS Code and the fonts look nice. There's some anti-aliasing there, I think. I use highlighting and suggestions when coding normally :-P but when making tutorials I like the focus to be in one place (the cursor) as much as possible... Not a bunch of windows jumping all over the place and sometimes covering parts of code that others are still looking at.
By far the best video and best teacher I've ever seen on RUclips!
Thank you :-)
This is really cool! This is the first time I felt like I understood neural networks!
You might understand them even better if you watch my 'understanding AI playlist' ;-)
Hmm. Why did they go with JavaScript... I know js - everyone does - but Python is so much nicer to code. I follow the "avoid js if at all possible" route. It's slow though, I'll grant. I suppose it would be easy enough to watch and do it in Python.
i suppose because its easier to code the game and an easy api so people can focus on the neural network part more the algorithm should be same no matter the language if you understand js then you should be able to apply it in python with pygame so i think its worth it.
But python is too slow
@@rajanpoudel7980 Yeah, like I said, it is slow. I might use the open source Godot game engine. It uses a pythonesque script but it'll run something like this at hundreds of FPS. Plus, it has all the convenient methods for this sort of thing. Yeah, I'll do that.
It's because JS is popular, so many people know it already, but JS is not well known for machine learning, so... I want to introduce AI related concepts to JS coders. At work I teach this same thing in Python as well. Since I don't use libraries, it doesn't really matter what you use to follow along if you're comfortable with some other language. Most of the things will be compatible.
@@fus3n I'm going to try it in Godot. That's basically python and is the lazy man's choice being a dedicated games engine.
Mersi Radu! Toti tinerii talentati pleaca din tara...
Cu placere :-) Mai trec din cand in cand si predau pe alocuri.
Great! I like your way of teaching - calm and thorough.
Thank you
Woooow this guy's a great teacher... I'm just watching and not coding but I'm really enjoying it 👏
Glad to hear :-)
What an awesome video! I'm so grateful that I'm in pre-calc right now so I understand all of the trig stuff :)
Great! :-)
I loved the course, thanks Radu!!!
You're welcome :-)
I can't believe literally no one is talking about how satisfying Nice tutorials voice softs.
This was incredible. Thank you!
You're welcome!
this man is in a league of his own, marvelous video
Thank you :-)
@@Radusir, I'm trying to extend this project in a way that a human will drive this car for a while then sensor data will be used to train the neural network and thank you so much for providing knowledge is such a fun manner
@@varswe Hi, you may want to check my recent video on the Euclidean distance. I give an example doing what you want, but without a neural network. You can extend it of course...
Thanks for watching! Let me know what you come up with :-)
@@Radu thanks for giving more resource, 😇