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

⭐️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).
⭐️LECTURE 7: VISUALIZING NEURAL NETWORKS⭐️
We learn how to make a custom visualization for the car's neural network (the brain of the car). We use colors, symbols and animations to visualize the nodes, weights and biases of the network and see it change as the car is making decisions.
⭐️CODE⭐️
Github: github.com/gniziemazity/Self-... (7. Visualizing neural networks)
Use '6. Neural network' if you plan to follow along!
My website: radufromfinland.com
⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
1:28 Setting up another canvas
4:54 Drawing network structure
13:30 Styling the network
27:55 Using symbols ['🠉','🠈','🠊','🠋']
31:30 Animation

[@Radu]

What will you visualize using these techniques? :-) Next time, we'll optimize the neural network and make the car smart! Till then, here's the full course playlist: kzbin.info/aero/PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY

[@abhiseakbijaraniya2475]

"Hey, I completed your self-driving course, and I made some modifications to the network functions and various small details in the code. I'm looking for suggestions for certain parts. Could you provide your email or another contact for further communication?"

[@ChadDeveloper]

Such a genius, you even take time to reply to almost all of your comments, amazing bro. Hope your channel grows :)

[@aitorplaza2560]

Awesome as always, Radu. I can't understand why you don't have 100 times more subscriptions.

[@Radu]

Many of you guys seem to wonder the same :-D maybe someday... :-)

[@aitorplaza2560]

​@@Radu Keep up the good work, Radu. Someday you will get all the attention you deserve.

[@Radu]

@@aitorplaza2560 I honestly don't know what I would do if I'd have 100 times more viewers (=100 times more comments to respond to)

[@aitorplaza2560]

@@Radu Maybe you will a full time youtuber 🤣

[@Radu]

@@aitorplaza2560 too... separated from the real world, I think. I'll miss contact teaching in class.

[@debadityanath4398]

just discovered your channel, today, honestly i have nothing to say, the explanation and everything is just perfect. hope your channel grows really big

[@Radu]

I think you said quite a lot :-) Thank you for watching!

[@angladephil]

Simply BRILLIANT !

[@Radu]

Thanks :-)

[@bringtheasteroid]

Excellent tutorial! I appreciate the attention to aesthetics as well

[@Radu]

Glad you like it! :-)

[@sauvignonblanc5086]

It's amazing! 😎 👍🏼

[@Radu]

Thanks :-)

[@chahalpawanpreet]

That was such a cool video and a neat visualization! Thanks Radu - I've recently subscribed to your channel!

[@Radu]

Glad you liked it! Welcome to the channel :-)

[@casafurix]

sir you're literally a genius

[@Radu]

Thanks, but it's not true :-)

[@ScriptRaccoon]

The animated lineDashOffset is a really cool idea!

[@Radu]

Thanks, it's not actually my idea... It should be well known, because it is presented quite nicely in a number of places (like this: developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) but people aren't using it for some reason. You can even use it on text...

[@brunomeida1]

You are my new super hero dude. Thank you very much. I am from brasil. Dont know english very well. But the way you teach, Is great. Obrigado

[@Radu]

Always wanted to be a super hero :-D now I can finally say I am one. Yey!

[@brunomeida1]

@@Radu kk. Real life one

[@Radu]

@@brunomeida1 Haha

[@Anutosh13]

Awesome blossom

[@Radu]

Thanks :-)

[@lwandomaseti9581]

Being a self taught developer is hard on its own . Having videos and explanations like this is more than helpful they are inspiring !!

[@Radu]

I'm happy to hear :-)

[@volodyslove]

it looks so cool 😁

[@Radu]

Thanks :-))

[@williamikennanwosu]

Very impressive 💯

[@Radu]

Thanks :-)

[@michaelutech4786]

Hey Radu! I really enjoy your videos. Your tendency to visualise stuff to understand it is really nice, so is your nordic humour. Makes watching your videos enjoyable even if the topic is not something immediately interesting. Thanks for the work you're doing here, much appreciated!

[@Radu]

Thanks :-) Glad you like it! Curious what you mean by 'nordic humour' :-)) I've been here (Finland) for over 10 years now, so I guess something rubbed off on me, but not sure what :-D

[@michaelutech4786]

@@Radu I was once working with a couple of Swedish guys. They had a way not to use facial expressions ever. I never knew whether they were serious. I only ever saw them smile when I lost what I thought were drinking competitions.Was a fun time with these guys ;-) How do you cope with this crazy whether? This really demoralised me.

[@Radu]

I see this comment quite late... Well, I like skiing and the code, in general (no sweating, no insects, etc...) It can be quite dark (which I don't like), but I'm usually indoors during that time anyway.

[@JanderSilva01]

Thanks for the content Radu. Keep going

[@Radu]

Thanks for watching! :-)

[@ashishverma1382]

one of the best channel for computer science students [SUBSCRIBED]

[@Radu]

Thanks!

[@elescritoriodejasso]

Interesante!!! saludos

[@Radu]

Glad you like it!

[@nacholarreta7116]

You are a fu** genius thanks a lot for share your knowledge with us, I'm really appreciate and your explanations are really clear and with all the detail, congrats!

