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

⭐️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

[@Radu]

Excited about the course? I hope so :-) I put more effort into this one than usual!

[@fleckenfurz77]

Very excited indeed! Thx in advance! Thats EXACTLY what i ve been looking for! Besides: You are an amazing teacher!

[@Radu]

@@fleckenfurz77 Glad to hear that you've been looking for something like this! And thanks for the compliment :-)

[@rahulxdd]

Yes. Will there be a part 2?

[@Radu]

@@rahulxdd There will be 10 parts in total and I will post one every week.

[@ScriptRaccoon]

I *am* excited :)

[@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]

Thanks, but not a genius... Just practiced a lot... a lot :-)

[@yusufisyaku1118]

​@@Radupracticed alot until you became genius 😂.. Thank you Radu

[@Radu]

@@yusufisyaku1118 :-))

[@shivamkushwaha1029]

This channel is so so so underrated. I appreciate your efforts, Radu. Thank You for the beautiful content!

[@Radu]

Thank you 'so so so' much for watching :-)

[@sidheshwartiwari9834]

This is why I always say that Radu is highly underrated. I am lucky to know you since years.

[@Radu]

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]

@@Radu such positive attitude ❤️

[@aitorplaza2560]

one of the bests channels if you want to learn javascript. Always comes with fresh and awesome ideas.

[@Radu]

Thank you for such nice words!

[@souerico]

Just knew the chanel! It's great to see the amazing methodology that you're using to teach this series!

[@Radu]

I'm happy to hear you like it. I tried to make it a bit more special than usual :-)

[@wis6897]

This is so cool! Thanks for uploading it! I am ready for more advanced stuff!

[@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]

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]

Might be a challenge for a complete beginner, but nothing is impossible :-) You can ask what is unclear.

[@indientis6003]

@@Radu when will part 2 come out?

[@Radu]

@@indientis6003 Tomorrow!

[@GustavoSilveiraGameDev]

I loved your channel! Thank You for sharing your knowledge.

[@Radu]

Happy to hear :-)

[@iuc7254]

Am so confused why this channel doesn't have 1M+ subs?🤔.... Glad I found this🤩

[@Radu]

Ah, yes! One of the biggest mysteries in the observable universe :-)) Glad you found the channel :-)

[@aGj2fiebP3ekso7wQpnd1Lhd]

This is the best introductory course I've seen. Bravo and thank you for making it.

[@Radu]

Thank you and thanks for watching :-)

[@motielmakies631]

Wow! amazing, so much new and refreshing content! thank you so much!

[@Radu]

You're welcome :-) Stay tuned for the rest!

[@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]

:-) 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]

Thanks a lot for the video! I really appreciate how much effort you put into these videos, thanks a lot!

[@Radu]

You're welcome! Thanks for watching :-)

[@manuelantony3292]

very clear and precise!

[@Radu]

Thank you!

[@mahmoudel-sharnoby9430]

Absolutely amazing , just started and can not wait to continue

[@Radu]

Cool :-) hope you'll manage to go all the way!

[@Eternam]

waiting for the next episode, your way of teaching is amazing Radu, you make it easy. thank you very much

[@Radu]

I'll have part 2 ready next week. Thanks for watching!

[@miftify]

Dude, you should have billions of followers, your teaching is straight brilliant!

[@Radu]

Thanks :-)

[@christague2084]

Awesome video! Cannot wait to finish the whole course

[@Radu]

Hope you enjoy it! :-)

[@mazlumkoyuncu5549]

Thank you! The trigonometry part was a complete solution for randomly moving objects in my project.

[@Radu]

Awesome! :-)

[@vegettosaiyans28]

super awesome content!

[@Radu]

Thanks! Glad you like it :-)

[@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]

Thanks for watching :-) Hope you find something nice on my channel!

[@ilianos]

What was the difference between this and the 2.5 hour version?

[@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]

This is fantastic, thanks !!!

[@Radu]

Thanks! And you're welcome! :-)

[@ninjaduck3534]

Such a ballsy project! Love and admire the use of vanilla

[@Radu]

Glad you think so!

[@marcyanus1430]

Thank you for making this video!

[@Radu]

You're welcome!

[@rahulxdd]

This is awesome. Subscribed.

[@Radu]

Thanks! Welcome on board :-)

[@justwaterweight]

Cool. I am going to add this in my watch list✌️

[@Radu]

Great!

[@Frankslaboratory]

I'm ready for more 'Coding with Radu...' 🎵🎵

