Self-driving car - No libraries - JavaScript course [Lecture 1]

  Переглядів 47,114

Radu Mariescu-Istodor

Radu Mariescu-Istodor

День тому

⭐️COURSE INTRODUCTION⭐️
Hi and welcome to the self-driving car (no libraries) JavaScript course.
You will learn to make a self-driving car simulation by implementing every component one by one. I will teach you 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.
I will explain how artificial neural networks work, by comparing them with the real neural networks in our brain. I will teach you how to implement a neural network and how to visualize it so we can see it in action. You will also learn some optimization techniques to make our car smarter.
The entire system is quite complex, however, each component is relatively easy in and of itself. I made this course keeping in mind my high-school days back in Romania. So, the knowledge you get from school could be enough to follow along (depending on the curriculum).
We use JavaScript to implement this system and I will teach modern JavaScript techniques during this course, so, this course is perfect no matter if you want to become a software engineer or a machine learning specialist (like me - I have over 10 years research experience with machine learning).
JavaScript is not ideal for artificial intelligence. Other languages have better support for these. But since we don't use any libraries, it won't matter. If you do want to learn this in a more useful language, consider studying at Karelia University of Applied Sciences, where I teach these things using Python as well. There, we also experiment with machine learning libraries like:
- Tensorflow: www.tensorflow.org
- Scikit-learn: scikit-learn.org
⭐️LECTURE 1: CAR DRIVING MECHANICS⭐️
We learn to make a car in JavaScript. To make the car we will use basic physics (mechanics) like acceleration and friction. We rotate the car using basic trigonometry (sin & cos) and animate it on an HTML5 canvas element. We will control the car using the keyboard (for now).
⭐️MORE LINKS⭐️
- Visual Studio Code: code.visualstudio.com
- Google Chrome: www.google.com/chrome
- Box2D: box2d.org
- Box2D (JavaScript port): github.com/kripken/box2d.js
- Traian National College: cntseverin.ro
- Karelia University of Applied Sciences: karelia.fi/en
⭐️CODE⭐️
Github: github.com/gniziemazity/Self-... (1. Car driving mechanics)
My website: radufromfinland.com
⭐️ TABLE OF CONTENT ️⭐️
0:00 Course intro
3:44 Lecture intro
4:39 Tools and project setup
8:51 Defining the Car class
12:06 Implementing the Controls
18:08 Car physics
26:50 Trigonometry