[@Radu]

Thank you. I put more effort than usual into this course. Glad it was worth it!

[@AtticusColdfield]

Seriously, I need this opening song on Itunes ASAP

[@Radu]

Did you know there is an extended version on the channel? :-)

[@AtticusColdfield]

@@Radu No, but now I realized my happiness extended) Get it? Extended? :)

[@Anutosh13]

Subscribed & Clicked the bell button

[@Radu]

Thanks & Thanks!

[@davidf9062]

Like many others, I wonder why there's so few views for your videos. Very good job, I love this type of coding session. Maybe you should make these with "live style", aka some errors and debugging, as Meth Meth Method did. Another great YT channel. Thanks and congrats for your great content ! I'd love to see more with this project : maybe an automatisation of the genetics, or more traffic, or better learning AI ?

[@Radu]

Thanks for watching and for the ideas :-) I did do live streams at some point but nowadays I can't find the time anymore... or, if I do find the time, it won't work for my audience, and I'll just be there coding alone :-D

[@coachtroop]

Good stuff! I am looking forward to watching both pieces a few times to digest it all better. My only suggestion, for optimization, is to pre-calculate all the values for #getNodeX for your input/outputs so that you are not calculating the same values for each loop iteration. You can essentially "memoize" the values and use a constant lookup based on your input/output's "i" (or "j") value. This is possible because left, right, and your array lengths are all constants. The only things that change are your "i" and "j" values determined by the length of their respective arrays. Im not sure how heavy the lerp calculation ends up being, but if you can save cycles to work on something else, why not, right?

[@Radu]

Nice idea! Thanks. I might teach it someday if I do something that lags without optimization!

[@suryab5319]

Thanks for the video Radu I got a question.I am a beginner by the way Why cant we use just to horixontal section of neural network nodes.Why did you create middle one?

[@Radu]

It's not something I can easily explain in a comment, but you'll find the answer if you watch lesson 2 of my currently ongoing course 'Understanding AI' :-)

[@thinksmartstudios]

Hello Sir, I've really learned a lot from your course, and followed every part of your course. And your suggestion on making the neurons change intensity according to the weighted sum (like you said at 34:44). But because I'm little weak at JavaScript (and C++ classes styles are really conflicting to me with js), could you give me any hint on how to do the same... It really does looks nice, and I really wanna do it. I just can't manage to inherit properties from Network.js. and afraid that I may break any other part of the code 😅

[@thinksmartstudios]

Hey, I did try this… can you confirm, if this is what you wanted to say. From visualiser.js I passed this values while drawing weights ctx.strokeStyle = getRGBAS(weights[i][j], inputs[i]) And a new utility function, which takes those values and does this, simply multiply the weights with the input intensity 
function getRGBAS(value, input) { const alpha = Math.abs(value) * input const R = value < 0 ? 0 : 255 const G = R //overlap red to make yellow const B = value > 0 ? 0 : 255 return "rgba(" +R+ "," +G+ "," +B+ "," +alpha+ ")"; }

[@Radu]

Yes, nice work :-) for questions like these you may want to join my Discord. Sometimes KZbin removes comments with code in them.

[@jagadeeshkumar5814]

Is the algorithm used for this project is gradient descent or any other?

[@Radu]

It's trial and error, and then a simple genetic algorithm using mutation. It's not gradient descent per se, but the mutations will tend to go in the direction of the gradient, so, if you're new to that, this might make sense as a first step.

[@chimkariweobuseh8738]

How did u get so good 😮

[@Radu]

20 years of practice...

[@chimkariweobuseh8738]

Wow, you reply to everything? That’s cool. Btw I finished your course. Off to virtual self driving car world I go!

[@Radu]

Good luck :-) I just began posting Phase 3 today.

[@prakashmohaldar9004]

Sir, can you explain what does blue and yellow color of lines shows and for negative bias shouldn't it show red color ?

[@Radu]

My color coding is similar to temperature. Yellow means positive (hot, like the sun) and blue means negative (like ice). So, a negative bias will be blue, but if you want to change the colors on your side, go ahead :-)

[@Radu]

Btw, you asked something in the neural network video, but KZbin removed the comment for some reason. I think the question is how does the for loop work even though it has neuronCounts[i+1] inside it. The reason is the for loop ends with i

[@sariputraeymiller]

Hi thank you for this excellent video, i'm following it till Visualizer, i got a Uncaught ReferenceError of 'getRGBA', can u help?

[@Radu]

Thanks for watching! Did you create the getRGBA function, moved it to utils.js and saved that file?

[@sariputraeymiller]

@@Radu yes. thx.

[@Radu]

@@sariputraeymiller no problem

[@armansaha297]

How to make perlin sound using javascript

[@Radu]

Use the web audio api and fill an audio buffer with the generated noise after dimensionality reduction...

[@armansaha297]

How to make No Man's Sky like game

[@Radu]

@@armansaha297 haven't played... but after a quick search on wikipedia I can say it's not something I could explain as a comment :D

[@armansaha297]

Radu sir, Can you please upload a video on this topic.

[@Radu]

@@armansaha297 I will add it to my list, but will take a while. Have other things I want to do before that.