title
Coding Challenge #145: 2D Raycasting

description
In this video, I implement a basic ray casting engine with line segment “surfaces” and vector “rays.” The result simulates a light source casting shadows in a 2D canvas. https://thecodingtrain.com/challenges/145-ray-casting-2d 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/Nqsq3DFv- 🎥 Next video: https://www.youtube.com/watch?v=vYgIKn7iDH8&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🌞 SIGHT & LIGHT by Nicky Case: https://ncase.me/sight-and-light/ 🌞 2d Visibility from Red Blob Games: https://www.redblobgames.com/articles/visibility/ 💾 p5.collide2D: https://github.com/bmoren/p5.collide2D 🗄 Line-line Intersection: https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection Videos: 🎥 Coding Adventure: Ray Marching: https://youtu.be/Cp5WWtMoeKg 🎥 Matrix Math: https://www.youtube.com/watch?v=uSzGdfdOoG8 🎥 Coding Challenge: Rendering Ray Casting: https://www.youtube.com/watch?v=vYgIKn7iDH8 🔴 Coding Train Live 177: https://youtu.be/-6iIc6-Y-kk?t=1548s Timestamps: 0:00:00 Introduction 0:03:34 Coding Starts 0:05:54 Creating a Ray Class 0:09:16 Casting Rays And Finding Intersections 0:19:56 Casting Multiple Rays 0:24:41 Adding Collision Detection For Every Ray 0:26:47 Multiple Boundaries 0:31:23 Moving With Perlin Noise 0:32:41 Suggestions For Improvements Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