[@Radu]

Haha, Yes! Have you seen the extended intro? 😎

[@Frankslaboratory]

@@Radu I have seen it indeed, love it

[@mlutteral]

I'learning a lot, thanks to putting this channel out

[@Radu]

You're welcome :-)

[@salmanfariss]

This is such an amazing tutorial, instant sub!

[@Radu]

Awesome, thank you!

[@kspv2806]

Genius, thank God I found this channel

[@Radu]

I'm really happy you did too :-)

[@Shirgho]

Great tutorial series!

[@Radu]

Thanks!

[@Shirgho]

@@Radu No, Thank you!

[@daddycow8247]

came from reddit! Sick tutorial my man

[@Radu]

Welcome :-) and glad you thought it was nice!

[@ful7481]

This channel is so underrated , I wish it grows

[@Radu]

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]

Thank you so much for this!

[@Radu]

No problem :-) Thanks for watching!

[@StaMariaRock]

10 minutes watching the video and I'm happy for my decision already, really good methodology Radu

[@Radu]

Glad to hear :-) thanks for watching!

[@cryptocoinkiwi8272]

That was really damn impressive!

[@Radu]

Glad you liked it!

[@MK-bs3dq]

You really nailed it

[@Radu]

Thanks!

[@prakashchalke1708]

Wonderful video.

[@Radu]

Thank you!

[@mdashik2291]

That's was an awesome tutorial to learn NLP. bro, We wanna more videos like this

[@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]

this is awesome....✨✨❤❤😄

[@Radu]

Great :-) Will you code along?

[@silverstreetman]

Hi Radu، you are doing fantastic work. Very interesting.

[@Radu]

Hey, thanks :-)

[@charlesukanga4835]

I love you radu ❤🙏, this is the best JavaScript course ever

[@Radu]

Haha :-) thanks! I'm happy you think so.

[@palashsharma26]

Amazing I want more javascript program like that

[@Radu]

This course will keep you busy for a while, I'm sure :-)

[@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]

Happy to hear you were patient enough to watch it all :-)

[@dirantechie9411]

Nice one radu best course..... i can now improve my Javascript Skills 🔥

[@Radu]

Great :-)

[@phoenixxofficial]

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]

Are you able to follow along now? :-)

[@phoenixxofficial]

@@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]

Cool! Good luck :-)

[@aliadel1723]

i really love your channel ♥

[@Radu]

I'm glad :-)

[@llogica]

This is pleasure for my eyes :)

[@Radu]

Really? Cool :-D

[@summergua6123]

You are so creative and good at teaching! I'm kind of envy your students🤣

[@Radu]

Thank you! If you're following my videos, I guess you are my student, in a way :-)

[@hameedurrahman9056]

really excellent things ....

[@Radu]

Glad you think so!

[@user-qe4nu5sz7n]

Watched the whole video, excellent! Comment in channel support.

[@Radu]

Thanks for watching! :-)

[@robertobenedit]

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]

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]

Thank you 😊

[@Radu]

You're welcome!

[@elhamzeinodini4828]

Thanks❤

[@Radu]

No problem :-)

[@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]

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]

You’ve earned my sub

[@Radu]

Welcome aboard :-)

[@elescritoriodejasso]

Genial!!!!

[@Radu]

Thank you!

[@howl2339]

You are a mood 😄

[@Radu]

What does it mean? :-D

[@howl2339]

@@Radu It is like a state of mind, the fact that your videos are amusing and cool is beautyful, that is fantastic!

[@Radu]

Thanks :-) just stumbled upon this comment now... Phase 2 of the course starts today, btw :-)

[@anegative660]

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]

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]

@@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]

Cool :-) Experimenting with code is the best way to learn, I think!

[@javifontalva7752]

I am really excited about this project. Let's see if I can do this.

[@Radu]

You can!

[@vivektailor8607]

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]

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]

Nice course, Radu could you create the same course with explanation feed forward and back propagation on some good practical example? Thanks

[@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]

Dear Radu, please check connections of KZbin 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]

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]

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]

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]

Keep up with the good work, and leave the singing to Adele :D hehe

[@Radu]

:-)))

[@kpm25]

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]

Maybe look up linters (like ESLint), I think it can do what you want (and much more).

[@kpm25]

@@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]

@@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]

@@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]

Road names are typically segment meta-data.

[@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]

Thanks for the tips :-) hope you'll like the rest of the course as well.

[@quentinquadrat9389]