КОМЕНТАРІ: 270
@Radu
@Radu 2 роки тому
Excited about the course? I hope so :-) I put more effort into this one than usual!
@fleckenfurz77
@fleckenfurz77 2 роки тому
Very excited indeed! Thx in advance! Thats EXACTLY what i ve been looking for! Besides: You are an amazing teacher!
@Radu
@Radu 2 роки тому
@@fleckenfurz77 Glad to hear that you've been looking for something like this! And thanks for the compliment :-)
@rahulxdd
@rahulxdd 2 роки тому
Yes. Will there be a part 2?
@Radu
@Radu 2 роки тому
@@rahulxdd There will be 10 parts in total and I will post one every week.
@ScriptRaccoon
@ScriptRaccoon 2 роки тому
I *am* excited :)
@danielmurphy1982
@danielmurphy1982 Рік тому
This guy is a fricking genius. So so impressed with his presentation style and ability to code as if he's writing a children's book.
@Radu
@Radu Рік тому
Thanks, but not a genius... Just practiced a lot... a lot :-)
@yusufisyaku1118
@yusufisyaku1118 7 місяців тому
​@@Radupracticed alot until you became genius 😂.. Thank you Radu
@Radu
@Radu 7 місяців тому
@@yusufisyaku1118 :-))
@shivamkushwaha1029
@shivamkushwaha1029 2 роки тому
This channel is so so so underrated. I appreciate your efforts, Radu. Thank You for the beautiful content!
@Radu
@Radu 2 роки тому
Thank you 'so so so' much for watching :-)
@sidheshwartiwari9834
@sidheshwartiwari9834 2 роки тому
This is why I always say that Radu is highly underrated. I am lucky to know you since years.
@Radu
@Radu 2 роки тому
Maybe someday things will change. But anyway... I got over 2000 subscribers. It's 100 times more than the students I normally have in class. So for me, this is quite a lot already!
@sidheshwartiwari9834
@sidheshwartiwari9834 2 роки тому
@@Radu such positive attitude ❤️
@aitorplaza2560
@aitorplaza2560 2 роки тому
one of the bests channels if you want to learn javascript. Always comes with fresh and awesome ideas.
@Radu
@Radu 2 роки тому
Thank you for such nice words!
@souerico
@souerico 2 роки тому
Just knew the chanel! It's great to see the amazing methodology that you're using to teach this series!
@Radu
@Radu 2 роки тому
I'm happy to hear you like it. I tried to make it a bit more special than usual :-)
@wis6897
@wis6897 Рік тому
This is so cool! Thanks for uploading it! I am ready for more advanced stuff!
@Radu
@Radu Рік тому
I'm not :-)) have some other things going on at the moment, but I'll get back to this after that! Thanks for watching :-)
@indientis6003
@indientis6003 2 роки тому
As a beginner in JS I literally had no idea what you were talking 40% of the video, but it was so entertaining to watch.
@Radu
@Radu 2 роки тому
Might be a challenge for a complete beginner, but nothing is impossible :-) You can ask what is unclear.
@indientis6003
@indientis6003 2 роки тому
@@Radu when will part 2 come out?
@Radu
@Radu 2 роки тому
@@indientis6003 Tomorrow!
@GustavoSilveiraGameDev
@GustavoSilveiraGameDev Рік тому
I loved your channel! Thank You for sharing your knowledge.
@Radu
@Radu Рік тому
Happy to hear :-)
@iuc7254
@iuc7254 2 роки тому
Am so confused why this channel doesn't have 1M+ subs?🤔.... Glad I found this🤩
@Radu
@Radu 2 роки тому
Ah, yes! One of the biggest mysteries in the observable universe :-)) Glad you found the channel :-)
@aGj2fiebP3ekso7wQpnd1Lhd
@aGj2fiebP3ekso7wQpnd1Lhd Рік тому
This is the best introductory course I've seen. Bravo and thank you for making it.
@Radu
@Radu Рік тому
Thank you and thanks for watching :-)
@motielmakies631
@motielmakies631 2 роки тому
Wow! amazing, so much new and refreshing content! thank you so much!
@Radu
@Radu 2 роки тому
You're welcome :-) Stay tuned for the rest!
@kruptworld
@kruptworld Рік тому
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!
@Radu
@Radu Рік тому
:-) yeah... students often ask how things like that are different, so I thought to give some details, not just say we do it like this.
@bloppai9462
@bloppai9462 9 місяців тому
Thanks a lot for the video! I really appreciate how much effort you put into these videos, thanks a lot!
@Radu
@Radu 9 місяців тому
You're welcome! Thanks for watching :-)
@manuelantony3292
@manuelantony3292 3 місяці тому
very clear and precise!
@Radu
@Radu 3 місяці тому
Thank you!
@mahmoudel-sharnoby9430
@mahmoudel-sharnoby9430 2 місяці тому
Absolutely amazing , just started and can not wait to continue
@Radu
@Radu 2 місяці тому
Cool :-) hope you'll manage to go all the way!
@Eternam
@Eternam 2 роки тому
waiting for the next episode, your way of teaching is amazing Radu, you make it easy. thank you very much
@Radu
@Radu 2 роки тому
I'll have part 2 ready next week. Thanks for watching!
@miftify
@miftify Рік тому
Dude, you should have billions of followers, your teaching is straight brilliant!
@Radu
@Radu Рік тому
Thanks :-)
@christague2084
@christague2084 7 місяців тому
Awesome video! Cannot wait to finish the whole course
@Radu
@Radu 7 місяців тому
Hope you enjoy it! :-)
@mazlumkoyuncu5549
@mazlumkoyuncu5549 Рік тому
Thank you! The trigonometry part was a complete solution for randomly moving objects in my project.
@Radu
@Radu Рік тому
Awesome! :-)
@vegettosaiyans28
@vegettosaiyans28 2 роки тому
super awesome content!
@Radu
@Radu 2 роки тому
Thanks! Glad you like it :-)
@dukegard2504
@dukegard2504 Рік тому
Fantastic course (I watched the 2.5 hour version). Thank you. Great instruction. At the end you mentioned making a larger NN and implementing different behavior, I'm looking forward to that content. Thanks again. Now I'm going to binge on your channels videos.
@Radu
@Radu Рік тому
Thanks for watching :-) Hope you find something nice on my channel!
@ilianos
@ilianos Рік тому
What was the difference between this and the 2.5 hour version?
@Radu
@Radu Рік тому
@@ilianos The 2.5 hour version on FreeCodeCamp lacks the segment intersection lecture, the neural network visualizer and the last, fine-tuning lecture, where I draw the car and change its colors. The variant on my channel also has more jokes :-))
@eugeniogonzato
@eugeniogonzato 2 роки тому
This is fantastic, thanks !!!
@Radu
@Radu 2 роки тому
Thanks! And you're welcome! :-)
@ninjaduck3534
@ninjaduck3534 2 роки тому
Such a ballsy project! Love and admire the use of vanilla
@Radu
@Radu 2 роки тому
Glad you think so!
@marcyanus1430
@marcyanus1430 2 роки тому
Thank you for making this video!
@Radu
@Radu 2 роки тому
You're welcome!
@rahulxdd
@rahulxdd 2 роки тому
This is awesome. Subscribed.
@Radu
@Radu 2 роки тому
Thanks! Welcome on board :-)
@justwaterweight
@justwaterweight 2 роки тому
Cool. I am going to add this in my watch list✌️
@Radu
@Radu 2 роки тому
Great!
@Frankslaboratory
@Frankslaboratory 2 роки тому
I'm ready for more 'Coding with Radu...' 🎵🎵
@Radu
@Radu 2 роки тому
Haha, Yes! Have you seen the extended intro? 😎
@Frankslaboratory
@Frankslaboratory 2 роки тому
@@Radu I have seen it indeed, love it
@mlutteral
@mlutteral 2 місяці тому
I'learning a lot, thanks to putting this channel out
@Radu
@Radu 2 місяці тому
You're welcome :-)
@salmanfariss
@salmanfariss Рік тому
This is such an amazing tutorial, instant sub!
@Radu
@Radu Рік тому
Awesome, thank you!
@kspv2806
@kspv2806 2 роки тому
Genius, thank God I found this channel
@Radu
@Radu 2 роки тому
I'm really happy you did too :-)
@Shirgho
@Shirgho Рік тому
Great tutorial series!
@Radu
@Radu Рік тому
Thanks!
@Shirgho
@Shirgho Рік тому
@@Radu No, Thank you!
@daddycow8247
@daddycow8247 2 роки тому
came from reddit! Sick tutorial my man
@Radu
@Radu 2 роки тому
Welcome :-) and glad you thought it was nice!
@ful7481
@ful7481 2 роки тому
This channel is so underrated , I wish it grows
@Radu
@Radu 2 роки тому
Thanks :-) with comments like this, making videos is easy. And... channel is not that small anymore. I wouldn't know where to fit 3000 people if I'd have to :-D
@ashwinjain5566
@ashwinjain5566 2 роки тому
Thank you so much for this!
@Radu
@Radu 2 роки тому
No problem :-) Thanks for watching!
@StaMariaRock
@StaMariaRock Рік тому
10 minutes watching the video and I'm happy for my decision already, really good methodology Radu
@Radu
@Radu Рік тому
Glad to hear :-) thanks for watching!
@MK-bs3dq
@MK-bs3dq 2 роки тому
You really nailed it
@Radu
@Radu 2 роки тому
Thanks!
@cryptocoinkiwi8272
@cryptocoinkiwi8272 Рік тому
That was really damn impressive!
@Radu
@Radu Рік тому
Glad you liked it!
@prakashchalke1708
@prakashchalke1708 5 місяців тому
Wonderful video.
@Radu
@Radu 5 місяців тому
Thank you!
@mdashik2291
@mdashik2291 Рік тому
That's was an awesome tutorial to learn NLP. bro, We wanna more videos like this
@Radu
@Radu Рік тому
Not sure how this relates to NLP :-) I mean... sure, neural networks can be useful there too, but much of this course is not related.
@ullaskunder
@ullaskunder 2 роки тому
this is awesome....✨✨❤❤😄
@Radu
@Radu 2 роки тому
Great :-) Will you code along?
@silverstreetman
@silverstreetman 3 місяці тому
Hi Radu، you are doing fantastic work. Very interesting.
@Radu
@Radu 3 місяці тому
Hey, thanks :-)
@charlesukanga4835
@charlesukanga4835 Рік тому
I love you radu ❤🙏, this is the best JavaScript course ever
@Radu
@Radu Рік тому
Haha :-) thanks! I'm happy you think so.
@palashsharma26
@palashsharma26 2 роки тому
Amazing I want more javascript program like that
@Radu
@Radu 2 роки тому
This course will keep you busy for a while, I'm sure :-)
@adarshyadav5932
@adarshyadav5932 Рік тому
This video and your teaching style is just awesome! ✨ It took me around 3 hours to follow along 30 min video😂and i wasn't bored even for a minute. want more such videos!! 🔥
@Radu
@Radu Рік тому
Happy to hear you were patient enough to watch it all :-)
@dirantechie9411
@dirantechie9411 Рік тому
Nice one radu best course..... i can now improve my Javascript Skills 🔥
@Radu
@Radu Рік тому
Great :-)
@phoenixxofficial
@phoenixxofficial 2 місяці тому
Found this course a year ago when I was just starting to code and it was too hard for me to follow along to the end but it really inspired me You and Frank's Laboratory are my unknowing teachers haha Thanks a lot for the great content and amazing walkthroughs of everything you do
@Radu
@Radu 2 місяці тому
Are you able to follow along now? :-)
@phoenixxofficial
@phoenixxofficial 2 місяці тому
@@Radu I am! It's crazy because as you're learning you don't really see the improvement, but this is almost tangible evidence of progression haha Finally time to take the weighted wristbands off 💪🏽 Thank you again, especially for an introduction to the almighty lerp function 😂
@Radu
@Radu 2 місяці тому
Cool! Good luck :-)
@aliadel1723
@aliadel1723 Рік тому
i really love your channel ♥
@Radu
@Radu Рік тому
I'm glad :-)
@llogica
@llogica 2 роки тому
This is pleasure for my eyes :)
@Radu
@Radu 2 роки тому
Really? Cool :-D
@summergua6123
@summergua6123 Рік тому
You are so creative and good at teaching! I'm kind of envy your students🤣
@Radu
@Radu Рік тому
Thank you! If you're following my videos, I guess you are my student, in a way :-)
@hameedurrahman9056
@hameedurrahman9056 Рік тому
really excellent things ....
@Radu
@Radu Рік тому
Glad you think so!
@user-qe4nu5sz7n
@user-qe4nu5sz7n 8 місяців тому
Watched the whole video, excellent! Comment in channel support.
@Radu
@Radu 8 місяців тому
Thanks for watching! :-)
@robertobenedit
@robertobenedit 2 роки тому
aprender esto es un sueño hecho realidad! A VEEER! LLEVO 1 SEMANA TARAREANDO TU INTRO, JAJAJA CODING WITH RADU! CODING WITH RADU! saludos desde Junin Argentina!
@Radu
@Radu 2 роки тому
Haha, glad to hear you're interested and that you like the theme song :-) It's actually a song I was humming to my baby boy when playing around... then I decided I want to remember this song later in life, so I invented lyrics for it and now use it as an intro :-)
@geekmuralin
@geekmuralin Рік тому
Thank you 😊
@Radu
@Radu Рік тому
You're welcome!
@elhamzeinodini4828
@elhamzeinodini4828 22 дні тому
Thanks❤
@Radu
@Radu 22 дні тому
No problem :-)
@NicolasGarciaCa
@NicolasGarciaCa Рік тому
First of all, what a great course men, I just started learning a bit about ML and this course combine it with one of my hobbies (Cars). I have run into an issue, I followed the video up to "Implementing the Controls" section, at that point, when I wrote the line for printing a table on the console, nothing appears on the console. I though might have been a problem with the function console.table() itself, so I decided to continue believing the code was recognizing input anyways, but when the moment came to update the rectangle it was not working either.
@Radu
@Radu Рік тому
You can try to share the code on the discord server linked on my channel and I'll have a look... Otherwise, make sure you click inside the page before pressing the keys, and... that the controls.js file is linked before the others. Does the console give any errors?
@vinividipepe
@vinividipepe Рік тому
You’ve earned my sub
@Radu
@Radu Рік тому
Welcome aboard :-)
@elescritoriodejasso
@elescritoriodejasso Рік тому
Genial!!!!
@Radu
@Radu Рік тому
Thank you!
@howl2339
@howl2339 Рік тому
You are a mood 😄
@Radu
@Radu Рік тому
What does it mean? :-D
@howl2339
@howl2339 Рік тому
@@Radu It is like a state of mind, the fact that your videos are amusing and cool is beautyful, that is fantastic!
@Radu
@Radu 7 місяців тому
Thanks :-) just stumbled upon this comment now... Phase 2 of the course starts today, btw :-)
@anegative660
@anegative660 2 місяці тому
Hello Radu!, i just found your channel when i try to learn about the neural networks topics and i found your tutorial is amazing, and i would like to offer an improvement in 30:22 to 31:15, this is when the car movement about to stop, when we try to change the angle of movement before we approach the speed to zero, there is a constant change of angle before it went stop, what i am trying to say is, the constant rate of change of the angle supposed to be followed by the constant rate of change of the speed, because if we are about to change the angle of the movement, there is must be a velocity that changing its momentum, to make it more sense, here the pseudo-code i have written: if(this.speed !=0){ const flip = this.speed > 0? 1:-1; if(this.controls.left) { this.angle += 0.03*flip*this.speed; } if(this.controls.right) { this.angle -= 0.03*flip*this.speed; } }
@Radu
@Radu 2 місяці тому
Are you sure this makes sense? It seems to mean that if your speed is close to zero, you don't steer almost at all. But it's with low speeds that people parallel park, for example (a lot of steering involved).
@anegative660
@anegative660 2 місяці тому
@@Radu Yeah exactly, the angular movement is perpendicular to its velocity, i used to play a cars game alot and nowadays im driving, i still use a convetional car and it feells natural to drive that way, my pseudo-code may still need a correction though depend on the type of car are we driving
@Radu
@Radu Місяць тому
Cool :-) Experimenting with code is the best way to learn, I think!
@javifontalva7752
@javifontalva7752 5 місяців тому
I am really excited about this project. Let's see if I can do this.
@Radu
@Radu 5 місяців тому
You can!
@vivektailor8607
@vivektailor8607 8 місяців тому
Hey Radu, I just started your course and I am loving it, I just wanted to point out that if we place the left and right movement conditions inside the if(this.speed!=0) then the car won't turn if we are stationary. I wanted to ask is there any downside to creating the flip variable inside the move function and then updating it in the if(this.speed!=0) and then using it in if(this.controls.left) and if(this.controls.right)
@Radu
@Radu 8 місяців тому
I don't think there's any downside to doing that :-) You can rewrite this code in very many different ways, at some point it comes to personal preference, I think.
@tisa2826
@tisa2826 Рік тому
Nice course, Radu could you create the same course with explanation feed forward and back propagation on some good practical example? Thanks
@Radu
@Radu Рік тому
I might do it someday, but not very soon. I'm trying to find a good way to teach backpropagation and it's not easy to do :-|
@vorfolomeus
@vorfolomeus 8 місяців тому
Dear Radu, please check connections of UKposts videos to materials on web page, as an example, video frame on web page related to this course displays message: "video is unaccessible". Maybe it will help to grow up rates of the videos. ....gonna code, debug and have fun.... very motivatable song
@Radu
@Radu 8 місяців тому
Thanks for the heads up :-) I'll try to have a look one of these days (hopefully this month, quite busy at the moment...)
@tomthorpe5889
@tomthorpe5889 3 місяці тому
Hi Radu, I am enjoying watching your tutorial! It is great. I have been trying to set up my VS Code to have preview window in VS Code editor. I have watched lot's of other tutorials on how to do that but I can't get it working for Chrome and developer tools. Do you have a tutorial on setting up the VS Code editor? Thanks, Tom
@Radu
@Radu 3 місяці тому
Hi, I tried at some point to use an integrated browser, but I didn't like the experience. I'm just using Chrome alongside VS Code in the video.
@user-fw9ns7rm1v
@user-fw9ns7rm1v Рік тому
Keep up with the good work, and leave the singing to Adele :D hehe
@Radu
@Radu Рік тому
:-)))
@kpm25
@kpm25 3 місяці тому
Hi Radu, I appreciate your hard work and great teaching, I realize you may be on holiday at the the moment, so maybe someone else here can also help. With Visual Studio Code is there an extension I can use that will catch when I misname a class variable etc... sometimes I might mistype a capital letter on a camel case etc.. and might find a while to find the error.. Otherwise it doesn't show any errors Cheers.
@Radu
@Radu 3 місяці тому
Maybe look up linters (like ESLint), I think it can do what you want (and much more).
@kpm25
@kpm25 3 місяці тому
@@Radu Thanks, I really enjoyed going through your tutorials and will try to cover as many of your videos as possible before phase 3. I tried to implement an optional roof color option, and so that the world can remember and save to Json, the approach I took was to give segments colors and then color buildings based on the segment they run along. Hope this seems like the most logical option to take.
@Radu
@Radu 3 місяці тому
@@kpm25 Sounds a bit complicated, what if the segments in a polygon have different colors? I think the most logical is to give properties to the building like 'roofColor' and you can have others as well, like wallColor, roofHeight, etc...
@kpm25
@kpm25 3 місяці тому
@@Radu sounds good I like it. But what I was doing was having only the graph segents to assign the buidling colors like a "street color". But I get what you mean. Will take a bit more work to implement. Also Was thinking about street, road names. I'll go through your tutorial about importing live street data, much appreciated.
@Radu
@Radu 3 місяці тому
Road names are typically segment meta-data.
@quentinquadrat9389
@quentinquadrat9389 Рік тому
Nice video, but better to place the (x,y) position of the car in the middle of its rear wheel axle: this simplifies computation for turning. Missing to time the delta-time on your x/y -= sin/cos * speed formula to convert speed (m/s) to position (m). But ok for a game. I'll watch your next videos.
@Radu
@Radu Рік тому
Thanks for the tips :-) hope you'll like the rest of the course as well.
@quentinquadrat9389
@quentinquadrat9389 Рік тому
@@Radu yes they are nice! Keep going.
@Radu
@Radu Рік тому
@@quentinquadrat9389 Thanks :-) I'll try
@valor9254
@valor9254 Рік тому
Thank you for providing such an interesting lecture for free. I would like to post the process of making it on my personal blog. Can I upload a part of your video as a gif file on my blog? I'll leave the UKposts source.
@Radu
@Radu Рік тому
Sure you can :-) Send me a link when you have it ready!
@MsPatryQPL
@MsPatryQPL 2 місяці тому
@Radu Could you explain section with save() and restore()? I searched information about this, and i dont find any reason why we need use this.
@Radu
@Radu 2 місяці тому
You're right, we don't need this here, because we're resetting the height of the canvas on each frame... that action resets the canvas (clears it, and removes any translations / rotations, etc. that are done to it). But typically you want to save the state of the canvas sometimes, then you would use save(). It saves everything about it, including fill and stroke styles. Then, you can change whatever you want, draw new things and when you restore() the values reset to what they were saved to. If you do several translations one after another this usually becomes a problem and a save / restore mechanism is needed. But, again, here setting that height restores the canvas to the default properties anyway, so it does the job instead.
@soussousalahiddine5933
@soussousalahiddine5933 2 роки тому
🔥🔥
@Radu
@Radu 2 роки тому
🧯🧯
@gzbin365
@gzbin365 Рік тому
cool
@Radu
@Radu Рік тому
Thanks!
@tjnaz
@tjnaz Рік тому
Man these puns are driving me nuts !! 😅
@Radu
@Radu Рік тому
I see what you did there :-D
@feang0
@feang0 Рік тому
Nice tutorial however i am getting Car is not deffined so I wonder if i do have to import it from car.js to make it work and dont get the car draw on canvas either.
@Radu
@Radu Рік тому
Hi, do you include the car.js script in the html file (before the things that use it)?
@abdelrahman5094
@abdelrahman5094 2 роки тому
I like how you put yourself under the output tab lol
@Radu
@Radu 2 роки тому
Thanks! It's where I live :-|
@mohamedaboghazal556
@mohamedaboghazal556 Рік тому
@Radu
@Radu Рік тому
:-)
@surf2553
@surf2553 Рік тому
Awesome! what is your VSCODE theme?
@Radu
@Radu Рік тому
I use 'Ice Contrast'.
@surf2553
@surf2553 Рік тому
@@Radu Thank you! I just discovered your tutorials tonight. I will be going through each of them! Excellent content!
@Radu
@Radu Рік тому
@@surf2553 Wow, awesome :-) They're not all excellent though :-D
@aktanabdygaziev1186
@aktanabdygaziev1186 2 роки тому
Hello. This is great learning source! I followed your code but the rectangle is not showing up my browser, can not find the issue. I logged a text to console to check if Car class was instantiated and it is up there but can not see the rectangle.
@Radu
@Radu 2 роки тому
Hi Aktan, can you show me the code somehow? Otherwise, you can compare your version to that in the git (in the description) and see what went wrong. Thanks for watching!
@KnowledgeUnknown
@KnowledgeUnknown Рік тому
Sir can you make javascript full tutorial for beginners to advanced by developing games like this . So i can lean more about javascript
@Radu
@Radu Рік тому
I will soon start a beginner course with JavaScript and HTML canvas.
@bennybrouwer
@bennybrouwer 7 місяців тому
Hi Radu, Great study! Started with NN, thinking my knowledge of JavaScript was sufficient but went back (?) to your race-course project ... some fun : const utils = {} What is this ? Without libraries ....... so I create my own ....:-) The way you ...extract an object or [{stringify .... an array should be self-documenting but maybe it's my age (past 65) . Since you use classes, can you use set and get methods so that I do not have to extract values like weight = ({[, ..etc. Well aware that this course is for experienced programmers and 3.5 hours is a week study but reading the posts I think that lots of it is copying and pasting and complimenting in stead of studying. OK, too grumpy. COMPLIMENTS ! Benny
@Radu
@Radu 7 місяців тому
- const utils = {} is defining an empty object (maybe I used this in my ML course) - stringify is a fancy word for converting a JavaScript object (including arrays) into a JSON string. It's a standard for representing structured data (like XML) - you can have getters and setters in JavaScript as well, but I'm not using them often... I started learning JavaScript from Java and in the beginning my code looked too much like that (I try to get closer to what JavaScript developers use nowadays... Classes are actually not so popular in JS nowadays) - I'm quite sure some people take the course seriously, but many just copy the code and think they understood... They are just fooling themselves :-)
@bennybrouwer
@bennybrouwer 7 місяців тому
Hi @@Radu My post was meant to be a compliment and still is. I do copy your code but use it letter by letter to study. and am stil learning. Small addition: Using objects like your utils makes debugging almost impossible. What if I make a typing error and program utils.colr = "#AA0000" and then MyDiv.style.backgroundcolor = utils.color About classes: I have to disagree There has been a period that they were called "sugarcaking objects" but a proper use makes clear self explaining programming and defining them in separate .js files stimulates creation of your own libraries. Speaking of: can you elaborate on import / export in a separate video (or mail). Especially where it comes to using vscode versus the real www. It's an ongoing debate on the internet and I really like to here your opinion.
@Radu
@Radu 7 місяців тому
@@bennybrouwer Thank you! And I agree that debugging that is quite tricky. I prefer classes as well, but I don't see them in practice nowadays in favor of functional programming. So, if you go work in some company, it's likely you don't see classes at all, and I believe you shouldn't add them...: just continue to code in the same fashion they are already doing it there. When I teach I like to do a mix some things because it demonstrates some characteristics of the language, but people may not draw the right conclusions (still work in progress). I don't have content about import / export, unfortunately :-(
@bennybrouwer
@bennybrouwer 7 місяців тому
Hi @@Radu , I think we are on the same line but what do you mean with functional programming ? Classes are extended objects with some restrictions and extra's. I should try this but suspect that I can create a Class Utils and then somewhere in a large JS file program Utils.stupidfunction = () => console.log("you are not supposed to use this function"). On the other hand . . maybe you should add a function utils.debug() giving a listing of everything you are using it for. Mixing programming languages: Although Pascal and Fortran are out of date and the Commodore 64 and Atari game Pc forced me to learn Basic, They all tought me functional programming. I AM INTERESTED in Python though and read that you have experience. Suggestion for getting started is welcome. thi, Benny
@Radu
@Radu 7 місяців тому
@@bennybrouwer yes... I'm not talking about how classes work 'behind the scenes'. I mean the way the code looks. Like, these 2 examples do the same thing, but the second one is more popular nowadays (at least in my experience, I might be wrong...): class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } const person1 = new Person('Alice', 30); person1.sayHello(); ///////// const createPerson = (name, age) => ({ name, age, sayHello: () => `Hello, my name is ${name} and I am ${age} years old.`, }); const person1 = createPerson('Alice', 30); console.log(person1.sayHello()); I also started with Pascal, but only studied a bit in school and never became interested in it.
@allyouneed4840
@allyouneed4840 Рік тому
Hello sir, first of all hats off for the efforts 👐 But in controls files I'm not able to define the #addKeyboardListeners(){ method. And every time it shows the error for the (#) . Can you please help me out?
@Radu
@Radu Рік тому
Can you share the code with me somehow? (Maybe on the discord linked on my channel banner?)
@allyouneed4840
@allyouneed4840 Рік тому
@@Radu okay
@MDABEDAFNAN
@MDABEDAFNAN Місяць тому
Can anyone tell me which playlist is phase-1, phase-2 or 3 ? I can see same car driving video in two playlist.
@Radu
@Radu Місяць тому
The first one should be 'Self-driving car', the one linked in this video description. It contain all the videos from Phase 1, 2, 3 and will contain any phases to come. Second phase playlist is 'Virtual World' Third phase playlist is 'Understanding AI'
@paolodt7588
@paolodt7588 Рік тому
hi there ,, at 11.36 I should see the black rect 'car' ... why not? many tx
@Radu
@Radu Рік тому
Hard to say without seeing the code... are you including the .js files in the same order as me?
@rajivnair2717
@rajivnair2717 2 місяці тому
hi radu ,how are u showing webcam in vs code while screenrecording.how is it done
@Radu
@Radu 2 місяці тому
It's not actually in VS Code. It's on top of it. I use a software called OBS to record / stream. It lets me create a scene with whatever I want. I can move the camera on top of VS Code, resize it, even apply green-screen removal and other filters. Recently I've been playing with transitions between scenes and that's how in newer videos the browser moves over VS Code (animated).
@tjnaz
@tjnaz Рік тому
A question: when reversing and changing direction, in a real car the turning of the wheels happens only in the front however in this implementation it happens in the rear wheels as well, is that correct, or am I missing something?
@Radu
@Radu Рік тому
In this version, the center of rotation is in the middle of the car. And it's true that as you turn the wheels more and more, it changes. Feel free to improve the car mechanics if you want :-) Because the system is so complex as a whole, I had to keep each individual component (like the mechanics) relatively simple.
@shubham-itachi
@shubham-itachi 4 місяці тому
Hey After learning ml with js does we will get job. I mean people are making with python.
@Radu
@Radu 4 місяці тому
What I like to teach mostly, is the concepts (they apply to any language). Python is great because many things are already implemented there, but I like explaining how those things work, so language isn't important. JavaScript is more useful when making interfaces (and sharing them), so I use that.
@theloneranger3551
@theloneranger3551 Рік тому
unable to draw the car can someone please help me out i'm getting this error in the console:- car is not defined at main.js:6:12
@Radu
@Radu Рік тому
Helps if I could see the code. Maybe share it on my discord server?
@aitorplaza2560
@aitorplaza2560 2 роки тому
Hi Radu. One question, why when you move "canvas.height = window.innerHeight" inside animate() those issues are fixed? i do't get it.
@Radu
@Radu 2 роки тому
Hi Aitor, Your question is great because probably what I should have done is add an event handler for window resize and only there set the canvas.height. Then, in animate, I should have called ctx.clearRect(0,0,canvas.width,canvas.height). But! I wanted to show you that something strange happens here. Documentation is not very clear, but what happens is the canvas is reinitializing when the size is changed (so, everything is cleared as a result). This behavior can cause headache at times and I wanted to make it known to people. For example... if you are making a drawing app and then have a resize event listener, all your drawing disappears all of a sudden (not something you want). And you (as a developer) may not think to test such a thing and then your users just get annoyed (not all give feedback). Anyway, hope my explanation helped.
@aitorplaza2560
@aitorplaza2560 2 роки тому
@@Radu Thanks for the explanation, very clear. I'm waiting for the second video! Congratulations for your work!
@Radu
@Radu 2 роки тому
@@aitorplaza2560 Thanks for watching :-)
@basiccoder2166
@basiccoder2166 2 роки тому
Hi Radu, Why haven't you created this project on p5js? it would be much easier
@Radu
@Radu 2 роки тому
Because then I couldn't use the hashtag #nolibraries when promoting the course :-) And 'much easier' is not exactly true. Sure, you write fewer lines of code, but those lines are easy compared to the logic and algorithms I'm going to teach you here. Those are the essence of this course and the programming language is only a tool. Feel free to follow along in p5js if you are more comfortable with that :-)
@javifontalva7752
@javifontalva7752 5 місяців тому
it is weird when I push left or right I can moves the position of the canvas. any ideas why??
@javifontalva7752
@javifontalva7752 5 місяців тому
fixed it. I added event.preventDefault(); into the eventListener
@Radu
@Radu 5 місяців тому
Hard to say without seeing your code. Maybe try adding overflow:hidden; to the CSS of the body?
@lordsaiint
@lordsaiint Рік тому
For some reason, my rectangle is not showing on the canvas.
@Radu
@Radu Рік тому
Can you share the code somehow? (like on the discord linked on my channel)
@chisomodimmegwa3479
@chisomodimmegwa3479 8 місяців тому
I don't understand why the car keep moving upwards hence i do not understand the Maths.abs solution. Can please explain in more detail bcs u said it will bounce up and down but eventually move upwards 23:52
@Radu
@Radu 8 місяців тому
The 'bouncing' happens instantaneously, it doesn't have a chance to re-render (ask again if this doesn't clear things out).
@chisomodimmegwa3479
@chisomodimmegwa3479 8 місяців тому
@Radu still not clear why it keep moving forward because mathematically the friction is supposed to bring the speed to zero eventually, so why does the car keep moving forward? If speed > 0 then speed -= friction. Meaning speed reduced by 0.05 till it eventually reaches 0 right? Even if it somehow goes below 0 the next condition will increase it back to 0 with speed += friction.
@Radu
@Radu 8 місяців тому
@@chisomodimmegwa3479 Mathematically, yes. You are probably one of the few to notice I chose numbers for acceleration, max speed and friction that should 'add up' 🙂but this is not just maths, it's computer science, and computers don't always represent floating point numbers the way you'd expect.
@chisomodimmegwa3479
@chisomodimmegwa3479 8 місяців тому
@Radu another confusion jist occured in my brain. Lets say somehow the speed ends up being positive, y=-speed will cause the vehicle to moves up wards continuously by little steps which is wat was happening. If dat were the cause, why use Maths.Abs if the speed is already positive. Another scenario is is when speed ends up negative but the y = -speed should make the car move downwards continuously not upwards and den the Maths.abs solution would make sense bcs speed is negative. But dats not the case because car is moving upwards. I'm not sure if I'm making sense to you😮‍💨
@Radu
@Radu 8 місяців тому
@@chisomodimmegwa3479 you're making some sense :-) but you try to imagine too much. Remove the if condition that does the abs, add a log for the speed, and see what happens to the value. You may be right and abs could be unnecessary because of the order the previous if statements are written in.
@citadelcouncil3292
@citadelcouncil3292 Рік тому
It is difficult to say whether you will see this comment or not, but if you see you should know: you are the best
@Radu
@Radu Рік тому
I found your comment :-) Thanks! It made my day.
@fe1ixj591
@fe1ixj591 Рік тому
I can't get it to move. Even after downloading your folder from github. Still don't want to work. Do not know what else to try. Could you share a discord invite and help me out unless you have a quick answer?
@Radu
@Radu Рік тому
There's a link to Discord on my channel banner. Feel free to post it there.
@sagittario8796
@sagittario8796 Рік тому
I'm having getContext is not a function Please help
@Radu
@Radu Рік тому
Can you share your code somehow? Hard to say what's wrong without looking at it :-)
@sagittario8796
@sagittario8796 Рік тому
@@Radu it's exactly the same as yours !!
@Radu
@Radu Рік тому
@@sagittario8796 Are you sure? Sometimes errors can creep in unexpectedly... You can try taking my code from github to compare (link in the description)
@ekomukanga893
@ekomukanga893 Рік тому
If you want to be a pro dev, use a year to learn JavaScript for Radu's channel🌝
@Radu
@Radu Рік тому
Do you like JavaScript or have some other preference? :-)
@bashzilla5554
@bashzilla5554 Рік тому
why set "this.y -= this.speed" as opposed to "this.y = this.speed" ?
@Radu
@Radu Рік тому
Well, the speed value is just that, one number, say... 2. If you do this.y = this.speed it means that your car will always be at 2 pixels from the top... that's is. Because y values grow downwards, on a computer and I want the car to go upwards, I'm subtracting the value like that. Hope this helps!
@writethatdown100
@writethatdown100 2 роки тому
Why don't you add spaces in your code, it seems like you want everything as squished as possible
@Radu
@Radu 2 роки тому
I kind of do :D It's a complicated reason... but, in short, I make the font-size quite large because I know some people watch these on mobile, and I want it to fit horizontally on the screen :-) I also avoid auto-formatting because I think things jump around too much and it makes it difficult for viewers to follow sometimes. Do you find it disturbing?
@writethatdown100
@writethatdown100 2 роки тому
@@Radu not really, but it's just not how I'm used to reading code
@Radu
@Radu 2 роки тому
@@writethatdown100 yeah, I hear you... comments like yours make me question some things I do, and rethink my setup from time to time. You may have noticed I don't use auto-completion features or multi-line editing as well... because I think most viewers find them disturbing. Of course... expert coders are used to them, but expert coders are not my target audience (they already know to code and don't need tutorials). Just thinking out loud :-)
@RainOnline
@RainOnline Рік тому
Radu, sunt prea prost pt asa ceva
@Radu
@Radu Рік тому
De ce zici asta? Ce stii sa faci? Ai mai programat pana acum?
@RainOnline
@RainOnline Рік тому
@@Radu Salut, Radu. Da, programez de aproape 2+ ani cu Js si ReactJs. Dar mi-se pare overwhelming si simt ca nu este pentru mine. Chiar daca imi place simt ca nu sunt capabil sa fac ce fac altii. Multumesc mult de raspuns!
@Radu
@Radu Рік тому
@@RainOnline Eu programez de 20 de ani... compara-te cu nivelul tau de anul trecut.
@RainOnline
@RainOnline Рік тому
@@Radu Multumesc de sfat!
@melvina9331
@melvina9331 2 роки тому
𝓟Ř𝔬𝓂𝔬𝐒ϻ 😇
@Radu
@Radu 2 роки тому
Not sure what it means... but thanks for watching!