title
Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning

description
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: https://www.youtube.com/channel/UC3XGlNq8O5hZlZBJlSFB4jg 💻 Code: https://github.com/gniziemazity/Self-driving-car ⭐️ 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): https://radufromfinland.com 🔗 Radu's workplace (consider applying): https://karelia.fi/en/front-page 🔗 Segment intersection (Math and JavaScript code): https://youtu.be/fHOLQJo0FjQ 🔗 Visualizing a neural network in JavaScript: https://youtu.be/lok3RVBwSqE 🔗 Visualizer code: https://radufromfinland.com/projects/selfdrivingcar/visualizer.js 🔗 Drawing random color cars in JavaScript: https://youtu.be/SL6PfDpSjao 🎉 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: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning', 'heatmap': [{'end': 9145.601, 'start': 9066.101, 'weight': 1}], 'summary': 'Learn to build a self-driving car simulation in javascript without libraries, covering topics like neural networks, modern javascript techniques, and simple physics for car movement. includes implementing car movement and controls, car functionality and road detection, collision and damage detection, traffic simulation, using neural networks for car control, visualization of car behavior, and developing car ai for independent decision-making.', 'chapters': [{'end': 253.996, 'segs': [{'end': 23.068, 'src': 'embed', 'start': 0.109, 'weight': 0, 'content': [{'end': 8.556, 'text': 'In this course, you will learn how to build a self-driving car simulation by making every component yourself with no libraries.', 'start': 0.109, 'duration': 8.447}, {'end': 12.299, 'text': 'This course is a great way to learn about neural networks.', 'start': 9.057, 'duration': 3.242}, {'end': 15.682, 'text': 'You will also learn about modern JavaScript techniques.', 'start': 12.94, 'duration': 2.742}, {'end': 17.444, 'text': 'Radu teaches this course.', 'start': 16.222, 'duration': 1.222}, {'end': 23.068, 'text': 'He has a PhD in computer science and is one of the more creative tech YouTubers out there.', 'start': 18.144, 'duration': 4.924}], 'summary': 'Learn to build a self-driving car simulation with neural networks and modern javascript techniques, taught by radu, a phd holder in computer science.', 'duration': 22.959, 'max_score': 0.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI109.jpg'}, {'end': 191.354, 'src': 'embed', 'start': 150.446, 'weight': 1, 'content': [{'end': 153.21, 'text': "Then we'll optimize the brain by trial and error.", 'start': 150.446, 'duration': 2.764}, {'end': 160.293, 'text': 'Yeah, to keep things simple, we just try randomly generating brains until we get something that works.', 'start': 154.249, 'duration': 6.044}, {'end': 165.476, 'text': "We'll parallelize this step and use hundreds of cars at once to save time.", 'start': 161.073, 'duration': 4.403}, {'end': 171.3, 'text': "By the way, this is something you can't do with real hardware unless you're really, really rich.", 'start': 166.517, 'duration': 4.783}, {'end': 176.303, 'text': "And that's why car companies use simulations to train their neural networks as well.", 'start': 171.82, 'duration': 4.483}, {'end': 181.226, 'text': "I'll also teach you a basic genetic algorithm to optimize faster.", 'start': 177.683, 'duration': 3.543}, {'end': 184.353, 'text': "but don't expect anything too fancy.", 'start': 182.372, 'duration': 1.981}, {'end': 191.354, 'text': 'This entire system is complex, but I made it so that each component is relatively simple in and of itself.', 'start': 184.953, 'duration': 6.401}], 'summary': 'Optimizing the brain through trial and error using genetic algorithms and parallelization with hundreds of cars to save time.', 'duration': 40.908, 'max_score': 150.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI150446.jpg'}, {'end': 253.996, 'src': 'embed', 'start': 210.188, 'weight': 6, 'content': [{'end': 217.792, 'text': "I'll teach you many modern JavaScript techniques, so this course is perfect if you want to become a better coder as well as a machine learning expert.", 'start': 210.188, 'duration': 7.604}, {'end': 226.676, 'text': "Now, JavaScript is not the best choice when doing artificial intelligence, but since we're not using any libraries, it doesn't really matter.", 'start': 219.292, 'duration': 7.384}, {'end': 234.812, 'text': 'If you want to learn these in a more useful language like Python, then come study at Karelia University of Applied Sciences.', 'start': 227.89, 'duration': 6.922}, {'end': 237.992, 'text': 'There I teach this same thing in Python as well.', 'start': 235.432, 'duration': 2.56}, {'end': 242.413, 'text': 'And we also study machine learning libraries and even use hardware components.', 'start': 238.392, 'duration': 4.021}, {'end': 246.554, 'text': 'But now start your engines because the course is about to start.', 'start': 243.314, 'duration': 3.24}, {'end': 253.996, 'text': "I'll first teach you how to implement the car driving mechanics.", 'start': 250.895, 'duration': 3.101}], 'summary': 'Learn modern javascript techniques for coding and machine learning, also offered in python at karelia university with machine learning libraries and hardware components.', 'duration': 43.808, 'max_score': 210.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI210188.jpg'}], 'start': 0.109, 'title': 'Building and optimizing self-driving car simulations', 'summary': 'Covers building a self-driving car simulation in javascript without libraries, including topics like neural networks, modern javascript techniques, and simple physics for car movement. it also discusses creating and visualizing a neural network, optimizing it through trial and error, using hundreds of cars in parallel, and the limitations of real hardware for such tasks.', 'chapters': [{'end': 104.186, 'start': 0.109, 'title': 'Self-driving car simulation in javascript', 'summary': 'Introduces a course on building a self-driving car simulation without libraries, covering topics such as neural networks, modern javascript techniques, and simple physics for car movement.', 'duration': 104.077, 'highlights': ['The course covers building a self-driving car simulation without using any libraries, focusing on implementing simple physics, creating a road, simulating sensors, and implementing collision detection.', 'The instructor, Radu, holds a PhD in computer science and provides a visual explanation of the math involved in the course.', 'The course also delves into using neural networks and modern JavaScript techniques for implementing the self-driving car simulation.']}, {'end': 253.996, 'start': 105.387, 'title': 'Neural network simulation and optimization', 'summary': 'Covers creating and visualizing a neural network with javascript, optimizing it by trial and error, using hundreds of cars in parallel, and the limitations of real hardware for such tasks.', 'duration': 148.609, 'highlights': ['The course teaches creating and visualizing a neural network, optimizing it by trial and error, and using hundreds of cars in parallel to save time.', 'The instructor emphasizes the limitations of real hardware for tasks like optimizing neural networks, suggesting the use of simulations instead.', 'The course focuses on using JavaScript to teach modern techniques, making it suitable for those aspiring to become better coders and machine learning experts.', 'The instructor mentions the option to study the same material in Python at Karelia University of Applied Sciences, where machine learning libraries and hardware components are also utilized.', 'The initial section of the course involves implementing car driving mechanics using JavaScript, offering a practical and hands-on approach to learning.']}], 'duration': 253.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI109.jpg', 'highlights': ['The course covers building a self-driving car simulation without using any libraries, focusing on implementing simple physics, creating a road, simulating sensors, and implementing collision detection.', 'The course teaches creating and visualizing a neural network, optimizing it by trial and error, and using hundreds of cars in parallel to save time.', 'The instructor emphasizes the limitations of real hardware for tasks like optimizing neural networks, suggesting the use of simulations instead.', 'The course also delves into using neural networks and modern JavaScript techniques for implementing the self-driving car simulation.', 'The initial section of the course involves implementing car driving mechanics using JavaScript, offering a practical and hands-on approach to learning.', 'The instructor, Radu, holds a PhD in computer science and provides a visual explanation of the math involved in the course.', 'The course focuses on using JavaScript to teach modern techniques, making it suitable for those aspiring to become better coders and machine learning experts.', 'The instructor mentions the option to study the same material in Python at Karelia University of Applied Sciences, where machine learning libraries and hardware components are also utilized.']}, {'end': 1158.375, 'segs': [{'end': 315.235, 'src': 'embed', 'start': 254.616, 'weight': 0, 'content': [{'end': 256.957, 'text': 'You learn to make a car that moves like this.', 'start': 254.616, 'duration': 2.341}, {'end': 260.348, 'text': "It's not really that hard, you'll see.", 'start': 258.226, 'duration': 2.122}, {'end': 266.816, 'text': "I'll refresh your memory with some basic physics and trigonometry, and you'll be able to code this in no time.", 'start': 261.29, 'duration': 5.526}, {'end': 270.685, 'text': 'We begin with this simple project setup.', 'start': 268.464, 'duration': 2.221}, {'end': 279.268, 'text': "We have three files right here, index.html, main.js, and style.css, and they're all empty for now.", 'start': 270.905, 'duration': 8.363}, {'end': 283.29, 'text': "And I'm using Visual Studio Code to write this.", 'start': 280.149, 'duration': 3.141}, {'end': 291.433, 'text': 'And on the right, I have Google Chrome, and you need to have the developer tools open there.', 'start': 283.95, 'duration': 7.483}, {'end': 293.014, 'text': "It's really important.", 'start': 292.074, 'duration': 0.94}, {'end': 302.505, 'text': 'so, if you plan to follow along, have a similar setup, you can use another editor if you want, but i recommend this visual studio code.', 'start': 294.278, 'duration': 8.227}, {'end': 309.29, 'text': "nowadays, let's begin with basic html in the head.", 'start': 302.505, 'duration': 6.785}, {'end': 315.235, 'text': "i'm going to write a title for this and it's going to be self-driving car.", 'start': 309.29, 'duration': 5.945}], 'summary': 'Learn to create a self-driving car using basic html, javascript, and css in visual studio code and google chrome.', 'duration': 60.619, 'max_score': 254.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI254616.jpg'}, {'end': 415.992, 'src': 'embed', 'start': 387.58, 'weight': 4, 'content': [{'end': 393.563, 'text': "So let's go to this style CSS next and write some styles.", 'start': 387.58, 'duration': 5.983}, {'end': 405.024, 'text': "I will remove the margin for the body and let's make the body have a dark gray background, overflow to hidden,", 'start': 394.597, 'duration': 10.427}, {'end': 407.986, 'text': "and I'm gonna use text align to center for now.", 'start': 405.024, 'duration': 2.962}, {'end': 415.992, 'text': "Overflow is important, otherwise we might get the scroll bar coming if the canvas is too big and I don't want that.", 'start': 409.247, 'duration': 6.745}], 'summary': 'Css styles added to body: margin removed, dark gray background, overflow hidden, and text aligned to center.', 'duration': 28.412, 'max_score': 387.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI387580.jpg'}, {'end': 541.66, 'src': 'embed', 'start': 507.896, 'weight': 5, 'content': [{'end': 513.317, 'text': "So I'm going to have a reference to this canvas context right here in the CTX.", 'start': 507.896, 'duration': 5.421}, {'end': 519.498, 'text': "And it's going to contain all the methods we need to draw the things that we need to draw in this project.", 'start': 513.957, 'duration': 5.541}, {'end': 524.579, 'text': 'And if we would have a car, we would say something like this.', 'start': 520.957, 'duration': 3.622}, {'end': 539.858, 'text': "Let's get the car at for example, 100X, 100Y, and the car maybe has a 30 width and 50 height.", 'start': 525.179, 'duration': 14.679}, {'end': 541.66, 'text': 'All of these are in pixels.', 'start': 540.419, 'duration': 1.241}], 'summary': 'Using canvas context to draw objects like a car with specific dimensions in pixels.', 'duration': 33.764, 'max_score': 507.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI507896.jpg'}, {'end': 752.559, 'src': 'embed', 'start': 680.078, 'weight': 1, 'content': [{'end': 687.901, 'text': "and if i'm going to save this and refresh the page, you can see the car there, or at least a black rectangle.", 'start': 680.078, 'duration': 7.823}, {'end': 690.242, 'text': 'for now, the car is here at 100, 100.', 'start': 687.901, 'duration': 2.341}, {'end': 703.907, 'text': 'so on computer screens, the y-axis actually goes downwards and the zero zero point relative to this canvas is actually right up here.', 'start': 690.242, 'duration': 13.665}, {'end': 706.147, 'text': 'Now, this is really boring as such.', 'start': 704.307, 'duration': 1.84}, {'end': 711.428, 'text': "I'm going to teach you next how to move the car using the keyboard arrow keys.", 'start': 706.227, 'duration': 5.201}, {'end': 722.89, 'text': "So for now, let's just pretend that we have here some controls, like this controls is equal to new controls.", 'start': 712.208, 'duration': 10.682}, {'end': 728.351, 'text': 'And let me link a new file here.', 'start': 724.59, 'duration': 3.761}, {'end': 740.411, 'text': 'in index, controls.js, and also create controls.js.', 'start': 730.385, 'duration': 10.026}, {'end': 744.354, 'text': 'And we will do a similar thing as previously.', 'start': 741.212, 'duration': 3.142}, {'end': 748.837, 'text': 'So we need a class for these controls and the constructor.', 'start': 744.634, 'duration': 4.203}, {'end': 752.559, 'text': 'The controls object will have four different attributes.', 'start': 749.517, 'duration': 3.042}], 'summary': 'Teaching how to move a car on a computer screen using keyboard arrow keys.', 'duration': 72.481, 'max_score': 680.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI680078.jpg'}, {'end': 826.519, 'src': 'embed', 'start': 787.871, 'weight': 8, 'content': [{'end': 791.994, 'text': "So I'm going to call here addKeyboardListeners.", 'start': 787.871, 'duration': 4.123}, {'end': 798.78, 'text': 'And this is going to be a method inside of the controls class, like so.', 'start': 792.935, 'duration': 5.845}, {'end': 804.925, 'text': 'The reason I put here this hashtag in front is because this is a private method.', 'start': 799.48, 'duration': 5.445}, {'end': 808.728, 'text': "You can't access this from outside of this controls class.", 'start': 805.125, 'duration': 3.603}, {'end': 809.809, 'text': "And you shouldn't.", 'start': 809.168, 'duration': 0.641}, {'end': 811.53, 'text': "It's its own responsibility.", 'start': 809.929, 'duration': 1.601}, {'end': 826.519, 'text': 'So how does this addKeyboardListeners look like? Well, we will add a key down event to the document and set this to be equal to this arrow function.', 'start': 811.89, 'duration': 14.629}], 'summary': 'Method addkeyboardlisteners in controls class is a private method for handling key down events.', 'duration': 38.648, 'max_score': 787.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI787871.jpg'}, {'end': 1034.731, 'src': 'embed', 'start': 1000.437, 'weight': 2, 'content': [{'end': 1005.92, 'text': "So it's a difference in how these two type of functions work in JavaScript.", 'start': 1000.437, 'duration': 5.483}, {'end': 1008.281, 'text': "And it's convenient to have it in this way.", 'start': 1006.24, 'duration': 2.041}, {'end': 1012.265, 'text': "Now controls are triggering, but let's move the car with them.", 'start': 1008.982, 'duration': 3.283}, {'end': 1019.353, 'text': "So I'm going to go to car.js and we are going to write here an update method.", 'start': 1013.126, 'duration': 6.227}, {'end': 1030.867, 'text': "This update method is going to check if the controls say forward, let's just move the car upward.", 'start': 1020.336, 'duration': 10.531}, {'end': 1034.731, 'text': 'So that means y minus equals two.', 'start': 1031.088, 'duration': 3.643}], 'summary': 'Javascript functions work differently. update method moves car with controls.', 'duration': 34.294, 'max_score': 1000.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1000437.jpg'}, {'end': 1103.282, 'src': 'embed', 'start': 1068.61, 'weight': 3, 'content': [{'end': 1084.996, 'text': "here I'm going to update the car and then I'm going to draw the car using this code we had previously like this and call requestAnimationFrame with animate like so", 'start': 1068.61, 'duration': 16.386}, {'end': 1091.079, 'text': 'requestAnimationFrame calls the animate method again and again, many times per second.', 'start': 1086.257, 'duration': 4.822}, {'end': 1094.06, 'text': 'It gives the illusion of movement that we want.', 'start': 1091.679, 'duration': 2.381}, {'end': 1103.282, 'text': 'Now we can save the file, refresh the page, and when I press down, something happens.', 'start': 1095.017, 'duration': 8.265}], 'summary': 'Updating car animation code to create illusion of movement.', 'duration': 34.672, 'max_score': 1068.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1068610.jpg'}], 'start': 254.616, 'title': 'Creating a self-driving car interface and implementing keyboard controls', 'summary': 'Covers creating a self-driving car interface using html, css, and javascript, and implementing keyboard controls for car movement. it involves setting up project files, detailing coding processes, and addressing issues related to drawing and screen resizing.', 'chapters': [{'end': 315.235, 'start': 254.616, 'title': 'Self-driving car project', 'summary': 'Discusses creating a self-driving car using basic physics and trigonometry, with a project setup involving three files: index.html, main.js, and style.css, and the use of visual studio code for coding.', 'duration': 60.619, 'highlights': ['The project setup involves three files: index.html, main.js, and style.css, and the use of Visual Studio Code for coding.', 'Basic physics and trigonometry are used to create a self-driving car.', "The title for the project is 'self-driving car'."]}, {'end': 711.428, 'start': 315.235, 'title': 'Building self-driving car interface', 'summary': 'Details the process of building a self-driving car interface using html, css, and javascript, including creating and styling a canvas, setting its dimensions, and defining and drawing a car object.', 'duration': 396.193, 'highlights': ['Creating and styling a canvas', 'Setting canvas dimensions and drawing a car object', 'Teaching how to move the car using keyboard arrow keys']}, {'end': 1158.375, 'start': 712.208, 'title': 'Implementing keyboard controls for car movement', 'summary': "Explains how to implement keyboard controls for car movement in a web application, detailing the process of creating controls, adding keyboard listeners, understanding arrow function notation, updating the car's position based on control inputs, and fixing issues related to drawing and screen resizing.", 'duration': 446.167, 'highlights': ['The controls object will have four different attributes, including attributes for going forward, left, right, and reverse, initially set to false.', 'The addKeyboardListeners method is a private method inside the controls class and is responsible for handling key press and release events.', "The arrow function notation is used to ensure that the 'this' keyword refers to the controls object, allowing for proper function execution.", "The update method in the car.js file checks the controls to determine car movement, adjusting the car's position based on the control inputs.", 'The animate function is defined in the main.js file to update and draw the car, utilizing requestAnimationFrame to create the illusion of movement.']}], 'duration': 903.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI254616.jpg', 'highlights': ['The project setup involves three files: index.html, main.js, and style.css, and the use of Visual Studio Code for coding.', 'The controls object will have four different attributes, including attributes for going forward, left, right, and reverse, initially set to false.', "The update method in the car.js file checks the controls to determine car movement, adjusting the car's position based on the control inputs.", 'The animate function is defined in the main.js file to update and draw the car, utilizing requestAnimationFrame to create the illusion of movement.', 'Creating and styling a canvas', 'Setting canvas dimensions and drawing a car object', 'Teaching how to move the car using keyboard arrow keys', 'Basic physics and trigonometry are used to create a self-driving car.', 'The addKeyboardListeners method is a private method inside the controls class and is responsible for handling key press and release events.', "The title for the project is 'self-driving car'."]}, {'end': 2380.717, 'segs': [{'end': 1228.343, 'src': 'embed', 'start': 1190.339, 'weight': 0, 'content': [{'end': 1195.063, 'text': "Okay, problem now is that this doesn't move like a car at all.", 'start': 1190.339, 'duration': 4.724}, {'end': 1196.725, 'text': 'We need to work on this.', 'start': 1195.524, 'duration': 1.201}, {'end': 1201.549, 'text': "Cars don't move so that you press on something and then immediately stop.", 'start': 1197.125, 'duration': 4.424}, {'end': 1211.958, 'text': "I'm going to go to the car constructor here and give the car a speed attribute and an acceleration.", 'start': 1202.129, 'duration': 9.829}, {'end': 1215.108, 'text': 'value like this.', 'start': 1213.226, 'duration': 1.882}, {'end': 1228.343, 'text': 'and here, instead of changing the y value on forward, we are going to say that the speed will increase by the acceleration, like this,', 'start': 1215.108, 'duration': 13.235}], 'summary': 'Improving car movement by adding speed and acceleration attributes.', 'duration': 38.004, 'max_score': 1190.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1190339.jpg'}, {'end': 1303.899, 'src': 'embed', 'start': 1261.016, 'weight': 1, 'content': [{'end': 1276.492, 'text': "So I'm going to go here and say max speed equals to something like three and the friction of let's say 0.05 like this.", 'start': 1261.016, 'duration': 15.476}, {'end': 1291.01, 'text': "And in the update method, I'm going to move here and say if the speed is more than this max speed, this speed becomes max speed.", 'start': 1277.213, 'duration': 13.797}, {'end': 1292.231, 'text': 'We are capping it.', 'start': 1291.41, 'duration': 0.821}, {'end': 1303.899, 'text': 'The same if the speed is less than minus this max speed, but in reverse, I want the car to be not as fast.', 'start': 1294.212, 'duration': 9.687}], 'summary': 'Setting max speed to 3 with 0.05 friction, capping speed in update method.', 'duration': 42.883, 'max_score': 1261.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1261016.jpg'}, {'end': 1518.875, 'src': 'embed', 'start': 1489.641, 'weight': 2, 'content': [{'end': 1498.025, 'text': 'I mean, by the end of this course, you will have a self-driving car, no matter if it moves like now or if we implement better physics into it.', 'start': 1489.641, 'duration': 8.384}, {'end': 1512.565, 'text': 'Now, if I refresh and zoom out a bit now, if I press left and right, the car moves in a very, very funny, non-realistic way.', 'start': 1499.079, 'duration': 13.486}, {'end': 1518.875, 'text': 'but this is actually how cars move in some games, for example.', 'start': 1512.565, 'duration': 6.31}], 'summary': 'The course promises to build a self-driving car, with room for physics improvement.', 'duration': 29.234, 'max_score': 1489.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1489641.jpg'}, {'end': 1779.005, 'src': 'embed', 'start': 1743.936, 'weight': 3, 'content': [{'end': 1746.477, 'text': 'So unit circle has a radius of one.', 'start': 1743.936, 'duration': 2.541}, {'end': 1749.778, 'text': 'The sine is between minus one and one.', 'start': 1747.057, 'duration': 2.721}, {'end': 1753.88, 'text': 'So we need to scale this by the value of the speed as well.', 'start': 1749.918, 'duration': 3.962}, {'end': 1762.184, 'text': 'And then for y, we do the same thing, but with the cosine here, according to the unit circle.', 'start': 1754.24, 'duration': 7.944}, {'end': 1764.465, 'text': "Now we don't need this anymore.", 'start': 1762.444, 'duration': 2.021}, {'end': 1775.443, 'text': 'I can save the file, refresh the page, rotate to the left, Press down and look at that.', 'start': 1766.366, 'duration': 9.077}, {'end': 1779.005, 'text': 'The car is moving properly.', 'start': 1776.563, 'duration': 2.442}], 'summary': 'Unit circle with radius one, using sine and cosine for scaling, results in proper movement of the car.', 'duration': 35.069, 'max_score': 1743.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1743936.jpg'}, {'end': 2014.602, 'src': 'embed', 'start': 1939.828, 'weight': 4, 'content': [{'end': 1948.333, 'text': "I'm going to cut it and the method is going to be called move, because that's what this is doing.", 'start': 1939.828, 'duration': 8.505}, {'end': 1956.418, 'text': "it's moving the car according to the controls and the move method is going to be a private method.", 'start': 1948.333, 'duration': 8.085}, {'end': 1963.682, 'text': 'it has the hashtag there and i paste the code that we had previously in here.', 'start': 1956.418, 'duration': 7.264}, {'end': 1969.966, 'text': 'i save this refresh and everything still works as previously.', 'start': 1963.682, 'duration': 6.284}, {'end': 1973.133, 'text': "I'll show you how to do the road next.", 'start': 1970.791, 'duration': 2.342}, {'end': 1990.449, 'text': 'So in index.html, we are going to say here that we include road.js, a new file that we have to also create here, road.js, like this.', 'start': 1973.994, 'duration': 16.455}, {'end': 1995.394, 'text': 'And in here, we are going to start to write our road class.', 'start': 1991.19, 'duration': 4.204}, {'end': 2008.779, 'text': 'So very similar as before, we have a constructor here and I want the roads to be centered around an X value and have a width.', 'start': 1997.412, 'duration': 11.367}, {'end': 2014.602, 'text': 'Now these are going to be attributes that the road should remember.', 'start': 2009.959, 'duration': 4.643}], 'summary': 'Code demonstration of creating a move method and road class with specific attributes.', 'duration': 74.774, 'max_score': 1939.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1939828.jpg'}], 'start': 1159.116, 'title': 'Implementing car movement and controls', 'summary': 'Details implementing car movement and controls, adding speed and acceleration attributes, capping maximum speed, introducing friction, implementing basic physics, handling speed, friction, and direction controls, and implementing car movement and rotation using the unit circle, code refactoring, creating a road class, and drawing the road with multiple lanes.', 'chapters': [{'end': 1331.044, 'start': 1159.116, 'title': 'Implementing car movement and controls', 'summary': 'Details the process of implementing car movement and controls, including adding speed and acceleration attributes, capping the maximum speed, and introducing friction to the movement.', 'duration': 171.928, 'highlights': ['The car is given a speed attribute and an acceleration value to control its movement.', 'The maximum speed is capped at 3 units, and a friction of 0.05 is implemented to prevent the car from moving too fast.', 'The speed is adjusted based on the acceleration and is capped to prevent it from exceeding the maximum speed.']}, {'end': 1573.955, 'start': 1331.664, 'title': 'Implementing basic physics in car movement', 'summary': 'Discusses implementing basic physics in car movement, including handling speed, friction, and direction controls to ensure realistic and improved movement, while emphasizing the iterative and progressive approach to system development.', 'duration': 242.291, 'highlights': ['Implementing basic physics in car movement', 'Adjusting speed based on friction', 'Addressing constant movement and friction issue', 'Progressive refinement of controls', 'Ensuring realistic and improved movement']}, {'end': 1877.746, 'start': 1573.955, 'title': 'Implementing car movement and rotation', 'summary': 'Explains the implementation of car movement and rotation using the unit circle, covering rotation, translation, and control flipping, resulting in a properly functioning car movement and rotation in a canvas context.', 'duration': 303.791, 'highlights': ['The unit circle is used to make rotations and implement car movement, with x and y coordinates being calculated based on the sine and cosine of the angle, resulting in proper movement of the car.', 'The canvas context is utilized to save, translate, and rotate, enabling the implementation of easy rotations centered at a specified point, preventing infinite series of translations and rotations during animation.', 'The speed-based control flipping ensures that the car moves in the correct direction and rotates appropriately, with a calculated flip value used to adjust controls for forward and backward movements.']}, {'end': 2380.717, 'start': 1878.587, 'title': 'Code refactoring and road creation', 'summary': 'Discusses refactoring code by creating a separate method, implementing a road class with attributes, and drawing the road with multiple lanes using linear interpolation.', 'duration': 502.13, 'highlights': ['Implementing a road class with attributes such as width and number of lanes, defaulting to 3.', 'Drawing the road with multiple lanes using linear interpolation.', 'Refactoring the code by creating a separate method for moving the car.']}], 'duration': 1221.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI1159116.jpg', 'highlights': ['Implementing car movement with speed and acceleration attributes', 'Introducing friction to cap maximum speed at 3 units', 'Implementing basic physics for realistic and improved movement', 'Using the unit circle for car movement and rotation', 'Creating a road class with multiple lanes and drawing the road', 'Refactoring code by creating a separate method for moving the car']}, {'end': 4197.161, 'segs': [{'end': 2481.971, 'src': 'embed', 'start': 2438.729, 'weight': 1, 'content': [{'end': 2442.131, 'text': 'we have three lanes on our road.', 'start': 2438.729, 'duration': 3.402}, {'end': 2460.302, 'text': "I'll move this function now in a utils file, so let me create it utils.js, paste it here, save the file, go to index.html,", 'start': 2442.131, 'duration': 18.171}, {'end': 2465.839, 'text': 'include it like this and now, if I refresh, everything still works.', 'start': 2460.302, 'duration': 5.537}, {'end': 2472.812, 'text': 'Let me go next to road.js and add dashes to the middle lines, like so.', 'start': 2466.841, 'duration': 5.971}, {'end': 2481.971, 'text': "I'm going to check if i is greater than zero and less than this lane count like this.", 'start': 2473.988, 'duration': 7.983}], 'summary': 'The road has three lanes, and functions are being moved to a utils file and modified in the road.js file.', 'duration': 43.242, 'max_score': 2438.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI2438729.jpg'}, {'end': 2549.337, 'src': 'embed', 'start': 2516.844, 'weight': 4, 'content': [{'end': 2520.749, 'text': "let's test also with the lane count of four just to see if it works.", 'start': 2516.844, 'duration': 3.905}, {'end': 2527.589, 'text': "It's quite nice, but you can see the car is off center now.", 'start': 2523.848, 'duration': 3.741}, {'end': 2538.333, 'text': 'I would like it to be on a lane, right? So it would be useful to have a method that tells us what is the center of a given lane.', 'start': 2527.889, 'duration': 10.444}, {'end': 2539.333, 'text': "Let's do it.", 'start': 2538.733, 'duration': 0.6}, {'end': 2545.696, 'text': 'GetLaneCenter with a given index.', 'start': 2542.554, 'duration': 3.142}, {'end': 2549.337, 'text': 'So this will start from left to right, starting at zero.', 'start': 2545.956, 'duration': 3.381}], 'summary': 'Testing with a lane count of four, aiming to find the center of a given lane.', 'duration': 32.493, 'max_score': 2516.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI2516844.jpg'}, {'end': 3139.989, 'src': 'embed', 'start': 3109.978, 'weight': 2, 'content': [{'end': 3112.843, 'text': "And we're gonna be using the car properties to update it.", 'start': 3109.978, 'duration': 2.865}, {'end': 3121.432, 'text': "So let's store here the car and other attributes will be the ray count.", 'start': 3115.146, 'duration': 6.286}, {'end': 3126.596, 'text': 'So our sensor will cast rays in different directions.', 'start': 3122.192, 'duration': 4.404}, {'end': 3129.939, 'text': "And let's just have three of these rays for now.", 'start': 3127.097, 'duration': 2.842}, {'end': 3133.764, 'text': 'and then the ray length.', 'start': 3130.942, 'duration': 2.822}, {'end': 3139.989, 'text': "so usually sensors like this have a range after which they don't work anymore.", 'start': 3133.764, 'duration': 6.225}], 'summary': 'Using car properties to cast three rays in different directions for sensor testing.', 'duration': 30.011, 'max_score': 3109.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI3109978.jpg'}, {'end': 3644.929, 'src': 'embed', 'start': 3614.099, 'weight': 0, 'content': [{'end': 3615.24, 'text': 'So now it works.', 'start': 3614.099, 'duration': 1.141}, {'end': 3617.161, 'text': 'No, no problems.', 'start': 3615.84, 'duration': 1.321}, {'end': 3619.503, 'text': 'And we got it to work.', 'start': 3618.482, 'duration': 1.021}, {'end': 3625.248, 'text': 'We needed to do a little bit of more thinking right here because of this division by zero.', 'start': 3619.723, 'duration': 5.525}, {'end': 3628.69, 'text': "Let's try with more arrays to see if that still works.", 'start': 3625.988, 'duration': 2.702}, {'end': 3629.771, 'text': 'Maybe five.', 'start': 3629.071, 'duration': 0.7}, {'end': 3644.929, 'text': 'Okay, nice, now, before we get them to work to actually detect that there are some road borders here, i want to refactor this a little bit.', 'start': 3631.473, 'duration': 13.456}], 'summary': 'Successfully resolved division by zero issue and tested with more arrays, achieving road border detection.', 'duration': 30.83, 'max_score': 3614.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI3614099.jpg'}, {'end': 3830.254, 'src': 'embed', 'start': 3802.422, 'weight': 3, 'content': [{'end': 3807.966, 'text': "But it's good to consider multiple intersections anyway, especially because later we'll have traffic.", 'start': 3802.422, 'duration': 5.544}, {'end': 3811.048, 'text': "And we'll handle that using this same strategy as well.", 'start': 3808.346, 'duration': 2.702}, {'end': 3816.77, 'text': "What we'll do is find all these touches and then keep the closest one to the sensor.", 'start': 3811.688, 'duration': 5.082}, {'end': 3820.631, 'text': 'And that will be our reading in the same way that the real sensor would work.', 'start': 3816.83, 'duration': 3.801}, {'end': 3825.692, 'text': "So let's see where this array touches any borders.", 'start': 3821.391, 'duration': 4.301}, {'end': 3830.254, 'text': 'These touches is going to be an empty array.', 'start': 3826.553, 'duration': 3.701}], 'summary': 'Identifying closest intersection to sensor for traffic handling.', 'duration': 27.832, 'max_score': 3802.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI3802422.jpg'}], 'start': 2380.717, 'title': 'Implementing car functionality and road detection', 'summary': 'Covers creating utility functions, lane center calculation, road border detection, adding sensors to the car, adjusting car sensor angle, and visualizing road borders. it delves into methods for lane center calculation, border detection using arrays, and car sensor angle adjustment.', 'chapters': [{'end': 2516.844, 'start': 2380.717, 'title': 'Creating utility function and implementing in project', 'summary': 'Discusses creating a utility function for use in multiple projects, moving the function to a utils file, and implementing it in the project, including adding dashes to middle lines and setting line dash based on lane count.', 'duration': 136.127, 'highlights': ['Creating a utility function for use in multiple projects', 'Moving the function to a utils file', 'Implementing the function in the project and adding dashes to middle lines']}, {'end': 2698.698, 'start': 2516.844, 'title': 'Lane center calculation', 'summary': 'Discusses the implementation of a method to calculate the center of a given lane, with the ability to place the car on different lanes, and the use of the minimum function to prevent the car from going beyond the available lanes.', 'duration': 181.854, 'highlights': ["A method 'GetLaneCenter' is implemented to calculate the center of a given lane, allowing the car to be placed on different lanes.", 'The use of the minimum function to prevent the car from going beyond the available lanes is demonstrated.', "The chapter also highlights the adjustment made to the lane count, emphasizing the car's positioning and the impact on its visibility on the screen."]}, {'end': 3071.559, 'start': 2699.599, 'title': 'Road border detection and collision', 'summary': "Explains the implementation of road border detection using arrays, drawing the borders, and creating a camera effect following the car's movement.", 'duration': 371.96, 'highlights': ['Implementation of road border detection using arrays', 'Drawing of road borders for consistency', "Creation of a camera effect following the car's movement"]}, {'end': 3463.134, 'start': 3073.82, 'title': 'Adding sensors to car', 'summary': 'Discusses adding sensors to the car by including sensor.js in index.html, defining the sensor constructor, updating the sensor properties, and drawing the sensor with rays in different directions.', 'duration': 389.314, 'highlights': ['Defining the sensor constructor to take the car as an argument and store car properties, ray count, and ray length.', 'Creating an update method to populate rays in different directions and draw the sensor with yellow rays.', "Incorporating the sensor in the car constructor and updating the sensor in the car's update method."]}, {'end': 3679.016, 'start': 3463.794, 'title': 'Car sensor angle adjustment', 'summary': 'Discusses adjusting the car sensor angle, utilizing gyroscopic technology, fixing issues with ray count, and refactoring the code for better organization and readability.', 'duration': 215.222, 'highlights': ['The chapter discusses adjusting the car sensor angle and mentions the importance of having the sensor rotate with the car, potentially utilizing gyroscopic technology for this purpose.', 'The speaker demonstrates a simple fix for the issue by adding the ray angle plus the car angle, resulting in the sensor moving as expected.', 'An experiment is conducted by adjusting the values for the number of segments and their length, leading to the observation of numerous rays being emitted from the sensor.', "The speaker further experiments with the sensor's range, spreading the rays in all directions and observing the effects of different angles and ray counts, identifying and addressing the issue of division by zero when the ray count is set to one.", "The chapter concludes with the speaker refactoring the code by creating a private method 'cast race' to simplify the update method and enhance code organization and readability."]}, {'end': 4197.161, 'start': 3679.536, 'title': 'Road borders detection', 'summary': 'Discusses the implementation of road borders detection using sensor.js, including passing road borders to the update method, defining the getreading method to detect road borders, and visualizing the readings in the draw method.', 'duration': 517.625, 'highlights': ['Implementing the getReading method to detect road borders by finding all touches and keeping the closest one to the sensor.', 'Using modern JavaScript methods such as array map and math minimum to efficiently handle and process data.', 'Visualizing the readings in the draw method by representing the readings as yellow segments and visualizing the continuation of the line.']}], 'duration': 1816.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI2380717.jpg', 'highlights': ['Implementation of road border detection using arrays', 'Creating a utility function for use in multiple projects', 'Defining the sensor constructor to take the car as an argument and store car properties, ray count, and ray length', 'Implementing the getReading method to detect road borders by finding all touches and keeping the closest one to the sensor', "A method 'GetLaneCenter' is implemented to calculate the center of a given lane, allowing the car to be placed on different lanes"]}, {'end': 4823.031, 'segs': [{'end': 4289.837, 'src': 'embed', 'start': 4253.971, 'weight': 0, 'content': [{'end': 4266.158, 'text': "The bad news is that the way that we draw the car here, by rotating the context, we actually don't know where the corners of the car are like.", 'start': 4253.971, 'duration': 12.187}, {'end': 4267.398, 'text': 'what are their coordinates?', 'start': 4266.158, 'duration': 1.24}, {'end': 4270.62, 'text': "And we're gonna need to figure those out first.", 'start': 4268.019, 'duration': 2.601}, {'end': 4282.787, 'text': "So in Car.js, I'm going to create here a new method, and I will call this private method.", 'start': 4271.26, 'duration': 11.527}, {'end': 4284.715, 'text': 'Create polygon.', 'start': 4283.595, 'duration': 1.12}, {'end': 4289.837, 'text': 'This polygon will have a list of points, an array of points.', 'start': 4285.696, 'duration': 4.141}], 'summary': 'The car drawing method needs coordinate points to be defined in a new private method createpolygon in car.js.', 'duration': 35.866, 'max_score': 4253.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4253971.jpg'}, {'end': 4499.471, 'src': 'embed', 'start': 4464.31, 'weight': 1, 'content': [{'end': 4469.079, 'text': 'We want to update this after we move the car like this.', 'start': 4464.31, 'duration': 4.769}, {'end': 4478.081, 'text': 'So this car will have a polygon attribute that will be generated in this way.', 'start': 4470.658, 'duration': 7.423}, {'end': 4484.024, 'text': 'And to draw the car, we can now use this polygon instead.', 'start': 4478.862, 'duration': 5.162}, {'end': 4492.948, 'text': 'So instead of this trick here where we translate, rotate and then just draw a rectangle here, essentially losing the corner points,', 'start': 4484.144, 'duration': 8.804}, {'end': 4499.471, 'text': 'we can remove all of this and just draw our polygon points in order.', 'start': 4492.948, 'duration': 6.523}], 'summary': 'Update car attribute with generated polygon for efficient drawing.', 'duration': 35.161, 'max_score': 4464.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4464310.jpg'}, {'end': 4660.158, 'src': 'embed', 'start': 4615.776, 'weight': 3, 'content': [{'end': 4627.464, 'text': "And then here, after we have our polygon, I'm going to assess damage, a method that we're gonna need to write, with the road borders.", 'start': 4615.776, 'duration': 11.688}, {'end': 4642.691, 'text': "So now here, let's define this SSDamage method, given some road borders like so, and loop through all the borders.", 'start': 4628.729, 'duration': 13.962}, {'end': 4660.158, 'text': 'and check if there is an intersection between this polygon and the road border of i, the i-th road border, then we return true.', 'start': 4646.849, 'duration': 13.309}], 'summary': 'Define ssdamage method to assess intersection with road borders.', 'duration': 44.382, 'max_score': 4615.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4615776.jpg'}], 'start': 4198.041, 'title': 'Implementing car collisions and damage detection', 'summary': "Details the implementation of collision detection in car.js, including creating a polygon, calculating distances and angles, and updating the car's polygon attribute. it also demonstrates the method for detecting damage by assessing the intersection between the car polygon and road borders.", 'chapters': [{'end': 4546.896, 'start': 4198.041, 'title': 'Implementing collisions in car.js', 'summary': "Details the implementation of collision detection in car.js, including creating a polygon with corner points, calculating distances and angles, and updating the car's polygon attribute for accurate drawing and collision detection.", 'duration': 348.855, 'highlights': ['Creating a polygon with corner points for collision detection, allowing for different shapes and working effectively (e.g., adding more points) in Car.js.', 'Calculating distances and angles, such as obtaining the radius using the hypot method and determining the angle using the atan2 method from the math library, for accurate collision detection.', "Updating the car's polygon attribute to accurately draw the car and enable collision detection, replacing the previous method of translating, rotating, and drawing a rectangle with the polygon points in order in Car.js."]}, {'end': 4823.031, 'start': 4548.357, 'title': 'Polygon intersection and damage detection', 'summary': 'Details the improved functionality of manipulating car polygons and demonstrates the method for detecting damage by assessing the intersection between the car polygon and road borders, providing a method for implementing polygon intersection and damage assessment.', 'duration': 274.674, 'highlights': ['The chapter details the improved functionality of manipulating car polygons and demonstrates the method for detecting damage by assessing the intersection between the car polygon and road borders.', 'Providing a method for implementing polygon intersection and damage assessment.', 'The ability to manipulate car polygons has been improved, allowing for complex shape modifications.']}], 'duration': 624.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4198041.jpg', 'highlights': ['Creating a polygon with corner points for collision detection in Car.js', "Updating the car's polygon attribute to accurately draw the car in Car.js", 'Calculating distances and angles for accurate collision detection in Car.js', 'Demonstrating the method for detecting damage by assessing the intersection between the car polygon and road borders', 'Providing a method for implementing polygon intersection and damage assessment', 'Improved functionality of manipulating car polygons for complex shape modifications']}, {'end': 5626.631, 'segs': [{'end': 4949.94, 'src': 'embed', 'start': 4865.419, 'weight': 0, 'content': [{'end': 4873.803, 'text': 'because we are using each segment, forming this polygon and comparing it with the border of the road.', 'start': 4865.419, 'duration': 8.384}, {'end': 4876.185, 'text': 'Now, this method is quite general.', 'start': 4874.424, 'duration': 1.761}, {'end': 4885.686, 'text': 'And it works for complicated polygons as well, but it can become slow if you have very many points.', 'start': 4877.379, 'duration': 8.307}, {'end': 4892.151, 'text': 'So then you would need to do some optimization here, maybe look at the bounding boxes first or something like that.', 'start': 4885.806, 'duration': 6.345}, {'end': 4899.618, 'text': "And it's really reliable as long as your object doesn't move too quickly, for example.", 'start': 4893.292, 'duration': 6.326}, {'end': 4908.706, 'text': 'Like, if our car would move so fast that it could actually jump over a border or over another car in traffic,', 'start': 4900.139, 'duration': 8.567}, {'end': 4913.11, 'text': 'then you would need a different collision detection strategy for that.', 'start': 4908.706, 'duration': 4.404}, {'end': 4915.172, 'text': "But we won't let that happen.", 'start': 4913.651, 'duration': 1.521}, {'end': 4929.045, 'text': "And if I zoom in here a lot, I should mention this because you may wonder why the car doesn't detect a collision now.", 'start': 4916.133, 'duration': 12.912}, {'end': 4940.254, 'text': "And the reason for that is that, well, that line, that border of the road, It's a line, it's a mathematical line, which actually has no thickness.", 'start': 4929.585, 'duration': 10.669}, {'end': 4945.217, 'text': 'And here we are drawing it with a relatively thick thickness.', 'start': 4940.994, 'duration': 4.223}, {'end': 4949.94, 'text': "And that's why it looks like it's intersecting, even though it's not.", 'start': 4946.098, 'duration': 3.842}], 'summary': 'Method works for polygons, may slow with many points, reliable for slow-moving objects', 'duration': 84.521, 'max_score': 4865.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4865419.jpg'}, {'end': 5047.827, 'src': 'embed', 'start': 5016.887, 'weight': 2, 'content': [{'end': 5020.308, 'text': 'We really want to take any kind of impact seriously in this.', 'start': 5016.887, 'duration': 3.421}, {'end': 5023.309, 'text': 'So I am rendering the car useless at this stage.', 'start': 5020.428, 'duration': 2.881}, {'end': 5025.548, 'text': 'Now, the car works.', 'start': 5023.906, 'duration': 1.642}, {'end': 5031.553, 'text': "It has sensors, it's detecting the borders, and it's getting damaged on impact.", 'start': 5025.848, 'duration': 5.705}, {'end': 5037.258, 'text': "But this is quite lonely, don't you think? It's time to add some traffic.", 'start': 5032.153, 'duration': 5.105}, {'end': 5042.342, 'text': 'Without it, making it a self-driving car is not much of a challenge.', 'start': 5037.738, 'duration': 4.604}, {'end': 5047.827, 'text': 'You just press the up arrow key and perfect driving.', 'start': 5043.063, 'duration': 4.764}], 'summary': 'Developing a self-driving car with sensors and a need for traffic to enhance the challenge.', 'duration': 30.94, 'max_score': 5016.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5016887.jpg'}, {'end': 5106.961, 'src': 'embed', 'start': 5076.945, 'weight': 4, 'content': [{'end': 5081.808, 'text': "but I'm going to put it in front and it's going to be our first obstacle that we need to avoid.", 'start': 5076.945, 'duration': 4.863}, {'end': 5083.65, 'text': 'Now here.', 'start': 5082.109, 'duration': 1.541}, {'end': 5086.072, 'text': 'we need to update this as well.', 'start': 5083.65, 'duration': 2.422}, {'end': 5098.077, 'text': "so i'm gonna go through all the cars in our traffic and i'm going to tell each of them to update and keep in mind the road borders,", 'start': 5086.852, 'duration': 11.225}, {'end': 5106.961, 'text': 'or you can also pass there an empty array instead of the borders if you want the traffic to be invulnerable to everything.', 'start': 5098.077, 'duration': 8.884}], 'summary': 'Update all cars in traffic to avoid the first obstacle and consider road borders or an empty array for invulnerability.', 'duration': 30.016, 'max_score': 5076.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5076945.jpg'}, {'end': 5169.94, 'src': 'embed', 'start': 5135.966, 'weight': 5, 'content': [{'end': 5142.112, 'text': 'And if we press the arrow keys, something strange happens.', 'start': 5135.966, 'duration': 6.146}, {'end': 5146.141, 'text': 'We are not controlling our car anymore.', 'start': 5143.439, 'duration': 2.702}, {'end': 5148.063, 'text': 'We are controlling the other car.', 'start': 5146.301, 'duration': 1.762}, {'end': 5157.11, 'text': "And that's because the key listeners are being overwritten from the original car to the last car in the traffic.", 'start': 5148.643, 'duration': 8.467}, {'end': 5163.295, 'text': "We're going to need to specify which car gets these controls and which not.", 'start': 5157.811, 'duration': 5.484}, {'end': 5169.94, 'text': "So I'm going to go up here and tell this car to have here keys.", 'start': 5164.136, 'duration': 5.804}], 'summary': 'Arrow keys control switches between cars due to overwritten key listeners.', 'duration': 33.974, 'max_score': 5135.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5135966.jpg'}, {'end': 5302.649, 'src': 'embed', 'start': 5239.869, 'weight': 6, 'content': [{'end': 5249.815, 'text': "the car in front moved and i actually can't catch it because we have the same movement speed, I mean max speed.", 'start': 5239.869, 'duration': 9.946}, {'end': 5260.347, 'text': 'So it would be nice to go here in the car constructor and maybe specify here a value for this max speed.', 'start': 5250.396, 'duration': 9.951}, {'end': 5272.263, 'text': "Let's have it default to 3, but allow us to change it from the main file.", 'start': 5261.388, 'duration': 10.875}, {'end': 5278.844, 'text': "so in main.js here i'm going to set a value of 2 for the dummy.", 'start': 5272.263, 'duration': 6.581}, {'end': 5285.186, 'text': 'save this refresh and now i can actually catch that dummy.', 'start': 5278.844, 'duration': 6.342}, {'end': 5292.882, 'text': "So far the sensors are not reading this dummy car and we're not even getting damaged by it.", 'start': 5287.538, 'duration': 5.344}, {'end': 5295.284, 'text': "We'll take care of that in a sec.", 'start': 5293.583, 'duration': 1.701}, {'end': 5302.649, 'text': "but first this scene is becoming a bit too crowded with all these lines, and the dummy car doesn't really need a sensor.", 'start': 5295.284, 'duration': 7.365}], 'summary': "Adjust car's max speed to 3, set dummy's speed to 2 in main file for successful catch.", 'duration': 62.78, 'max_score': 5239.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5239869.jpg'}], 'start': 4823.031, 'title': 'Car collision and traffic simulation', 'summary': 'Discusses implementing collision detection and handling for a car object in javascript, covering general reliability, potential performance issues, and object speed impact. it also covers adding traffic to the driving simulation, including creating obstacle cars, controlling multiple cars, setting different movement speeds, and implementing sensors to avoid collisions.', 'chapters': [{'end': 5042.342, 'start': 4823.031, 'title': 'Car collision detection and handling', 'summary': "Discusses implementing collision detection and handling for a car object in javascript, covering the method's general reliability, potential performance issues with complex shapes, and the impact of object speed on collision detection, culminating in rendering the car useless upon impact.", 'duration': 219.311, 'highlights': ['The collision detection method is quite general and works for complicated polygons, but may become slow with a large number of points, necessitating optimization (e.g., bounding boxes) (Relevance: 4)', 'A different collision detection strategy would be needed if the car moves so fast that it could jump over a border or another car in traffic (Relevance: 3)', 'The car is rendered useless upon impact, as it is not allowed to move if damaged, demonstrating the serious approach to handling any impact (Relevance: 2)', 'The chapter explores the limitations of collision detection, such as the discrepancy between the visual appearance of road borders and their mathematical representation, suggesting potential solutions, but opting for simplicity (Relevance: 1)']}, {'end': 5626.631, 'start': 5043.063, 'title': 'Implementing traffic in driving simulation', 'summary': 'Covers adding traffic to the driving simulation, including creating obstacle cars, controlling multiple cars, setting different movement speeds, and implementing sensors to avoid collisions.', 'duration': 583.568, 'highlights': ['Implementing obstacle cars', 'Controlling multiple cars', 'Setting different movement speeds', 'Implementing sensors to avoid collisions']}], 'duration': 803.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI4823031.jpg', 'highlights': ['The collision detection method is quite general and works for complicated polygons, but may become slow with a large number of points, necessitating optimization (e.g., bounding boxes) (Relevance: 4)', 'A different collision detection strategy would be needed if the car moves so fast that it could jump over a border or another car in traffic (Relevance: 3)', 'The car is rendered useless upon impact, as it is not allowed to move if damaged, demonstrating the serious approach to handling any impact (Relevance: 2)', 'The chapter explores the limitations of collision detection, such as the discrepancy between the visual appearance of road borders and their mathematical representation, suggesting potential solutions, but opting for simplicity (Relevance: 1)', 'Implementing obstacle cars', 'Controlling multiple cars', 'Setting different movement speeds', 'Implementing sensors to avoid collisions']}, {'end': 7091.427, 'segs': [{'end': 5673.073, 'src': 'embed', 'start': 5632.315, 'weight': 1, 'content': [{'end': 5644.856, 'text': 'Okay, Because the traffic cars are black and my ray turns black as it touches the nearest segment of its polygon.', 'start': 5632.315, 'duration': 12.541}, {'end': 5647.979, 'text': "i don't see things very clearly.", 'start': 5644.856, 'duration': 3.123}, {'end': 5657.107, 'text': 'let me color the cars differently so that our car is blue and the traffic is red.', 'start': 5647.979, 'duration': 9.128}, {'end': 5669.45, 'text': "i'm gonna go in main.js and here let's draw this one as blue and the traffic as red.", 'start': 5657.107, 'duration': 12.343}, {'end': 5673.073, 'text': 'like this and inside car js.', 'start': 5669.45, 'duration': 3.623}], 'summary': 'Adjusting car colors: changing our car to blue and the traffic to red.', 'duration': 40.758, 'max_score': 5632.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5632315.jpg'}, {'end': 5768.878, 'src': 'embed', 'start': 5743.413, 'weight': 3, 'content': [{'end': 5748.854, 'text': "You'll learn the components of this kind of network and how to connect it to the car so it can move by itself.", 'start': 5743.413, 'duration': 5.441}, {'end': 5756.656, 'text': 'Neural networks are computing systems inspired by the biological neural networks in our brain.', 'start': 5751.315, 'duration': 5.341}, {'end': 5759.656, 'text': 'These are some neurons.', 'start': 5758.456, 'duration': 1.2}, {'end': 5763.537, 'text': 'These branch-like structures receive the signals.', 'start': 5760.876, 'duration': 2.661}, {'end': 5768.878, 'text': 'When stimulated enough, a neuron will fire a signal through its axon.', 'start': 5764.857, 'duration': 4.021}], 'summary': 'Learn about neural networks and how to connect them to a car for autonomous movement.', 'duration': 25.465, 'max_score': 5743.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5743413.jpg'}, {'end': 5933.391, 'src': 'embed', 'start': 5907.649, 'weight': 0, 'content': [{'end': 5914.851, 'text': "Hopefully Anyway, I'm feeling really good about myself now that I know my brain can do something like that in an instant.", 'start': 5907.649, 'duration': 7.202}, {'end': 5916.471, 'text': 'Hope you do too.', 'start': 5915.651, 'duration': 0.82}, {'end': 5920.573, 'text': "Our car's neural network will do something like that.", 'start': 5917.672, 'duration': 2.901}, {'end': 5924.554, 'text': 'Neurons on the first layer will be connected to the sensors.', 'start': 5921.573, 'duration': 2.981}, {'end': 5933.391, 'text': 'They will send signals forward a few times, and the last layer will be connected to the car controls to make it actually do something.', 'start': 5925.788, 'duration': 7.603}], 'summary': 'Neural network enables instant decision-making for car control.', 'duration': 25.742, 'max_score': 5907.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5907649.jpg'}, {'end': 6210.198, 'src': 'embed', 'start': 6178.479, 'weight': 4, 'content': [{'end': 6182.144, 'text': 'Both weights and biases can be between minus one and one.', 'start': 6178.479, 'duration': 3.665}, {'end': 6186.79, 'text': 'And there is a nice mathematical reason for this, which I will explain soon.', 'start': 6182.624, 'duration': 4.166}, {'end': 6193.033, 'text': 'Now, these inputs, they will be the values that we get from the car sensors.', 'start': 6188.291, 'duration': 4.742}, {'end': 6199.435, 'text': 'And what we need to do is compute the outputs using these weights and biases that we defined.', 'start': 6193.993, 'duration': 5.442}, {'end': 6204.476, 'text': 'Those are random for now, but in a smart brain, they will have some kind of structure.', 'start': 6200.115, 'duration': 4.361}, {'end': 6210.198, 'text': 'We compute the output values using a feed forward algorithm.', 'start': 6205.136, 'duration': 5.062}], 'summary': 'Weights and biases range from -1 to 1. inputs are from car sensors, outputs computed using feed forward algorithm.', 'duration': 31.719, 'max_score': 6178.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI6178479.jpg'}, {'end': 6614.972, 'src': 'embed', 'start': 6583.46, 'weight': 2, 'content': [{'end': 6596.186, 'text': "I'm going to get the outputs by calling the feed forward method from the level with the given inputs and the network's first level, like so.", 'start': 6583.46, 'duration': 12.726}, {'end': 6601.888, 'text': 'So this is now calling the first level to produce its outputs.', 'start': 6596.827, 'duration': 5.061}, {'end': 6608.97, 'text': "But then I'm going to loop through the remaining levels.", 'start': 6602.828, 'duration': 6.142}, {'end': 6614.972, 'text': "So notice that here I'm starting at i equals to 1.", 'start': 6609.45, 'duration': 5.522}], 'summary': 'Obtaining outputs by calling feed forward method from the first level and looping through remaining levels, starting at i=1.', 'duration': 31.512, 'max_score': 6583.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI6583460.jpg'}], 'start': 5632.315, 'title': 'Using neural networks for car control', 'summary': 'Covers using neural networks to control car movements, discussing concepts like network structure, weights, biases, and practical coding examples. it also explores the change in car colors to improve visibility, resulting in successful implementation and obstacle detection.', 'chapters': [{'end': 5712.093, 'start': 5632.315, 'title': 'Coloring traffic cars for better visibility', 'summary': 'Discusses the change in car and traffic colors to improve visibility, resulting in the ray turning black, sensors detecting obstacles, and successful implementation of the color change.', 'duration': 79.778, 'highlights': ['The ray turns black as it touches the nearest segment of its polygon, affecting visibility for the car.', 'Changing the car to blue and the traffic to red improves the visibility and distinguishes between the car and traffic.', 'The sensors are reading that there is something in front of it, indicating successful functionality after the color change.', 'The implementation of color change results in the ray turning black and the sensors detecting obstacles.']}, {'end': 6116.689, 'start': 5713.854, 'title': 'Teaching neural networks and coding', 'summary': 'Explains the concept of neural networks, how they mimic the human brain, and gives a practical example of coding a neural network to control a car, emphasizing the simplicity of the network needed to solve the problem.', 'duration': 402.835, 'highlights': ['Neural networks are computing systems inspired by the biological neural networks in our brain.', 'The brain has 86 billion neurons, and these neurons work together to process sensory signals and make complex decisions in a split second.', 'The chapter emphasizes the simplicity of the neural network needed to control the car, highlighting that large networks are not necessary to solve the problem.']}, {'end': 6504.554, 'start': 6118.001, 'title': 'Neural network basics', 'summary': 'Explains the concept of neural network weights and biases, the computation of output values using a feed forward algorithm, and the importance of values between minus one and one for weights and biases, along with a mention of using libraries like tensorflow for more advanced experiments.', 'duration': 386.553, 'highlights': ['Explanation of the computation of output values using a feed forward algorithm and the importance of values between minus one and one for weights and biases', 'Importance of values between minus one and one for weights and biases', 'Mention of using libraries like TensorFlow for more advanced experiments']}, {'end': 7091.427, 'start': 6504.554, 'title': 'Neural network for car control', 'summary': "Discusses the implementation of a neural network for car control, specifying the structure and functionality of the network, connecting it to car sensors, and using it to control the car's movements based on sensor readings and outputs from the network.", 'duration': 586.873, 'highlights': ['The neural network is defined using a class with a constructor that takes an array of neuron counts, specifying the number of neurons in each layer.', 'The feed forward algorithm is explained, detailing how the network processes inputs and produces outputs by looping through the levels of the network.', 'The process of connecting the neural network to the car sensors is described, including the mapping of sensor readings to neural network inputs and the retrieval of outputs for car control.', "The functionality of the neural network in controlling the car's movements based on sensor readings and network outputs is demonstrated, showcasing the network's ability to influence the car's behavior."]}], 'duration': 1459.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI5632315.jpg', 'highlights': ['The neural network controls car movements based on sensor readings and network outputs.', 'Changing the car to blue and traffic to red improves visibility and obstacle detection.', 'The feed forward algorithm processes inputs and produces outputs by looping through network levels.', 'Neural networks are computing systems inspired by biological neural networks in the brain.', 'The importance of values between minus one and one for weights and biases in neural networks.']}, {'end': 8116.708, 'segs': [{'end': 7148.463, 'src': 'embed', 'start': 7119.739, 'weight': 2, 'content': [{'end': 7125.504, 'text': 'I mean make something that at a glance we can see this entire network in action.', 'start': 7119.739, 'duration': 5.765}, {'end': 7131.729, 'text': "So I'm going to go to index.html here and I'm actually going to refactor things a bit.", 'start': 7125.904, 'duration': 5.825}, {'end': 7138.635, 'text': 'This my canvas from the beginning is going to be called car canvas like this,', 'start': 7131.929, 'duration': 6.706}, {'end': 7143.219, 'text': "and we're going to use another canvas on the right to display the network.", 'start': 7138.635, 'duration': 4.584}, {'end': 7148.463, 'text': "So we're going to visualize a neural network in this one.", 'start': 7145.681, 'duration': 2.782}], 'summary': 'Create a visual representation of the neural network using two canvases on the webpage.', 'duration': 28.724, 'max_score': 7119.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7119739.jpg'}, {'end': 7536.314, 'src': 'embed', 'start': 7461.05, 'weight': 0, 'content': [{'end': 7468.936, 'text': 'and the car is going to be centered in the middle lane at 100 Y with 30 width and 50 height, like so.', 'start': 7461.05, 'duration': 7.886}, {'end': 7472.018, 'text': 'And they are all gonna be AI cars.', 'start': 7469.636, 'duration': 2.382}, {'end': 7477.835, 'text': 'And here I just return these cars like so.', 'start': 7474.191, 'duration': 3.644}, {'end': 7494.968, 'text': 'And up here, where we have car defined, we are actually going to define cars instead equal, to generate cars of n like this,', 'start': 7478.495, 'duration': 16.473}, {'end': 7499.01, 'text': 'and our n is equal to 100.', 'start': 7494.968, 'duration': 4.042}, {'end': 7505.713, 'text': 'so we are going to have 100 cars going in parallel and hopefully one of them is going to do something right.', 'start': 7499.01, 'duration': 6.703}, {'end': 7510.706, 'text': 'We need to update these cars here.', 'start': 7507.185, 'duration': 3.521}, {'end': 7523.51, 'text': 'So where we have here car.update, we are gonna write a loop and say, let i is equal to zero, i is less than cars.length i++.', 'start': 7510.826, 'duration': 12.684}, {'end': 7530.252, 'text': 'And then we have here cars of i, update like so.', 'start': 7523.75, 'duration': 6.502}, {'end': 7536.314, 'text': "And we're gonna do the same for the drawing down here, drawing them.", 'start': 7530.992, 'duration': 5.322}], 'summary': 'Simulation of 100 ai cars in a 100 y lane with 30 width and 50 height, updating their movements in a loop.', 'duration': 75.264, 'max_score': 7461.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7461050.jpg'}, {'end': 7642.523, 'src': 'embed', 'start': 7610.717, 'weight': 1, 'content': [{'end': 7618.242, 'text': "So saving this and refreshing, it's a little bit better, but still quite much happening there.", 'start': 7610.717, 'duration': 7.525}, {'end': 7632.238, 'text': 'I think that I want to emphasize one car, Like, for example, the zeroth car, this one that we are using everywhere pretty much,', 'start': 7620.223, 'duration': 12.015}, {'end': 7636.64, 'text': 'by drawing it again with the maximum opacity.', 'start': 7632.238, 'duration': 4.402}, {'end': 7642.523, 'text': 'But also I want this one to be the only car for which we draw the sensors.', 'start': 7637.3, 'duration': 5.223}], 'summary': 'Improving the visualization, emphasizing the primary car with maximum opacity and exclusive sensor drawing.', 'duration': 31.806, 'max_score': 7610.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7610717.jpg'}, {'end': 7755.34, 'src': 'embed', 'start': 7707.012, 'weight': 6, 'content': [{'end': 7729.498, 'text': "And I'm going to define this best car here and say best car is equal, to find the car whose Y value is equal to the minimum value, okay,", 'start': 7707.012, 'duration': 22.486}, {'end': 7737.441, 'text': 'of all the Y values of the cars.', 'start': 7729.498, 'duration': 7.943}, {'end': 7740.704, 'text': 'so this may seem a little bit scary.', 'start': 7737.441, 'duration': 3.263}, {'end': 7742.767, 'text': 'so what is happening here?', 'start': 7740.704, 'duration': 2.063}, {'end': 7747.892, 'text': 'cars.map c going to c.y.', 'start': 7742.767, 'duration': 5.125}, {'end': 7755.02, 'text': 'this means that we are creating a new array with only the y values of the cars.', 'start': 7747.892, 'duration': 7.128}, {'end': 7755.34, 'text': "that's it.", 'start': 7755.02, 'duration': 0.32}], 'summary': 'Defining the best car based on the minimum y value of all cars.', 'duration': 48.328, 'max_score': 7707.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7707012.jpg'}, {'end': 7936.639, 'src': 'embed', 'start': 7902.924, 'weight': 5, 'content': [{'end': 7916.454, 'text': "So I'm going to say local storage set item, the best brain that we have so far, we're going to store it in this best brain attribute in local storage.", 'start': 7902.924, 'duration': 13.53}, {'end': 7925.971, 'text': "And the value is going to be a JSON string coming from the best car's brain.", 'start': 7917.765, 'duration': 8.206}, {'end': 7930.755, 'text': "So I'm essentially serializing that brain into local storage.", 'start': 7926.471, 'duration': 4.284}, {'end': 7936.639, 'text': 'And come to think of it, we might need to destroy this saved brain as well.', 'start': 7931.435, 'duration': 5.204}], 'summary': 'Storing the best brain in local storage as a json string for serialization.', 'duration': 33.715, 'max_score': 7902.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7902924.jpg'}, {'end': 8074.602, 'src': 'embed', 'start': 8049.494, 'weight': 7, 'content': [{'end': 8058.957, 'text': "And here I'm actually going to use emojis for these button contents like this with the save icon and the trash icon.", 'start': 8049.494, 'duration': 9.463}, {'end': 8062.318, 'text': 'You can find emojis like this just by searching online.', 'start': 8059.437, 'duration': 2.881}, {'end': 8074.602, 'text': "So I'm going to save this file and go to the CSS next and remove this text line from the body because we're going to use a flex display instead.", 'start': 8062.758, 'duration': 11.844}], 'summary': 'Using emojis for button contents, saving file, and implementing flex display in css.', 'duration': 25.108, 'max_score': 8049.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8049494.jpg'}], 'start': 7091.547, 'title': 'Visualization and implementation of car behavior', 'summary': 'Covers visualizing neural network activity, including code refactoring and decision visualization, parallelized generation and simulation of 100 ai cars, and implementing a car tracking algorithm for improved behavior and user interaction.', 'chapters': [{'end': 7424.671, 'start': 7091.547, 'title': 'Visualizing neural network in action', 'summary': "Explains the process of visualizing a neural network to understand its activity, including code refactoring, canvas manipulation, and network decision visualization, aiming to provide a comprehensive insight into the car's behavior and network activity.", 'duration': 333.124, 'highlights': ["The process of visualizing a neural network to understand its activity is explained, including code refactoring, canvas manipulation, and network decision visualization, aiming to provide a comprehensive insight into the car's behavior and network activity.", 'The visualization supports animation, allowing for the animation of the visualizer by specifying a time argument and implementing the feed forward algorithm.', "The chapter emphasizes the difficulty of debugging without analyzing all the numbers and the potential for a visual representation to provide a comprehensive understanding of the network's decision-making.", 'The chapter illustrates the code refactoring process, including renaming canvas elements, distinguishing between car and network canvases, and updating context references for each canvas.']}, {'end': 7674.376, 'start': 7425.471, 'title': 'Parallelized car generation and simulation', 'summary': 'Introduces parallelized car generation and simulation, creating 100 ai cars running simultaneously, updating and drawing them on a canvas, and implementing transparency and emphasis for better visualization.', 'duration': 248.905, 'highlights': ['Creating 100 AI cars running simultaneously', 'Updating and drawing 100 cars on a canvas', 'Implementing transparency and emphasis for better visualization']}, {'end': 8116.708, 'start': 7675.988, 'title': 'Implementing car tracking algorithm', 'summary': 'Discusses implementing a car tracking algorithm in javascript, focusing on identifying the best car based on its y value and saving its brain using local storage, leading to improved car behavior and user interaction.', 'duration': 440.72, 'highlights': ['The code focuses on finding the best car based on its Y value, with the goal of tracking the car that goes upwards the most, leading to improved car behavior and user interaction.', "The process involves mapping the Y values of the cars, creating a new array, and finding the car with the minimum Y value, which enhances the car tracking algorithm's accuracy and efficiency.", "Implementing local storage to save the best car's brain as a JSON string allows for retaining the best car's behavior even after leaving the browser, enhancing user interaction and experimental capabilities.", 'The use of emojis for the save and discard buttons, along with the implementation of a vertical button layout using flex display in CSS, enhances the user interface and interaction with the car tracking algorithm.']}], 'duration': 1025.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI7091547.jpg', 'highlights': ['Parallelized generation and simulation of 100 AI cars', 'Implementing a car tracking algorithm for improved behavior and user interaction', 'Visualizing neural network activity through code refactoring and decision visualization', 'Updating and drawing 100 cars on a canvas', 'Implementing transparency and emphasis for better visualization', "Implementing local storage to save the best car's brain as a JSON string", 'Mapping the Y values of the cars and finding the car with the minimum Y value', 'Using emojis for the save and discard buttons to enhance user interaction']}, {'end': 9147.865, 'segs': [{'end': 8238.266, 'src': 'embed', 'start': 8208.654, 'weight': 3, 'content': [{'end': 8210.495, 'text': 'These are called fitness functions.', 'start': 8208.654, 'duration': 1.841}, {'end': 8215.138, 'text': 'For example, you could measure the travel distance instead.', 'start': 8211.717, 'duration': 3.421}, {'end': 8221.224, 'text': 'Doing that may result in cars that go backwards as an easy way to avoid the obstacles.', 'start': 8216.059, 'duration': 5.165}, {'end': 8228.742, 'text': 'or just go around in circles forever, going infinitely far, but also going nowhere at the same time.', 'start': 8222.58, 'duration': 6.162}, {'end': 8232.544, 'text': 'So need to be careful when choosing a fitness function.', 'start': 8229.903, 'duration': 2.641}, {'end': 8238.266, 'text': "I'm using the Y value here, but if the road would be turning, it wouldn't work anymore.", 'start': 8233.443, 'duration': 4.823}], 'summary': 'Fitness functions affect car behavior, e.g., may cause cars to go backwards or circle infinitely, emphasizing caution in selection.', 'duration': 29.612, 'max_score': 8208.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8208654.jpg'}, {'end': 8298.2, 'src': 'embed', 'start': 8258.58, 'weight': 1, 'content': [{'end': 8263.361, 'text': "These are all homework ideas for you, but now I think we're ready for more traffic.", 'start': 8258.58, 'duration': 4.781}, {'end': 8271.884, 'text': "Let's go here in our traffic array, put a comma at the end, and add two more cars.", 'start': 8263.921, 'duration': 7.963}, {'end': 8287.092, 'text': 'One is going to be on lane 0 and minus, say, 300, and the other one at the same vertical level, but lane 2.', 'start': 8273.065, 'duration': 14.027}, {'end': 8291.693, 'text': "I'm going to save this, refresh, and now let's see what happens.", 'start': 8287.092, 'duration': 4.601}, {'end': 8298.2, 'text': 'Almost there.', 'start': 8297.54, 'duration': 0.66}], 'summary': 'Add two more cars to traffic array for increased traffic flow.', 'duration': 39.62, 'max_score': 8258.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8258580.jpg'}, {'end': 8516.171, 'src': 'embed', 'start': 8490.766, 'weight': 4, 'content': [{'end': 8497.088, 'text': 'And this mutate is pretty much our randomized method that we had previously here for a level.', 'start': 8490.766, 'duration': 6.322}, {'end': 8499.929, 'text': 'But now it works for the entire network.', 'start': 8497.748, 'duration': 2.181}, {'end': 8508.623, 'text': 'So if the amount is zero, then our biases and our weights just stay the same.', 'start': 8500.934, 'duration': 7.689}, {'end': 8516.171, 'text': "But if this value is somewhere in between, then it's going to move away from these biases depending on this amount.", 'start': 8509.223, 'duration': 6.948}], 'summary': 'The mutate method works for the entire network, adjusting biases and weights based on the specified amount.', 'duration': 25.405, 'max_score': 8490.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8490766.jpg'}, {'end': 8976.47, 'src': 'embed', 'start': 8943.345, 'weight': 2, 'content': [{'end': 8945.826, 'text': 'And now we have quite many of them that are quite similar.', 'start': 8943.345, 'duration': 2.481}, {'end': 8954.33, 'text': "Okay, let's keep just one car here and see it in action without any other things disturbing it.", 'start': 8947.227, 'duration': 7.103}, {'end': 8958.992, 'text': 'Okay, that was quite close there.', 'start': 8956.451, 'duration': 2.541}, {'end': 8965.796, 'text': 'Oh, yes.', 'start': 8964.755, 'duration': 1.041}, {'end': 8972.279, 'text': "Somehow I thought it's gonna get damaged, even though I know that it's the best car from previously, so it won't get damaged.", 'start': 8966.436, 'duration': 5.843}, {'end': 8976.47, 'text': 'There are many more sophisticated genetic algorithms out there.', 'start': 8973.149, 'duration': 3.321}], 'summary': 'Testing one car in action, among many similar ones, with sophisticated genetic algorithms.', 'duration': 33.125, 'max_score': 8943.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8943345.jpg'}, {'end': 9035.889, 'src': 'embed', 'start': 9004.239, 'weight': 0, 'content': [{'end': 9005.8, 'text': 'We are now actually done.', 'start': 9004.239, 'duration': 1.561}, {'end': 9008.602, 'text': "I won't be teaching you any more algorithms.", 'start': 9006.581, 'duration': 2.021}, {'end': 9011.004, 'text': 'You have many things you can play around with.', 'start': 9009.043, 'duration': 1.961}, {'end': 9014.442, 'text': "And I'm quite happy with the car we have right now.", 'start': 9011.96, 'duration': 2.482}, {'end': 9018.044, 'text': "It's making its own decisions and it's avoiding all other cars.", 'start': 9014.742, 'duration': 3.302}, {'end': 9023.627, 'text': "It could be better if it would recognize the lanes, but I'll let you worry about that.", 'start': 9018.764, 'duration': 4.863}, {'end': 9029.271, 'text': "Meanwhile, I'm going to relax and show you how to draw a car in PowerPoint.", 'start': 9024.488, 'duration': 4.783}, {'end': 9035.889, 'text': 'Since you got this far, all I can say is congratulations.', 'start': 9032.426, 'duration': 3.463}], 'summary': 'Algorithms teaching concluded, self-driving car avoiding cars, can improve lane recognition, moving to drawing a car in powerpoint.', 'duration': 31.65, 'max_score': 9004.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI9004239.jpg'}, {'end': 9145.601, 'src': 'heatmap', 'start': 9066.101, 'weight': 1, 'content': [{'end': 9072.425, 'text': "But how does it really work? We have such a great system now that it's a shame to put it to waste.", 'start': 9066.101, 'duration': 6.324}, {'end': 9081.872, 'text': "So I'm thinking about making a new course where we start off with a very simple network and gradually go bigger and bigger and see what each of them can do.", 'start': 9073.106, 'duration': 8.766}, {'end': 9089.672, 'text': 'We could also try new things like teaching the car to stop before impact, how to respect the lanes,', 'start': 9083.069, 'duration': 6.603}, {'end': 9092.474, 'text': 'maybe even how to park and other cool stuff like that.', 'start': 9089.672, 'duration': 2.802}, {'end': 9103.759, 'text': "What do you think? Would you like a course like that? To practice even more JavaScript and become a master of making diagrams that show what's inside these so-called black boxes?", 'start': 9093.594, 'duration': 10.165}, {'end': 9108.922, 'text': 'And if you want something else right now, I do have a lot of content on YouTube.', 'start': 9104.86, 'duration': 4.062}, {'end': 9112.94, 'text': 'This course teaches how to build location-based applications.', 'start': 9109.818, 'duration': 3.122}, {'end': 9116.142, 'text': 'In this one we make an augmented reality piano.', 'start': 9113.5, 'duration': 2.642}, {'end': 9119.745, 'text': 'And here we use the camera to make a new kind of puzzle game.', 'start': 9116.583, 'duration': 3.162}, {'end': 9124.228, 'text': 'I have many small projects as well, but really hard to keep track.', 'start': 9120.725, 'duration': 3.503}, {'end': 9127.069, 'text': "Maybe they're better organized on my website.", 'start': 9124.948, 'duration': 2.121}, {'end': 9127.93, 'text': "I don't know.", 'start': 9127.53, 'duration': 0.4}, {'end': 9133.754, 'text': 'By the way, on the website you can find a more enhanced version of the self-driving car.', 'start': 9129.171, 'duration': 4.583}, {'end': 9135.415, 'text': 'Check it out if curious.', 'start': 9134.274, 'duration': 1.141}, {'end': 9138.017, 'text': 'Anyway, thanks for watching.', 'start': 9136.476, 'duration': 1.541}, {'end': 9141.733, 'text': 'Please share this course with anyone you think is interested.', 'start': 9138.988, 'duration': 2.745}, {'end': 9145.601, 'text': "And since you got this far, you're probably subscribed already.", 'start': 9142.375, 'duration': 3.226}], 'summary': 'Proposing a new course on javascript for building networks and teaching advanced concepts, with existing content on youtube and a website.', 'duration': 79.5, 'max_score': 9066.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI9066101.jpg'}], 'start': 8116.968, 'title': 'Developing car ai', 'summary': 'Covers implementing fitness functions for car ai, mutating neural network, and evolving a self-driving car to make independent decisions, resulting in a sophisticated car. it includes the use of y coordinate as a fitness function, randomization of network biases and weights, testing different mutation amounts, and creating complex driving scenarios.', 'chapters': [{'end': 8335.04, 'start': 8116.968, 'title': 'Implementing fitness functions for car ai', 'summary': 'Discusses setting up fitness functions for car ai, including the use of y coordinate as a fitness function, caution in choosing fitness functions, and the addition of more cars to the traffic array.', 'duration': 218.072, 'highlights': ['The chapter discusses setting up fitness functions for car AI', 'The addition of more cars to the traffic array', 'Caution in choosing fitness functions']}, {'end': 8516.171, 'start': 8336.141, 'title': 'Mutating neural network', 'summary': 'Demonstrates the process of mutating a neural network by introducing a mutate method, which allows for the randomization of network biases and weights based on a specified percentage.', 'duration': 180.03, 'highlights': ['The mutate method is introduced to randomly adjust network biases and weights based on a specified percentage, with the default set at 100%.', "The process involves iterating through the network's levels and using linear interpolation to update biases and weights, allowing for customization of the mutation amount.", 'The mutate method serves as an enhanced version of the previous randomization method, with the ability to modify the entire network based on the specified mutation percentage.']}, {'end': 9147.865, 'start': 8517.012, 'title': 'Self-driving car evolution', 'summary': 'Details the process of evolving a self-driving car by mutating neural networks, testing different mutation amounts, and creating complex driving scenarios, resulting in the development of a sophisticated car that can avoid collisions and make independent decisions, while also hinting at future courses and projects.', 'duration': 630.853, 'highlights': ['The evolved self-driving car is able to avoid collisions and make independent decisions.', 'Testing different mutation amounts, such as 0.2 and 0.1, to create a more diverse set of neural networks for the self-driving cars.', 'The expansion of driving scenarios to include more cars and complex twists and turns, resulting in the development of a more sophisticated genetic algorithm for the self-driving cars.', 'Potential future plans include creating a new course focused on neural networks, gradually increasing complexity, and exploring additional functionalities such as lane recognition and collision prevention.']}], 'duration': 1030.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Rs_rAxEsAvI/pics/Rs_rAxEsAvI8116968.jpg', 'highlights': ['The evolved self-driving car can avoid collisions and make independent decisions.', 'The addition of more cars to the traffic array.', 'The expansion of driving scenarios to include more cars and complex twists and turns, resulting in the development of a more sophisticated genetic algorithm for the self-driving cars.', 'The chapter discusses setting up fitness functions for car AI.', 'The mutate method is introduced to randomly adjust network biases and weights based on a specified percentage, with the default set at 100%.']}], 'highlights': ['The course covers building a self-driving car simulation without using any libraries, focusing on implementing simple physics, creating a road, simulating sensors, and implementing collision detection.', 'The project setup involves three files: index.html, main.js, and style.css, and the use of Visual Studio Code for coding.', 'The evolved self-driving car can avoid collisions and make independent decisions.', 'The course teaches creating and visualizing a neural network, optimizing it by trial and error, and using hundreds of cars in parallel to save time.', 'Parallelized generation and simulation of 100 AI cars.', 'The addition of more cars to the traffic array.', 'The expansion of driving scenarios to include more cars and complex twists and turns, resulting in the development of a more sophisticated genetic algorithm for the self-driving cars.', 'The instructor emphasizes the limitations of real hardware for tasks like optimizing neural networks, suggesting the use of simulations instead.', 'The neural network controls car movements based on sensor readings and network outputs.', 'The instructor, Radu, holds a PhD in computer science and provides a visual explanation of the math involved in the course.']}