@@Radu yes they are nice! Keep going.

[@Radu]

@@quentinquadrat9389 Thanks :-) I'll try

[@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 KZbin source.

[@Radu]

Sure you can :-) Send me a link when you have it ready!

[@MsPatryQPL]

@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]

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]

🔥🔥

[@Radu]

🧯🧯

[@gzbin365]

cool

[@Radu]

Thanks!

[@tjnaz]

Man these puns are driving me nuts !! 😅

[@Radu]

I see what you did there :-D

[@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]

Hi, do you include the car.js script in the html file (before the things that use it)?

[@abdelrahman5094]

I like how you put yourself under the output tab lol

[@Radu]

Thanks! It's where I live :-|

[@mohamedaboghazal556]

❤

[@Radu]

:-)

[@surf2553]

Awesome! what is your VSCODE theme?

[@Radu]

I use 'Ice Contrast'.

[@surf2553]

@@Radu Thank you! I just discovered your tutorials tonight. I will be going through each of them! Excellent content!

[@Radu]

@@surf2553 Wow, awesome :-) They're not all excellent though :-D

[@aktanabdygaziev1186]

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]

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]

Sir can you make javascript full tutorial for beginners to advanced by developing games like this . So i can lean more about javascript

[@Radu]

I will soon start a beginner course with JavaScript and HTML canvas.

[@bennybrouwer]

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]

- 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]

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]

@@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]

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]

@@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]

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]

Can you share the code with me somehow? (Maybe on the discord linked on my channel banner?)

[@allyouneed4840]

@@Radu okay

[@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]

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]

hi there ,, at 11.36 I should see the black rect 'car' ... why not? many tx

[@Radu]

Hard to say without seeing the code... are you including the .js files in the same order as me?

[@rajivnair2717]

hi radu ,how are u showing webcam in vs code while screenrecording.how is it done

[@Radu]

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]

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]

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]

Hey After learning ml with js does we will get job. I mean people are making with python.

[@Radu]

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]

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]

Helps if I could see the code. Maybe share it on my discord server?

[@aitorplaza2560]

Hi Radu. One question, why when you move "canvas.height = window.innerHeight" inside animate() those issues are fixed? i do't get it.

[@Radu]

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]

@@Radu Thanks for the explanation, very clear. I'm waiting for the second video! Congratulations for your work!

[@Radu]

@@aitorplaza2560 Thanks for watching :-)

[@basiccoder2166]

Hi Radu, Why haven't you created this project on p5js? it would be much easier

[@Radu]

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]

it is weird when I push left or right I can moves the position of the canvas. any ideas why??

[@javifontalva7752]

fixed it. I added event.preventDefault(); into the eventListener

[@Radu]

Hard to say without seeing your code. Maybe try adding overflow:hidden; to the CSS of the body?

[@lordsaiint]

For some reason, my rectangle is not showing on the canvas.

[@Radu]

Can you share the code somehow? (like on the discord linked on my channel)

[@chisomodimmegwa3479]

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]

The 'bouncing' happens instantaneously, it doesn't have a chance to re-render (ask again if this doesn't clear things out).

[@chisomodimmegwa3479]

@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]

@@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]

@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]

@@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]

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]

I found your comment :-) Thanks! It made my day.

[@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]

There's a link to Discord on my channel banner. Feel free to post it there.

[@sagittario8796]

I'm having getContext is not a function Please help

[@Radu]

Can you share your code somehow? Hard to say what's wrong without looking at it :-)

[@sagittario8796]

@@Radu it's exactly the same as yours !!

[@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]

If you want to be a pro dev, use a year to learn JavaScript for Radu's channel🌝

[@Radu]

Do you like JavaScript or have some other preference? :-)

[@bashzilla5554]

why set "this.y -= this.speed" as opposed to "this.y = this.speed" ?

[@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]

Why don't you add spaces in your code, it seems like you want everything as squished as possible

[@Radu]

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]

@@Radu not really, but it's just not how I'm used to reading code

[@Radu]

@@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]

Radu, sunt prea prost pt asa ceva

[@Radu]

De ce zici asta? Ce stii sa faci? Ai mai programat pana acum?

[@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]

@@RainOnline Eu programez de 20 de ani... compara-te cu nivelul tau de anul trecut.

[@RainOnline]

@@Radu Multumesc de sfat!

[@melvina9331]

𝓟Ř𝔬𝓂𝔬𝐒ϻ 😇

[@Radu]

Not sure what it means... but thanks for watching!