detail
{'title': 'Coding Challenge #145: 2D Raycasting', 'heatmap': [{'end': 347.758, 'start': 306.826, 'weight': 0.972}, {'end': 568.047, 'start': 533.804, 'weight': 0.923}, {'end': 1103.756, 'start': 1075.484, 'weight': 1}, {'end': 1168.437, 'start': 1144.353, 'weight': 0.719}], 'summary': 'Presents a 2d raycasting coding challenge, covering topics such as creating classes and ai application, custom ray class and ray casting, intersection testing, implementing ray casting in javascript, and using perlin noise for shape animation and exploring ray casting.', 'chapters': [{'end': 108.042, 'segs': [{'end': 51.37, 'src': 'embed', 'start': 0.189, 'weight': 0, 'content': [{'end': 3.434, 'text': 'Hello, and welcome to a coding challenge, 2D raycasting.', 'start': 0.189, 'duration': 3.245}, {'end': 7.641, 'text': "So what you're about to watch is an edited version of what I did on last week's live stream.", 'start': 4.135, 'duration': 3.506}, {'end': 10.245, 'text': 'This is the result of the example that I made.', 'start': 7.741, 'duration': 2.504}, {'end': 15.073, 'text': 'But before I get started with the coding, let me talk to you a little bit about where I got this idea.', 'start': 10.566, 'duration': 4.507}, {'end': 20.995, 'text': 'So a lot of people shared with me a recent YouTube video from Sebastian Lag about the 2D ray marching algorithm.', 'start': 15.493, 'duration': 5.502}, {'end': 23.497, 'text': 'This is part of his Coding Adventure series.', 'start': 21.556, 'duration': 1.941}, {'end': 30.339, 'text': 'The video is really wonderful and goes through the basic 2D algorithm and gets into all sorts of crazy 3D rendering stuff.', 'start': 23.517, 'duration': 6.822}, {'end': 35.322, 'text': 'So I want to explore that algorithm in a later video, but I wanted to start with something simpler.', 'start': 30.76, 'duration': 4.562}, {'end': 43.185, 'text': 'And I look back, and Brendan Dowd back in 2016 posted a suggestion for me to do 2D ray casting.', 'start': 35.622, 'duration': 7.563}, {'end': 45.186, 'text': "So about three years later, I'm getting to it.", 'start': 43.285, 'duration': 1.901}, {'end': 51.37, 'text': 'And so I was looking for inspiration, and I found inspiration in one of my favorite internet artists, indie game creator, Nikki Case.', 'start': 45.486, 'duration': 5.884}], 'summary': '2d raycasting coding challenge inspired by youtube video and internet artist nikki case.', 'duration': 51.181, 'max_score': 0.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo189.jpg'}], 'start': 0.189, 'title': '2d raycasting coding challenge', 'summary': "Delves into the inspiration behind the 2d raycasting challenge, referencing sebastian lag's video on the 2d ray marching algorithm, brendan dowd's suggestion for 2d ray casting, and nikki case and amit patel's work on 2d shadow effects and visibility, and encourages viewer participation.", 'chapters': [{'end': 108.042, 'start': 0.189, 'title': '2d raycasting coding challenge', 'summary': "Discusses the inspiration behind the 2d raycasting challenge, including references to sebastian lag's video on the 2d ray marching algorithm, brendan dowd's suggestion for 2d ray casting, and nikki case and amit patel's work on 2d shadow effects and visibility, concluding with a call for viewer participation.", 'duration': 107.853, 'highlights': ["The chapter discusses the inspiration behind the 2D raycasting challenge, including references to Sebastian Lag's video on the 2D ray marching algorithm, Brendan Dowd's suggestion for 2D ray casting, and Nikki Case and Amit Patel's work on 2D shadow effects and visibility.", 'Nikki Case made a game called Nothing to Hide with an accompanying explorable explanation that describes the process of creating a 2D shadow effect, while Amit Patel created an interactive essay on 2D visibility with source code in different languages and interactive demos.', 'The chapter concludes with an invitation for viewers to participate in the challenge and share their creative versions at thecodingtrain.com.']}], 'duration': 107.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo189.jpg', 'highlights': ["The chapter delves into the inspiration behind the 2D raycasting challenge, referencing Sebastian Lag's video on the 2D ray marching algorithm, Brendan Dowd's suggestion for 2D ray casting, and Nikki Case and Amit Patel's work on 2D shadow effects and visibility.", 'Nikki Case made a game called Nothing to Hide with an accompanying explorable explanation that describes the process of creating a 2D shadow effect, while Amit Patel created an interactive essay on 2D visibility with source code in different languages and interactive demos.', 'The chapter concludes with an invitation for viewers to participate in the challenge and share their creative versions at thecodingtrain.com.']}, {'end': 347.758, 'segs': [{'end': 133.729, 'src': 'embed', 'start': 108.622, 'weight': 1, 'content': [{'end': 114.644, 'text': 'So what I want to have is I want to have two classes where I can make two kinds of objects in my world.', 'start': 108.622, 'duration': 6.022}, {'end': 116.825, 'text': 'I want to have a boundary.', 'start': 115.244, 'duration': 1.581}, {'end': 120.36, 'text': 'this idea of a boundary.', 'start': 118.939, 'duration': 1.421}, {'end': 126.864, 'text': 'And the boundary really just is line segments between two points, A and B, or start and end, however I want to consider them.', 'start': 120.52, 'duration': 6.344}, {'end': 129.406, 'text': 'Then I also want to have an idea of a ray.', 'start': 127.305, 'duration': 2.101}, {'end': 133.729, 'text': 'And a ray has a position and then maybe a direction.', 'start': 129.806, 'duration': 3.923}], 'summary': 'Create 2 classes for boundary and ray objects in a world.', 'duration': 25.107, 'max_score': 108.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo108622.jpg'}, {'end': 195.133, 'src': 'embed', 'start': 171.992, 'weight': 0, 'content': [{'end': 180.621, 'text': 'But in a future video, what I intend to use this for is also, if I have a vehicle, I want to use this in an AI application.', 'start': 171.992, 'duration': 8.629}, {'end': 186.607, 'text': "If I have a vehicle that's trying to drive along some type of path,", 'start': 181.002, 'duration': 5.605}, {'end': 195.133, 'text': 'If I can give it sensors which are like rays that allow it to see out from in front of it the readings of those sensors,', 'start': 187.228, 'duration': 7.905}], 'summary': 'Using ai and sensors to aid vehicle navigation.', 'duration': 23.141, 'max_score': 171.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo171992.jpg'}, {'end': 347.758, 'src': 'heatmap', 'start': 306.826, 'weight': 0.972, 'content': [{'end': 332.268, 'text': 'Okay Already, already, already, already.', 'start': 306.826, 'duration': 25.442}, {'end': 340.554, 'text': "You'd think by now I wouldn't have this problem.", 'start': 337.712, 'duration': 2.842}, {'end': 345.077, 'text': 'This comes from like 15 years of programming in Java before JavaScript.', 'start': 340.974, 'duration': 4.103}, {'end': 347.758, 'text': "It wasn't that many years, maybe 10.", 'start': 345.097, 'duration': 2.661}], 'summary': 'Experienced 10-15 years in java programming before encountering javascript issues.', 'duration': 40.932, 'max_score': 306.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo306826.jpg'}], 'start': 108.622, 'title': 'Creating classes and ai application', 'summary': 'Discusses creating boundary and ray classes for object interaction and implementing ai technology for vehicle path determination using sensors and neural network, with the aim of future video application.', 'chapters': [{'end': 171.932, 'start': 108.622, 'title': 'Creating ray and boundary classes', 'summary': 'Discusses creating two classes, boundary and ray, in order to determine if a ray hits the boundary and the point of contact, enabling the creation of objects in the world.', 'duration': 63.31, 'highlights': ['The chapter discusses creating two classes, boundary and ray, in order to determine if a ray hits the boundary and the point of contact, enabling the creation of objects in the world.', 'The boundary class represents line segments between two points, A and B, while the ray class has a position and direction, and the goal is to find where the ray hits the boundary.', 'The primary goal is to create a basic ray class and a boundary class to enable every ray to find its point on the boundary, facilitating the creation of various objects in the world.']}, {'end': 347.758, 'start': 171.992, 'title': 'Ai application for vehicle path determination', 'summary': 'Discusses using sensors and neural network to determine the direction for a vehicle to turn while driving on a path, with the intention of implementing it in an ai application for a future video.', 'duration': 175.766, 'highlights': ['Creating a ray class and boundary class in JavaScript for a future AI application for a vehicle using sensors and neural network.', "Discussing the use of sensors as rays to detect the distance from the path's boundary as inputs into a neural network for determining the vehicle's turning direction.", 'Detailing the process of drawing a boundary using vectors and creating a function to draw it in Sketch.js.']}], 'duration': 239.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo108622.jpg', 'highlights': ['Creating a ray class and boundary class in JavaScript for a future AI application for a vehicle using sensors and neural network.', "Discussing the use of sensors as rays to detect the distance from the path's boundary as inputs into a neural network for determining the vehicle's turning direction.", 'The chapter discusses creating two classes, boundary and ray, in order to determine if a ray hits the boundary and the point of contact, enabling the creation of objects in the world.', 'The boundary class represents line segments between two points, A and B, while the ray class has a position and direction, and the goal is to find where the ray hits the boundary.']}, {'end': 945.425, 'segs': [{'end': 376.37, 'src': 'embed', 'start': 347.758, 'weight': 2, 'content': [{'end': 355.644, 'text': "There we go, look! Yay, I have our boundary! Now let's make the ray class.", 'start': 347.758, 'duration': 7.886}, {'end': 358.875, 'text': "I'm going to say class ray.", 'start': 356.974, 'duration': 1.901}, {'end': 362.058, 'text': "And there's so many ways I could do this.", 'start': 359.976, 'duration': 2.082}, {'end': 363.259, 'text': 'I definitely need a constructor.', 'start': 362.078, 'duration': 1.181}, {'end': 369.243, 'text': 'And I want a position, which is going to be a create vector.', 'start': 365.04, 'duration': 4.203}, {'end': 370.364, 'text': 'And this is a little bit..', 'start': 369.303, 'duration': 1.061}, {'end': 376.37, 'text': 'This is a little bit silly, because, ultimately, what is a ray, but a vector?', 'start': 371.445, 'duration': 4.925}], 'summary': 'Creating a ray class with a constructor and a position using a create vector', 'duration': 28.612, 'max_score': 347.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo347758.jpg'}, {'end': 568.047, 'src': 'heatmap', 'start': 533.804, 'weight': 0.923, 'content': [{'end': 541.844, 'text': 'In other words, In other words, I want to say let pt for point equal ray.intersect or cast.', 'start': 533.804, 'duration': 8.04}, {'end': 543.885, 'text': "Let's call it cast against the wall.", 'start': 541.944, 'duration': 1.941}, {'end': 544.886, 'text': "I don't know, it's weird.", 'start': 543.905, 'duration': 0.981}, {'end': 551.329, 'text': "And then if point exists, let's draw a point at point.x, point.y.", 'start': 545.326, 'duration': 6.003}, {'end': 555.531, 'text': "We'll make this white and maybe we'll make it actually an ellipse.", 'start': 551.649, 'duration': 3.882}, {'end': 568.047, 'text': "So this is the idea, I have a wall, I have a ray, and I'm going to cast the ray towards the wall, and if I get a point back, I'm going to draw it.", 'start': 559.636, 'duration': 8.411}], 'summary': 'A program casts a ray against a wall and draws the point if it exists.', 'duration': 34.243, 'max_score': 533.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo533804.jpg'}, {'end': 677.939, 'src': 'embed', 'start': 624.115, 'weight': 0, 'content': [{'end': 629.16, 'text': "The first step is just to determine if it's even intersecting at all.", 'start': 624.115, 'duration': 5.045}, {'end': 633.537, 'text': 'Is it? intersecting the line segment are known.', 'start': 629.921, 'duration': 3.616}, {'end': 636.858, 'text': 'And only if it is, then find that point.', 'start': 633.817, 'duration': 3.041}, {'end': 643.542, 'text': "And so, in order to do this and I'll go to the Wikipedia page itself there's actually two values that I need to calculate,", 'start': 637.239, 'duration': 6.303}, {'end': 645.763, 'text': 'one called t and one called u.', 'start': 643.542, 'duration': 2.221}, {'end': 655.888, 'text': 'If t is between 0 and 1 and u is greater than 0, then the answer is yes.', 'start': 645.763, 'duration': 10.125}, {'end': 657.468, 'text': 'Both of these have to be true.', 'start': 656.228, 'duration': 1.24}, {'end': 663.211, 'text': 'Once the answer to that is yes, I can use t and u to then calculate the actual point itself.', 'start': 658.029, 'duration': 5.182}, {'end': 665.072, 'text': "I'm going to let you enjoy this.", 'start': 663.412, 'duration': 1.66}, {'end': 667.914, 'text': 'You could pause and read this whole Wikipedia page yourself.', 'start': 665.233, 'duration': 2.681}, {'end': 670.455, 'text': "But I'm going to scroll down to the important part.", 'start': 668.214, 'duration': 2.241}, {'end': 671.676, 'text': 'And that is right here.', 'start': 670.776, 'duration': 0.9}, {'end': 677.939, 'text': 'The intersection point falls within the first line segment if t is between 0 and 1.', 'start': 672.136, 'duration': 5.803}], 'summary': 'Determine if line segment intersects at t and u, then calculate point.', 'duration': 53.824, 'max_score': 624.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo624115.jpg'}, {'end': 846.03, 'src': 'embed', 'start': 814.486, 'weight': 3, 'content': [{'end': 822.773, 'text': "So now that I've kind of renamed all of this and I could do the actual math with vector operations and just keep these variable names,", 'start': 814.486, 'duration': 8.287}, {'end': 828.278, 'text': "but this is going to let me make sure that the Wikipedia formula matches exactly what I'm doing here.", 'start': 822.773, 'duration': 5.505}, {'end': 832.825, 'text': 'So the first thing is to calculate the denominator.', 'start': 828.979, 'duration': 3.846}, {'end': 834.807, 'text': 'Can I remember this? x1, x2, y3, y4, y1, y2, x3, x4.', 'start': 833.045, 'duration': 1.762}, {'end': 846.03, 'text': 'Now, this is the formula implemented as the denominator.', 'start': 842.048, 'duration': 3.982}], 'summary': 'Renamed variables to match wikipedia formula for exact match in calculations.', 'duration': 31.544, 'max_score': 814.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo814486.jpg'}], 'start': 347.758, 'title': 'Custom ray class and ray casting', 'summary': 'Covers creating a custom ray class for vector visualization, implementing a draw function with a multiplier of 10, and implementing a ray casting algorithm to determine intersection points with emphasis on t and u values, and a reference to p5.collide2d library.', 'chapters': [{'end': 453.581, 'start': 347.758, 'title': 'Creating ray class for vector visualization', 'summary': 'Discusses creating a custom ray class to represent a vector, its position, and direction, and implementing a draw function to visualize the ray, with a multiply factor of 10 for better visibility.', 'duration': 105.823, 'highlights': ['The ray class is created to represent a vector with a position and direction, initialized at an xy location.', 'A draw function is implemented to visualize the ray by drawing a line from the position to the direction, with a multiply factor of 10 for better visibility.', 'The ray is initialized with a direction of (0, 1) and drawn as a unit vector, with a length of one pixel, which is then multiplied by 10 for better visualization.']}, {'end': 945.425, 'start': 453.681, 'title': 'Implementing ray casting algorithm', 'summary': 'Discusses implementing a ray casting algorithm to determine the intersection point between a ray and a wall, emphasizing the calculation of t and u values for line intersection and handling parallel lines, with a reference to p5.collide2d library for geometry operations.', 'duration': 491.744, 'highlights': ['The chapter emphasizes the calculation of t and u values to determine if a line and a wall intersect, with the condition that if t is between 0 and 1 and u is greater than 0, the answer is yes. The first step is to determine if the line and the wall intersect, with the condition that t should be between 0 and 1 and u should be greater than 0.', 'The transcript mentions the handling of parallel lines, where if the denominator is 0, indicating that the boundary and the ray are perfectly parallel, the function returns null. The function returns null if the denominator, calculated in the formula for line intersection, equals zero, indicating that the boundary and the ray are perfectly parallel.', "There's a reference to the p5.collide2d library for geometry operations, offering functionality for line-line intersection, line-circle intersection, and circle-rectangle intersection. The transcript mentions the p5.collide2d library, which provides functionality for various geometry operations, including line-line intersection, line-circle intersection, and circle-rectangle intersection."]}], 'duration': 597.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo347758.jpg', 'highlights': ['A draw function is implemented to visualize the ray by drawing a line from the position to the direction, with a multiply factor of 10 for better visibility.', 'The ray class is created to represent a vector with a position and direction, initialized at an xy location.', 'The chapter emphasizes the calculation of t and u values to determine if a line and a wall intersect, with the condition that if t is between 0 and 1 and u is greater than 0, the answer is yes.', "There's a reference to the p5.collide2d library for geometry operations, offering functionality for line-line intersection, line-circle intersection, and circle-rectangle intersection."]}, {'end': 1346.52, 'segs': [{'end': 1043.435, 'src': 'embed', 'start': 1015.807, 'weight': 0, 'content': [{'end': 1020.489, 'text': 'True! There is a point of intersection! Yay! So this is working now.', 'start': 1015.807, 'duration': 4.682}, {'end': 1021.449, 'text': 'Will I get false?', 'start': 1020.549, 'duration': 0.9}, {'end': 1029.861, 'text': 'So the chat is pointing out that I could just return the Boolean result of that and I would do that if this is all that I want to do.', 'start': 1023.134, 'duration': 6.727}, {'end': 1034.105, 'text': "but ultimately, if that's true, then I want to go and calculate the actual point itself.", 'start': 1029.861, 'duration': 4.244}, {'end': 1036.828, 'text': "So that's why I'm breaking this out into a larger if statement.", 'start': 1034.145, 'duration': 2.683}, {'end': 1043.435, 'text': 'Now, I need to do something where I actually set the direction of the ray.', 'start': 1037.909, 'duration': 5.526}], 'summary': 'Successful intersection found, further calculations needed for ray direction.', 'duration': 27.628, 'max_score': 1015.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1015807.jpg'}, {'end': 1103.756, 'src': 'heatmap', 'start': 1075.484, 'weight': 1, 'content': [{'end': 1081.77, 'text': "So I'm just creating a vector that's pointing towards, this is kind of like, let's actually make this function called lookAt.", 'start': 1075.484, 'duration': 6.286}, {'end': 1092.739, 'text': 'Like I want to look at this particular point and then in draw what I can do is I can say ray look at mouseX mouseY.', 'start': 1082.07, 'duration': 10.669}, {'end': 1095.101, 'text': "So now let's see what happens.", 'start': 1093.72, 'duration': 1.381}, {'end': 1099.533, 'text': 'So true, true, true, but if I point up, undefined.', 'start': 1096.431, 'duration': 3.102}, {'end': 1103.756, 'text': 'Right here it starts being true, true, true, undefined, undefined, undefined.', 'start': 1099.994, 'duration': 3.762}], 'summary': "Creating a 'lookat' function to track points, with some undefined outcomes.", 'duration': 28.272, 'max_score': 1075.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1075484.jpg'}, {'end': 1190.04, 'src': 'heatmap', 'start': 1144.353, 'weight': 2, 'content': [{'end': 1152.879, 'text': 'And then the Y is, oops, is Y1 plus T times Y2 minus Y1.', 'start': 1144.353, 'duration': 8.526}, {'end': 1161.793, 'text': 'y1 plus t times y2 minus y1, and then I can say return that point.', 'start': 1154.569, 'duration': 7.224}, {'end': 1168.437, 'text': 'So now I should be able to go back here, and I should be able to add this, and here we go.', 'start': 1162.954, 'duration': 5.483}, {'end': 1175.446, 'text': "Look, I'm casting my ray all the way up to the edge.", 'start': 1172.403, 'duration': 3.043}, {'end': 1179.229, 'text': 'So you might rightfully be wondering is this really working??', 'start': 1176.127, 'duration': 3.102}, {'end': 1190.04, 'text': "I mean because I kind of set this up in a really simple scenario where the line is perfectly vertical and the ray is right here positioned so that it's kind of pointed directly at it from an obvious location.", 'start': 1179.27, 'duration': 10.77}], 'summary': 'Casting ray with y1 + t*y2-y1 to find intersection point.', 'duration': 45.687, 'max_score': 1144.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1144353.jpg'}, {'end': 1303.491, 'src': 'embed', 'start': 1270.121, 'weight': 3, 'content': [{'end': 1282.686, 'text': "And I am going to say, this.rays equals a new ray, position.x, position.y, and then I'm going to give it an angle.", 'start': 1270.121, 'duration': 12.565}, {'end': 1284.926, 'text': 'So I am now going to.', 'start': 1283.846, 'duration': 1.08}, {'end': 1296.109, 'text': "when I create this.rays index, i I'm going to make it so when I create a ray, I give it in addition to its position, I give it its angle.", 'start': 1284.926, 'duration': 11.183}, {'end': 1303.491, 'text': 'Actually, if all of the rays are going to move as the particle moves, then, to be honest,', 'start': 1296.849, 'duration': 6.642}], 'summary': 'Creating new rays with positions and angles for movement.', 'duration': 33.37, 'max_score': 1270.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1270121.jpg'}], 'start': 946.366, 'title': 'Intersection testing and ray casting', 'summary': 'Involves testing for intersection points between two lines and creating a ray casting system to simulate rays from multiple vehicles in a world with many boundaries.', 'chapters': [{'end': 1036.828, 'start': 946.366, 'title': 'Checking for intersection points', 'summary': "Involves testing for intersection points between two lines using the conditions 't' being between 0 and 1 and 'u' being greater than 0, with the goal of returning 'true' if an intersection point exists, and 'false' if not.", 'duration': 90.462, 'highlights': ["The chapter involves testing for intersection points using the conditions 't' between 0 and 1 and 'u' greater than 0. The conditions for testing intersection points are 't' being between 0 and 1 and 'u' being greater than 0.", "The goal is to return 'true' if there is an intersection point and 'false' if there isn't. The objective is to return 'true' if an intersection point exists, and 'false' if not.", 'The chapter discusses the process of testing for intersection points and the subsequent calculation of the actual point of intersection. The discussion involves testing for intersection points and the subsequent calculation of the actual point of intersection.']}, {'end': 1346.52, 'start': 1037.909, 'title': 'Ray casting and vector manipulation', 'summary': 'Covers the process of creating a ray casting system, including setting the ray direction, looking at a point, and creating a vector to cast the ray, with the goal of eventually simulating rays from multiple vehicles in a world with many boundaries.', 'duration': 308.611, 'highlights': ['A function called set direction is added to create a vector pointing towards a specific point, demonstrated by using the lookAt function to cast a ray at the mouseX mouseY coordinates.', 'The process of creating a vector to determine the point at which a ray intersects a boundary is detailed, involving mathematical calculations for x and y values, culminating in the successful casting of a ray up to the edge.', 'The decision to create a particle class to simulate multiple moving vehicles and the initialization of an array of rays, each with specific angles, in preparation for simulating rays from multiple vehicles in a world with many boundaries.']}], 'duration': 400.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo946366.jpg', 'highlights': ["The chapter involves testing for intersection points using the conditions 't' between 0 and 1 and 'u' greater than 0.", "The goal is to return 'true' if there is an intersection point and 'false' if there isn't.", 'A function called set direction is added to create a vector pointing towards a specific point, demonstrated by using the lookAt function to cast a ray at the mouseX mouseY coordinates.', 'The decision to create a particle class to simulate multiple moving vehicles and the initialization of an array of rays, each with specific angles, in preparation for simulating rays from multiple vehicles in a world with many boundaries.']}, {'end': 1883.299, 'segs': [{'end': 1514.514, 'src': 'embed', 'start': 1483.283, 'weight': 5, 'content': [{'end': 1487.466, 'text': 'so I should be particle look.', 'start': 1483.283, 'duration': 4.183}, {'end': 1490.668, 'text': "look, I'll call particle look and I need to give it the wall.", 'start': 1487.466, 'duration': 3.202}, {'end': 1497.074, 'text': 'Not sure if this is the smartest object-oriented structure, but this will work.', 'start': 1492.87, 'duration': 4.204}, {'end': 1504.399, 'text': "so look at a wall and then I'm going to say once again I'm going to look at all the rays and I'm going to have every ray.", 'start': 1497.074, 'duration': 7.325}, {'end': 1514.514, 'text': 'and when I say check, What is it called in cast? Cast wall.', 'start': 1504.399, 'duration': 10.115}], 'summary': 'Creating a particle system to interact with a wall, using object-oriented structure and casting rays for interaction.', 'duration': 31.231, 'max_score': 1483.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1483283.jpg'}, {'end': 1625.624, 'src': 'embed', 'start': 1588.939, 'weight': 4, 'content': [{'end': 1589.879, 'text': 'Right, still works.', 'start': 1588.939, 'duration': 0.94}, {'end': 1591.24, 'text': 'I can move over here.', 'start': 1590.399, 'duration': 0.841}, {'end': 1595.421, 'text': 'So these rays are hitting that boundary from wherever they are.', 'start': 1591.94, 'duration': 3.481}, {'end': 1598.302, 'text': 'I could draw the non-hitting rays, like with an alpha.', 'start': 1595.501, 'duration': 2.801}, {'end': 1600.722, 'text': 'That could be kind of interesting, just all the way.', 'start': 1598.522, 'duration': 2.2}, {'end': 1603.943, 'text': 'I could also add boundaries to the edge of the window.', 'start': 1600.742, 'duration': 3.201}, {'end': 1607.364, 'text': 'But what happens now, the real thing is to have multiple boundaries.', 'start': 1604.143, 'duration': 3.221}, {'end': 1609.025, 'text': "So let's make multiple boundaries.", 'start': 1607.704, 'duration': 1.321}, {'end': 1611.745, 'text': "I'm going to make this called walls, which is an array.", 'start': 1609.045, 'duration': 2.7}, {'end': 1617.587, 'text': "Then I'm going to say for let i equals zero, i is less than five, i plus plus.", 'start': 1612.285, 'duration': 5.302}, {'end': 1625.624, 'text': "and I'm going to say walls index i is a new boundary and let's, I don't know.", 'start': 1620.253, 'duration': 5.371}], 'summary': 'The transcript discusses creating multiple boundaries using an array in a programming context.', 'duration': 36.685, 'max_score': 1588.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1588939.jpg'}, {'end': 1859.905, 'src': 'embed', 'start': 1826.906, 'weight': 0, 'content': [{'end': 1840.954, 'text': "So now, if closest is a thing, then now I'm going to draw that line from this.pos.x, this.pos.y, to closest.x, closest.y.", 'start': 1826.906, 'duration': 14.048}, {'end': 1848.239, 'text': 'So this is now the same exact algorithm, but for each ray, instead of seeing if there is a point for each ray.', 'start': 1841.395, 'duration': 6.844}, {'end': 1851.081, 'text': "I'm finding is there a point and is it the closest one?", 'start': 1848.239, 'duration': 2.842}, {'end': 1854.463, 'text': "So let's see if that works.", 'start': 1851.981, 'duration': 2.482}, {'end': 1856.463, 'text': 'Yeah, this, oh no.', 'start': 1855.322, 'duration': 1.141}, {'end': 1857.964, 'text': 'So why do I, I have a bug here.', 'start': 1856.503, 'duration': 1.461}, {'end': 1859.905, 'text': 'Ah, here we go.', 'start': 1859.264, 'duration': 0.641}], 'summary': 'Implementing algorithm to find closest point for each ray.', 'duration': 32.999, 'max_score': 1826.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1826906.jpg'}], 'start': 1346.921, 'title': 'Implementing ray casting in javascript', 'summary': 'Details the process of implementing ray casting in javascript to detect intersections with multiple boundaries and render shadows, including creating and drawing rays from a particle, identifying coding errors, and checking for the closest intersection point for each ray.', 'chapters': [{'end': 1553.851, 'start': 1346.921, 'title': 'Particle rays intersection', 'summary': 'Details the process of creating and drawing rays from a particle, identifying and fixing coding errors, and visualizing the rays intersecting with a boundary.', 'duration': 206.93, 'highlights': ['The chapter covers creating a new particle and drawing rays from it, aiming to visualize the rays intersecting with a boundary.', 'The transcript involves identifying and rectifying coding errors related to particle and ray functions, such as undefined property errors and loop iteration issues.', "The process includes the utilization of the 'cast' function to identify the intersection point of rays with a boundary, and subsequently visualizing the intersecting rays with the boundary."]}, {'end': 1883.299, 'start': 1553.851, 'title': 'Implementing ray casting in javascript', 'summary': 'Explains the process of implementing ray casting in javascript to detect intersections with multiple boundaries and render shadows, with an example of checking for the closest intersection point for each ray and drawing the corresponding line.', 'duration': 329.448, 'highlights': ['Implemented ray casting to detect intersections with multiple boundaries The chapter demonstrates the process of implementing ray casting in JavaScript to detect intersections with multiple boundaries by iterating through an array of walls and checking for the closest intersection point for each ray.', "Process of finding the closest intersection point for each ray The detailed process of finding the closest intersection point for each ray involves iterating through all the walls, calculating the distance between the particle's position and the intersection point, and checking and updating the record point for the closest intersection.", 'Debugging the implementation The debugging process involves identifying and correcting the issue of resetting the record to infinity and ensuring that the record is appropriately updated while iterating through all the walls to detect the closest intersection point for each ray.']}], 'duration': 536.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1346921.jpg', 'highlights': ['The chapter covers creating a new particle and drawing rays from it, aiming to visualize the rays intersecting with a boundary.', 'Implemented ray casting to detect intersections with multiple boundaries by iterating through an array of walls and checking for the closest intersection point for each ray.', "The process includes the utilization of the 'cast' function to identify the intersection point of rays with a boundary, and subsequently visualizing the intersecting rays with the boundary.", "The detailed process of finding the closest intersection point for each ray involves iterating through all the walls, calculating the distance between the particle's position and the intersection point, and checking and updating the record point for the closest intersection.", 'The transcript involves identifying and rectifying coding errors related to particle and ray functions, such as undefined property errors and loop iteration issues.', 'The debugging process involves identifying and correcting the issue of resetting the record to infinity and ensuring that the record is appropriately updated while iterating through all the walls to detect the closest intersection point for each ray.']}, {'end': 2150.758, 'segs': [{'end': 1915.34, 'src': 'embed', 'start': 1884.502, 'weight': 0, 'content': [{'end': 1885.603, 'text': 'Let me do one more thing to this.', 'start': 1884.502, 'duration': 1.101}, {'end': 1886.403, 'text': 'This is really done.', 'start': 1885.683, 'duration': 0.72}, {'end': 1888.164, 'text': "There's so much more that could be done with this.", 'start': 1886.423, 'duration': 1.741}, {'end': 1891.867, 'text': "And I'm really having a hard time stopping myself.", 'start': 1888.324, 'duration': 3.543}, {'end': 1892.907, 'text': "But I'm going to do one thing.", 'start': 1892.127, 'duration': 0.78}, {'end': 1894.849, 'text': 'I want to let it just move without the mouse.', 'start': 1892.947, 'duration': 1.902}, {'end': 1900.692, 'text': "And the way that I'm going to do that is I am going to just use Perlin Noise.", 'start': 1896.109, 'duration': 4.583}, {'end': 1904.395, 'text': "So let's say x offset and y offset.", 'start': 1901.013, 'duration': 3.382}, {'end': 1910.339, 'text': "And I know there was a whole long discussion about what's Perlin Noise versus simplex versus open simplex.", 'start': 1904.775, 'duration': 5.564}, {'end': 1913.32, 'text': 'Let me just say Perlin noise, please, please let me just say.', 'start': 1910.899, 'duration': 2.421}, {'end': 1915.34, 'text': 'You can find those videos if you want.', 'start': 1913.36, 'duration': 1.98}], 'summary': 'Experimenting with perlin noise to create motion without the mouse.', 'duration': 30.838, 'max_score': 1884.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1884502.jpg'}, {'end': 2111.157, 'src': 'embed', 'start': 2088.362, 'weight': 1, 'content': [{'end': 2095.627, 'text': "And I think there are a lot of creative possibilities that you could explore building on top of this very basic example that I've made.", 'start': 2088.362, 'duration': 7.265}, {'end': 2097.288, 'text': "I haven't added color to this.", 'start': 2096.087, 'duration': 1.201}, {'end': 2099.77, 'text': 'The boundaries are just in random locations.', 'start': 2097.769, 'duration': 2.001}, {'end': 2101.651, 'text': 'They could be drawn by a user.', 'start': 2099.81, 'duration': 1.841}, {'end': 2103.852, 'text': 'They could be part of some generative pattern.', 'start': 2101.871, 'duration': 1.981}, {'end': 2111.157, 'text': "How the actual light source moves about the space doesn't have to be by user interaction or Perlin noise.", 'start': 2105.734, 'duration': 5.423}], 'summary': 'Creative possibilities for building on basic example with user-drawn boundaries and generative patterns.', 'duration': 22.795, 'max_score': 2088.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo2088362.jpg'}], 'start': 1884.502, 'title': 'Perlin noise and ray casting', 'summary': 'Discusses using perlin noise for shape animation and explores ray casting with perlin noise, covering rendering, boundaries, ray angles, and potential neural network and 3d scene applications.', 'chapters': [{'end': 1949.931, 'start': 1884.502, 'title': 'Animating shapes with perlin noise', 'summary': 'Discusses using perlin noise to create automatic movement for shapes, enhancing visual interest and creating a more engaging experience for the viewer.', 'duration': 65.429, 'highlights': ['Using Perlin Noise to automatically move shapes, creating a more visually engaging experience for the viewer.', 'Increasing x and y offsets by small amounts to achieve diagonal movement, enhancing the visual appeal of the animation.', 'Discussing the potential for further development and enhancements in the current implementation.']}, {'end': 2150.758, 'start': 1950.351, 'title': 'Ray casting and rendering exploration', 'summary': 'Explores implementing ray casting with perlin noise, rendering the view, adding boundaries, adjusting ray angles, and potential applications for neural networks and 3d scene rendering.', 'duration': 200.407, 'highlights': ['Implementing ray casting with Perlin noise and rendering the view The chapter demonstrates ray casting from a particle moving with Perlin noise in all 360 directions, rendering the view with shadows and boundaries.', 'Potential applications for neural networks and 3D scene rendering The author discusses using the implemented ray casting as sensors for a neural network to learn movement based on boundary detection and mentions the potential to render a 3D scene similar to classic games like Doom or Wolfenstein 3D.', "Adjusting ray angles and adding boundaries The chapter describes adjusting the angle increments for ray casting from 10 to 1 degree, adding boundaries along the edges, and the chat's request for more rays."]}], 'duration': 266.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TOEi6T2mtHo/pics/TOEi6T2mtHo1884502.jpg', 'highlights': ['Using Perlin Noise to automatically move shapes, creating a more visually engaging experience for the viewer.', 'Implementing ray casting with Perlin noise and rendering the view with shadows and boundaries.', 'Potential applications for neural networks and 3D scene rendering.']}], 'highlights': ["The chapter delves into the inspiration behind the 2D raycasting challenge, referencing Sebastian Lag's video on the 2D ray marching algorithm, Brendan Dowd's suggestion for 2D ray casting, and Nikki Case and Amit Patel's work on 2D shadow effects and visibility.", 'Nikki Case made a game called Nothing to Hide with an accompanying explorable explanation that describes the process of creating a 2D shadow effect, while Amit Patel created an interactive essay on 2D visibility with source code in different languages and interactive demos.', 'The chapter concludes with an invitation for viewers to participate in the challenge and share their creative versions at thecodingtrain.com.', 'Creating a ray class and boundary class in JavaScript for a future AI application for a vehicle using sensors and neural network.', 'The chapter discusses creating two classes, boundary and ray, in order to determine if a ray hits the boundary and the point of contact, enabling the creation of objects in the world.', 'A draw function is implemented to visualize the ray by drawing a line from the position to the direction, with a multiply factor of 10 for better visibility.', 'The chapter emphasizes the calculation of t and u values to determine if a line and a wall intersect, with the condition that if t is between 0 and 1 and u is greater than 0, the answer is yes.', "The chapter involves testing for intersection points using the conditions 't' between 0 and 1 and 'u' greater than 0.", 'The decision to create a particle class to simulate multiple moving vehicles and the initialization of an array of rays, each with specific angles, in preparation for simulating rays from multiple vehicles in a world with many boundaries.', 'The chapter covers creating a new particle and drawing rays from it, aiming to visualize the rays intersecting with a boundary.', 'Implemented ray casting to detect intersections with multiple boundaries by iterating through an array of walls and checking for the closest intersection point for each ray.', "The process includes the utilization of the 'cast' function to identify the intersection point of rays with a boundary, and subsequently visualizing the intersecting rays with the boundary.", "The detailed process of finding the closest intersection point for each ray involves iterating through all the walls, calculating the distance between the particle's position and the intersection point, and checking and updating the record point for the closest intersection.", 'Using Perlin Noise to automatically move shapes, creating a more visually engaging experience for the viewer.', 'Implementing ray casting with Perlin noise and rendering the view with shadows and boundaries.', 'Potential applications for neural networks and 3D scene rendering.']}