title
Coding Challenge #146: Rendering Raycasting
description
Building off of the previous coding challenge (2D Ray Casting) I attempt to make my own version the original Wolfenstein 3D Raycasting engine and visualize the "field of view" of the moving particle. Code: https://thecodingtrain.com/challenges/146-rendering-ray-casting
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/yEzlR0_zq
đĨ Previous video: https://youtu.be/TOEi6T2mtHo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/l0HoJHc-63Q?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Community Suggested References:
đž Code-It-Yourself! First Person Shooter (Quick and Simple C++): https://youtu.be/xW8skO7MFYw
References:
đ Gustavo Pezzi's Raycast 3D: http://www.gustavopezzi.com/projects/raycast3d/
đ Lode's Raycasting Tutorial: https://lodev.org/cgtutor/raycasting.html
Live Stream Archive:
đ´ Coding Train Live 177: https://youtu.be/-6iIc6-Y-kk?t=10910s
Related Coding Challenges:
đ #145 Ray Casting 2D: https://youtu.be/TOEi6T2mtHo
đ #168 The Mandelbulb: https://youtu.be/NJCiUVGiNyA
Timestamps:
0:00:00 Introduction
0:02:21 Coding Starts
0:03:15 Creating The Rendering Scene
0:09:22 Adjusting The Perspective
0:11:02 Adding Rotation
0:15:06 Fixing The View and Brightness
0:20:55 Changing The Field of View Dynamically
0:22:44 Small Fixes and Maintenance
0:27:50 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://thecodingtrain.com/discord
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đī¸ 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
#raycasting #gamedevelopment #2draycasting #raymarching #wolfenstein3draycasting #p5js
detail
{'title': 'Coding Challenge #146: Rendering Raycasting', 'heatmap': [{'end': 156.458, 'start': 128.199, 'weight': 0.733}, {'end': 416.784, 'start': 394.392, 'weight': 0.75}, {'end': 642.652, 'start': 617.856, 'weight': 1}, {'end': 1490.41, 'start': 1471.873, 'weight': 0.834}, {'end': 1546.164, 'start': 1521.304, 'weight': 0.779}, {'end': 1615.4, 'start': 1589.318, 'weight': 0.721}], 'summary': "Presents a 2d ray casting project modification to limit the agent's field of vision, creating a canvas with a 40-degree range of view, debugging a 3d view, implementing 3d view and rotational functionality, and adjusting rendering and movement, including field of view implementation for a 360-degree view.", 'chapters': [{'end': 140.973, 'segs': [{'end': 140.973, 'src': 'embed', 'start': 63.413, 'weight': 0, 'content': [{'end': 74.121, 'text': 'So the modifications that I need to make are number one is I want to think about this agent as only being able to see within a particular cone of vision.', 'start': 63.413, 'duration': 10.708}, {'end': 80.725, 'text': "So as a human being in a sort of like first person style game, you don't have eyes in the back of your head.", 'start': 74.801, 'duration': 5.924}, {'end': 81.506, 'text': "You can't see in 360 view.", 'start': 80.745, 'duration': 0.761}, {'end': 86.089, 'text': "So I'm going to make an arbitrary decision about what that range of view is.", 'start': 81.546, 'duration': 4.543}, {'end': 100.038, 'text': 'Then what I want to do is, assuming that range of view has, say, 400 angles between zero and 400, and I have a view between zero and 400, each ray,', 'start': 86.71, 'duration': 13.328}, {'end': 106.421, 'text': "the distance at which it sees something, will correspond to a slice, a pixel slice that I'll render something in.", 'start': 100.038, 'duration': 6.383}, {'end': 114.045, 'text': "So the farther away it is, the smaller the slice is that I'll render, maybe the darker, the closer, the larger and the brighter,", 'start': 106.761, 'duration': 7.284}, {'end': 119.488, 'text': 'and that should give me the sense of looking out into this maze of walls, I think.', 'start': 114.045, 'duration': 5.443}, {'end': 127.919, 'text': "This is, You know, along the lines of actual ray tracing, it's an oversimplification of ray tracing itself.", 'start': 120.048, 'duration': 7.871}, {'end': 139.652, 'text': 'But this gets at that idea of casting out rays from a point in space and using what those rays see and the distance of what they see as the data for rendering the 3D scene.', 'start': 128.199, 'duration': 11.453}, {'end': 140.973, 'text': 'All right.', 'start': 140.353, 'duration': 0.62}], 'summary': 'Modifications include defining a cone of vision, rendering based on ray angles and distances for a realistic 3d scene.', 'duration': 77.56, 'max_score': 63.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH863413.jpg'}], 'start': 1.018, 'title': '2d ray casting project modification', 'summary': "Explores modifying a 2d ray casting project to limit the agent's field of vision to a specific cone, rendering the scene based on object distance, aiming for depth perception, and exploring ray tracing concepts.", 'chapters': [{'end': 140.973, 'start': 1.018, 'title': '2d ray casting project modification', 'summary': "Discusses modifying a 2d ray casting project to limit the agent's field of vision to a specific cone and rendering the scene based on the distance of objects, aiming for a sense of depth perception and exploring the concept of ray tracing.", 'duration': 139.955, 'highlights': ["Modifying the agent's field of vision to a specific cone Limiting the agent's vision to a cone rather than 360 degrees to simulate a realistic field of view.", 'Rendering the scene based on the distance of objects Rendering objects based on their distance, with farther objects appearing smaller and darker, and closer objects appearing larger and brighter.', 'Exploring the concept of ray tracing Discussing the simplified concept of ray tracing and using the data from the cast rays to render the 3D scene.']}], 'duration': 139.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81018.jpg', 'highlights': ["Modifying the agent's field of vision to a specific cone to simulate a realistic field of view.", 'Rendering objects based on their distance, with farther objects appearing smaller and darker, and closer objects appearing larger and brighter.', 'Discussing the simplified concept of ray tracing and using the data from the cast rays to render the 3D scene.']}, {'end': 483.605, 'segs': [{'end': 186.122, 'src': 'embed', 'start': 156.898, 'weight': 0, 'content': [{'end': 165.18, 'text': 'So the first thing that I need to do with my particle is I need to not let it see out in perfect 360 degrees.', 'start': 156.898, 'duration': 8.282}, {'end': 167.541, 'text': "So I'm going to pick something really arbitrary.", 'start': 165.46, 'duration': 2.081}, {'end': 173.53, 'text': "And I'm going to say, let's actually give it a 40 degree range of view.", 'start': 168.221, 'duration': 5.309}, {'end': 176.575, 'text': "So I'll just do 320 to 360, or 0 to 40 degrees.", 'start': 173.59, 'duration': 2.985}, {'end': 177.838, 'text': "Let's just try that, see what happens.", 'start': 176.595, 'duration': 1.243}, {'end': 184.34, 'text': "So okay, so that's what it's actually able to see.", 'start': 182.318, 'duration': 2.022}, {'end': 186.122, 'text': "So it's not turning.", 'start': 184.6, 'duration': 1.522}], 'summary': "Adjusting particle's view to 40 degrees range to observe its behavior.", 'duration': 29.224, 'max_score': 156.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8156898.jpg'}, {'end': 286.121, 'src': 'embed', 'start': 210.665, 'weight': 1, 'content': [{'end': 217.41, 'text': 'Because ultimately what I want to do is fill this scene with 40 distance values.', 'start': 210.665, 'duration': 6.745}, {'end': 218.691, 'text': 'I can just make it an empty array.', 'start': 217.51, 'duration': 1.181}, {'end': 229.661, 'text': 'So as the particle looks at the walls, maybe I should have that return an array.', 'start': 220.992, 'duration': 8.669}, {'end': 233.725, 'text': 'So I want it to return the array of the scene.', 'start': 230.282, 'duration': 3.443}, {'end': 235.967, 'text': "I'm not so sure about this, but I'm going to keep going.", 'start': 234.165, 'duration': 1.802}, {'end': 241.032, 'text': 'So now, let me create that scene here.', 'start': 236.848, 'duration': 4.184}, {'end': 267.168, 'text': "And then for each ray, assuming there's a closest, I want to say the scene index i is that record distance.", 'start': 242.853, 'duration': 24.315}, {'end': 272.271, 'text': "if there isn't a closest, then that scene index i is infinity.", 'start': 267.168, 'duration': 5.103}, {'end': 276.959, 'text': 'I think it would get that actually, because record starts as infinity.', 'start': 274.138, 'duration': 2.821}, {'end': 280.32, 'text': 'So I can actually just do this right after here.', 'start': 277.239, 'duration': 3.081}, {'end': 286.121, 'text': "So all I'm doing is detecting that distance and keeping it in an array.", 'start': 280.94, 'duration': 5.181}], 'summary': 'Create an array with 40 distance values from the scene for particle detection.', 'duration': 75.456, 'max_score': 210.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8210665.jpg'}, {'end': 379.477, 'src': 'embed', 'start': 319.456, 'weight': 4, 'content': [{'end': 320.517, 'text': 'This is really just..', 'start': 319.456, 'duration': 1.061}, {'end': 325.068, 'text': 'This is really just giving me that array.', 'start': 322.967, 'duration': 2.101}, {'end': 330.691, 'text': 'So I have a scene and I have the width based on the length.', 'start': 325.468, 'duration': 5.223}, {'end': 343.319, 'text': 'and now what I want to do is I want to draw a rectangle at i times, w, comma zero with a width of w and a height of right.', 'start': 330.691, 'duration': 12.628}, {'end': 343.939, 'text': 'now just height.', 'start': 343.319, 'duration': 0.62}, {'end': 349.77, 'text': "So I'm going to do this, I'm going to say fill, based on seeing the distance.", 'start': 344.079, 'duration': 5.691}, {'end': 350.47, 'text': 'Just try that.', 'start': 349.93, 'duration': 0.54}, {'end': 351.851, 'text': 'Just try something for right now.', 'start': 350.49, 'duration': 1.361}, {'end': 357.914, 'text': "I'm going to say translate to the middle because I want to draw this on the right hand side.", 'start': 352.231, 'duration': 5.683}, {'end': 360.915, 'text': 'Push and pop.', 'start': 358.474, 'duration': 2.441}, {'end': 371.633, 'text': "So just to revisit this, what am I doing? Basically, what I'm doing is I'm recording all of those distance values, all these rays.", 'start': 364.25, 'duration': 7.383}, {'end': 376.296, 'text': "How far is the thing that it saw? I'm recording every one of those distances in an array.", 'start': 371.954, 'duration': 4.342}, {'end': 377.716, 'text': "There's currently 40 elements.", 'start': 376.316, 'duration': 1.4}, {'end': 379.477, 'text': 'Those are in an array called scene.', 'start': 378.116, 'duration': 1.361}], 'summary': 'Using an array to draw rectangles based on distance values, with 40 elements in the array called scene.', 'duration': 60.021, 'max_score': 319.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8319456.jpg'}, {'end': 435.055, 'src': 'heatmap', 'start': 394.392, 'weight': 7, 'content': [{'end': 404.837, 'text': "So what's my error here? I wrote this look function, I made a scene array, I filled it with stuff, and then I forgot to return it.", 'start': 394.392, 'duration': 10.445}, {'end': 406.318, 'text': "So let's return that scene array.", 'start': 404.917, 'duration': 1.401}, {'end': 411.021, 'text': "Great, so this makes sense, right? I'm seeing what it's seeing.", 'start': 407.279, 'duration': 3.742}, {'end': 413.102, 'text': 'This is good, so this is a good start.', 'start': 411.561, 'duration': 1.541}, {'end': 414.663, 'text': 'Okay, interesting.', 'start': 413.262, 'duration': 1.401}, {'end': 416.784, 'text': "Now let's try to take this a little bit further.", 'start': 414.803, 'duration': 1.981}, {'end': 423.04, 'text': "One thing is I'm not inverting, right? The things that are farther away are appearing brighter.", 'start': 418.894, 'duration': 4.146}, {'end': 426.306, 'text': 'So a couple things that I need to do to make this really look like the scene.', 'start': 423.461, 'duration': 2.845}, {'end': 428.749, 'text': 'Number one, let me just say no stroke.', 'start': 426.646, 'duration': 2.103}, {'end': 435.055, 'text': 'Okay, so that is a little bit better to start with.', 'start': 432.435, 'duration': 2.62}], 'summary': 'Error: forgot to return scene array. making progress with improvements. need to fix brightness and stroke.', 'duration': 23.494, 'max_score': 394.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8394392.jpg'}, {'end': 493.892, 'src': 'embed', 'start': 467.254, 'weight': 6, 'content': [{'end': 474.739, 'text': "So, by the way, field of view is the term that I'm looking for when I keep talking about cone of view, range of view, peripheral vision,", 'start': 467.254, 'duration': 7.485}, {'end': 479.322, 'text': 'and right now my field of view is 40 degrees, which is not very large,', 'start': 474.739, 'duration': 4.583}, {'end': 483.605, 'text': 'and so some people in the chat are telling me to make it at least pi divided by two, which is 90 degrees.', 'start': 479.322, 'duration': 4.283}, {'end': 493.892, 'text': "So let's actually change that just to sort of see, let's make this 90 degrees just to have more stuff to look at, okay.", 'start': 484.205, 'duration': 9.687}], 'summary': 'Field of view is currently 40 degrees, but should be increased to 90 degrees for better visibility.', 'duration': 26.638, 'max_score': 467.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8467254.jpg'}], 'start': 140.973, 'title': 'Creating scene views', 'summary': 'Focuses on creating a canvas with a 40-degree range of view for a moving particle, populating an array with 40 distance values, calculating scene index and width for each ray, and visualizing scene data with adjustments for brightness and field of view.', 'chapters': [{'end': 241.032, 'start': 140.973, 'title': 'Creating a 40-degree range of view', 'summary': 'Focuses on creating a canvas with a larger scene to enable a 40-degree range of view for a moving particle, and populating an array with 40 distance values to represent the scene.', 'duration': 100.059, 'highlights': ['Creating a canvas with a larger scene to enable a 40-degree range of view for a moving particle.', 'Populating an array with 40 distance values to represent the scene.', "Implementing a 40 degree range of view for the particle's movement."]}, {'end': 351.851, 'start': 242.853, 'title': 'Ray scene index and scene width calculation', 'summary': "Discusses calculating the scene index for each ray and the width of each scene slice, aiming to draw a rectangle based on the scene's distance.", 'duration': 108.998, 'highlights': ['The chapter explains the process of calculating the scene index for each ray, setting it as infinity if there is no closest, and keeping it in an array.', 'It mentions the intention to create a five-minute video and acknowledges the possibility of making errors during the process.', 'The speaker plans to iterate through the scene to calculate the width of each scene slice as scene width divided by scene length, eliminating the need for a global array.', "The discussion involves drawing a rectangle at i times w, comma zero with a width of w and a height based on the scene's distance, using fill based on scene distance."]}, {'end': 483.605, 'start': 352.231, 'title': 'Visualizing scene data', 'summary': 'Discusses visualizing scene data by recording distance values in an array, addressing errors in the code, adjusting brightness, inverting brightness, and modifying the field of view to improve visual representation.', 'duration': 131.374, 'highlights': ["The chapter discusses visualizing scene data by recording distance values in an array, which currently contains 40 elements, named 'scene'.", "Addressing errors in the code by rectifying the 'cannot read property length of undefined' error at line 38 through the addition of a return statement for the 'scene' array.", 'Adjusting brightness by removing strokes and inverting the brightness to accurately represent the scene.', "Modifying the field of view by considering a larger angle, such as 'pi divided by two' (90 degrees), to improve visual representation."]}], 'duration': 342.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8140973.jpg', 'highlights': ['Creating a canvas with a larger scene to enable a 40-degree range of view for a moving particle.', 'Populating an array with 40 distance values to represent the scene.', "Implementing a 40 degree range of view for the particle's movement.", 'The chapter explains the process of calculating the scene index for each ray, setting it as infinity if there is no closest, and keeping it in an array.', "The discussion involves drawing a rectangle at i times w, comma zero with a width of w and a height based on the scene's distance, using fill based on scene distance.", "The chapter discusses visualizing scene data by recording distance values in an array, which currently contains 40 elements, named 'scene'.", "Modifying the field of view by considering a larger angle, such as 'pi divided by two' (90 degrees), to improve visual representation.", 'Adjusting brightness by removing strokes and inverting the brightness to accurately represent the scene.']}, {'end': 893.038, 'segs': [{'end': 617.176, 'src': 'embed', 'start': 484.205, 'weight': 0, 'content': [{'end': 493.892, 'text': "So let's actually change that just to sort of see, let's make this 90 degrees just to have more stuff to look at, okay.", 'start': 484.205, 'duration': 9.687}, {'end': 498.674, 'text': 'Great. Now the question is does everything calculate perfectly from that??', 'start': 494.372, 'duration': 4.302}, {'end': 500.255, 'text': 'Do I have anything hard coded??', 'start': 498.694, 'duration': 1.561}, {'end': 505.677, 'text': 'I feel like I had something hard coded, but maybe not.', 'start': 500.755, 'duration': 4.922}, {'end': 513.039, 'text': "I've got a major issue here, which is that I totally calculated this value b, but I forgot to put it here in fill.", 'start': 507.177, 'duration': 5.862}, {'end': 514.22, 'text': "So let's add that.", 'start': 513.4, 'duration': 0.82}, {'end': 518.582, 'text': 'So now I have a 90 degree view, and I actually am putting b in fill.', 'start': 514.4, 'duration': 4.182}, {'end': 519.482, 'text': 'There we go.', 'start': 519.062, 'duration': 0.42}, {'end': 520.743, 'text': 'This is more what I expected to see.', 'start': 519.543, 'duration': 1.2}, {'end': 526.007, 'text': "So I'm not controlling where the stuff is.", 'start': 523.104, 'duration': 2.903}, {'end': 537.198, 'text': 'This would be helpful for me also now to have a little more agency over debugging this for me to update the particle based on the mouse.', 'start': 527.469, 'duration': 9.729}, {'end': 542.283, 'text': "So I'm going to update the particle based on the mouse location.", 'start': 538.419, 'duration': 3.864}, {'end': 544.725, 'text': 'This will also be nice for when I want to rotate the view.', 'start': 542.683, 'duration': 2.042}, {'end': 547.994, 'text': 'And now, so this will let me do a lot more.', 'start': 546.253, 'duration': 1.741}, {'end': 550.295, 'text': 'So I can sort of see like, okay, look at this.', 'start': 548.374, 'duration': 1.921}, {'end': 554.676, 'text': "That is what I'm seeing and this makes as I go out.", 'start': 550.715, 'duration': 3.961}, {'end': 559.678, 'text': "if I come really close to here, you can see it's quite bright on that side and then quite distant there.", 'start': 554.676, 'duration': 5.002}, {'end': 568.481, 'text': 'So the other thing that I want to add now is objects that are further away appear smaller than things that are closer.', 'start': 559.998, 'duration': 8.483}, {'end': 571.522, 'text': 'So I also want the height of these rectangles.', 'start': 568.821, 'duration': 2.701}, {'end': 573.563, 'text': 'So I think an easy one way.', 'start': 572.142, 'duration': 1.421}, {'end': 574.263, 'text': "that's going to be helpful.", 'start': 573.563, 'duration': 0.7}, {'end': 586.371, 'text': "if I just use rect mode center and then if the location is, i times w plus w divided by two, and then this is just and this shouldn't be height.", 'start': 574.263, 'duration': 12.108}, {'end': 592.736, 'text': 'this should be scene height and this should be scene height divided by two.', 'start': 586.371, 'duration': 6.365}, {'end': 594.518, 'text': 'this should give me the same exact thing now.', 'start': 592.736, 'duration': 1.782}, {'end': 600.542, 'text': "This is the same exact thing, but now that I'm drawing the rectangle from the center, its height could also be mapped.", 'start': 595.138, 'duration': 5.404}, {'end': 617.176, 'text': 'So I could say the height is mapped scene index i with some maximum range between zero and scene w to between scene height and zero.', 'start': 600.943, 'duration': 16.233}], 'summary': 'Developing a 90-degree view with updated particle and object size based on distance and location.', 'duration': 132.971, 'max_score': 484.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8484205.jpg'}, {'end': 642.652, 'src': 'heatmap', 'start': 617.856, 'weight': 1, 'content': [{'end': 625.204, 'text': "So again, so what I'm doing is I'm saying the further away, the shorter the height.", 'start': 617.856, 'duration': 7.348}, {'end': 627.006, 'text': 'The closer it is, the taller the height.', 'start': 625.264, 'duration': 1.742}, {'end': 636.31, 'text': "So now if I put h in here, we're sort of seeing My 3D view.", 'start': 627.326, 'duration': 8.984}, {'end': 642.652, 'text': "Now, I guess maybe 90 degrees is too big of a view of the scene, but you can see, look, that's what I'm seeing.", 'start': 636.37, 'duration': 6.282}], 'summary': 'Demonstrating the relationship between distance and height in a 3d view.', 'duration': 24.796, 'max_score': 617.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8617856.jpg'}, {'end': 768.171, 'src': 'embed', 'start': 716.457, 'weight': 4, 'content': [{'end': 723.179, 'text': 'set angle, the i, i plus this dot heading.', 'start': 716.457, 'duration': 6.722}, {'end': 729.2, 'text': 'So this would be rotating the heading and then setting the angle of the rays.', 'start': 724.639, 'duration': 4.561}, {'end': 732.441, 'text': 'Right? I think this is right.', 'start': 730.701, 'duration': 1.74}, {'end': 743.984, 'text': "So now if I were to do something like, say, a function key pressed, if key equals, let's just say a, whoops.", 'start': 732.821, 'duration': 11.163}, {'end': 768.171, 'text': 'key equals a, particle dot rotate by like 0.01, else if key equals z, rotate by negative, negative 0.01.', 'start': 746.127, 'duration': 22.044}], 'summary': 'The program sets angles and rotates headings based on key inputs.', 'duration': 51.714, 'max_score': 716.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8716457.jpg'}], 'start': 484.205, 'title': '3d view and rotation implementation', 'summary': 'Involves debugging a 3d view, updating the particle based on the mouse location, and gaining more agency over the visualization process, allowing for a 90-degree view, and the ability to rotate the view for enhanced debugging and control. it also discusses the implementation of a 3d view and rotational functionality, demonstrating the concept of distance affecting object size and the ability to rotate the view using arrow keys.', 'chapters': [{'end': 559.678, 'start': 484.205, 'title': 'Debugging and modifying 3d view', 'summary': 'Involves debugging a 3d view, updating the particle based on the mouse location, and gaining more agency over the visualization process, allowing for a 90-degree view and the ability to rotate the view for enhanced debugging and control.', 'duration': 75.473, 'highlights': ['The chapter involves debugging a 3D view, updating the particle based on the mouse location, and gaining more agency over the visualization process, allowing for a 90-degree view and the ability to rotate the view for enhanced debugging and control.', "Adding the missing value 'b' to the fill, resulting in the expected 90-degree view and improved visualization.", 'Describing the ability to gain more agency over debugging and visualizing the 3D view, allowing for enhanced control and understanding of the visualization process.']}, {'end': 893.038, 'start': 559.998, 'title': '3d view and rotation implementation', 'summary': 'Discusses the implementation of a 3d view and rotational functionality, demonstrating the concept of distance affecting object size and the ability to rotate the view using arrow keys.', 'duration': 333.04, 'highlights': ['Implementing 3D view with distance-based object size The implementation demonstrates the concept of mapping the height of rectangles based on distance, where objects further away appear shorter, and those closer appear taller.', "Implementation of rotational functionality The discussion includes the implementation of rotational functionality using the 'heading' property to rotate the view, allowing the user to rotate the view using arrow keys for an improved interaction experience.", "Utilizing 'rect mode center' for drawing rectangles The usage of 'rect mode center' is mentioned as a helpful approach for drawing rectangles, ensuring that the rectangles are drawn from their center."]}], 'duration': 408.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8484205.jpg', 'highlights': ['Debugging a 3D view, updating the particle based on mouse location, and gaining more agency over visualization process', 'Implementing 3D view with distance-based object size and rotational functionality', "Adding the missing value 'b' to the fill for expected 90-degree view and improved visualization", 'Demonstrating the concept of mapping the height of rectangles based on distance', "Implementing rotational functionality using the 'heading' property to rotate the view", "Utilizing 'rect mode center' for drawing rectangles"]}, {'end': 1235.312, 'segs': [{'end': 982.146, 'src': 'embed', 'start': 916.014, 'weight': 0, 'content': [{'end': 920.176, 'text': "So let's, do I have those wall boundaries? That's a question.", 'start': 916.014, 'duration': 4.162}, {'end': 923.077, 'text': "I can't remember if I've left those in there.", 'start': 921.776, 'duration': 1.301}, {'end': 924.737, 'text': "So let's take out these wall boundaries.", 'start': 923.097, 'duration': 1.64}, {'end': 931.739, 'text': "And now, so this I like better because off into infinity there's nothing.", 'start': 927.398, 'duration': 4.341}, {'end': 935.601, 'text': 'But I do have this kind of like fish eye effect.', 'start': 933.16, 'duration': 2.441}, {'end': 937.521, 'text': "Let's try a 60 degree field of view.", 'start': 936.181, 'duration': 1.34}, {'end': 954.979, 'text': "And now let's think, so I'm being told from the chat that I should use an inverse square law for the brightness.", 'start': 942.492, 'duration': 12.487}, {'end': 963.984, 'text': "So I believe what that means, if I'm rendering it down here, is that I should map the scene squared.", 'start': 955.279, 'duration': 8.705}, {'end': 964.504, 'text': 'So let me do..', 'start': 964.004, 'duration': 0.5}, {'end': 974.5, 'text': 's square is scene index i times scene index i.', 'start': 967.794, 'duration': 6.706}, {'end': 982.146, 'text': 'And width square is scene w times scene w.', 'start': 974.5, 'duration': 7.646}], 'summary': 'Experimenting with different visual effects and using inverse square law for brightness in the scene.', 'duration': 66.132, 'max_score': 916.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8916014.jpg'}, {'end': 1068.558, 'src': 'embed', 'start': 1017.817, 'weight': 3, 'content': [{'end': 1019.018, 'text': "Yeah, that's better.", 'start': 1017.817, 'duration': 1.201}, {'end': 1022.74, 'text': "I don't know why, because without the stroke, or I could add a stroke to..", 'start': 1019.038, 'duration': 3.702}, {'end': 1026.474, 'text': "So that's better in terms of seeing the walls.", 'start': 1024.073, 'duration': 2.401}, {'end': 1029.037, 'text': "Let's put the actual wall boundaries back in.", 'start': 1027.035, 'duration': 2.002}, {'end': 1034.08, 'text': "Yeah, because they're so far away, now this is better.", 'start': 1029.057, 'duration': 5.023}, {'end': 1034.821, 'text': 'Oh, I like this.', 'start': 1034.242, 'duration': 0.579}, {'end': 1039.945, 'text': "Let's turn around and see this wall and move.", 'start': 1037.404, 'duration': 2.541}, {'end': 1043.029, 'text': 'This is kind of interesting here, like this spot right here.', 'start': 1040.406, 'duration': 2.623}, {'end': 1043.729, 'text': "There's that wall.", 'start': 1043.049, 'duration': 0.68}, {'end': 1047.813, 'text': "Okay, let's add the Perlin noise moving back, because I think that'll be fun.", 'start': 1044.41, 'duration': 3.403}, {'end': 1049.294, 'text': "I don't want to move it with the mouse anymore.", 'start': 1047.833, 'duration': 1.461}, {'end': 1051.396, 'text': "Let's add Perlin noise back.", 'start': 1049.875, 'duration': 1.521}, {'end': 1054.948, 'text': 'And there it is.', 'start': 1054.448, 'duration': 0.5}, {'end': 1057.871, 'text': "There's my thing walking around.", 'start': 1055.289, 'duration': 2.582}, {'end': 1059.171, 'text': 'And I can turn.', 'start': 1058.411, 'duration': 0.76}, {'end': 1068.558, 'text': 'So this ability to being able to rotate around with Perlin noise, this is sort of very like a weird interaction.', 'start': 1062.014, 'duration': 6.544}], 'summary': 'Experimenting with wall boundaries and perlin noise for interactive rotation.', 'duration': 50.741, 'max_score': 1017.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81017817.jpg'}, {'end': 1203.397, 'src': 'embed', 'start': 1171.614, 'weight': 5, 'content': [{'end': 1187.164, 'text': "really it's velocity that's pointed in the direction of the heading and that vector's magnitude should be the amount that I'm moving, which is just 1,", 'start': 1171.614, 'duration': 15.55}, {'end': 1188.465, 'text': 'so this is redundant.', 'start': 1187.164, 'duration': 1.301}, {'end': 1192.949, 'text': 'And then I should be saying I should add that vector to the position.', 'start': 1188.745, 'duration': 4.204}, {'end': 1201.395, 'text': 'So now at least if I refresh, I can actually walk around in a way that you might expect.', 'start': 1193.469, 'duration': 7.926}, {'end': 1203.397, 'text': "Now I'm kind of a little bit off.", 'start': 1201.796, 'duration': 1.601}], 'summary': "Velocity vector's magnitude is 1, adding it to position allows expected movement.", 'duration': 31.783, 'max_score': 1171.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81171614.jpg'}], 'start': 893.219, 'title': 'Rendering and movement adjustment', 'summary': 'Covers adjusting view and brightness in rendering by implementing a black background and an inverse square law, and also explores perspective adjustments, including map alterations, outer wall reintroduction, perlin noise for movement, and angle calculations for accurate directional movement and velocity.', 'chapters': [{'end': 982.146, 'start': 893.219, 'title': 'Adjusting view and brightness in rendering', 'summary': 'Discusses adjusting the view to create a black background and implementing an inverse square law for brightness, including a 60-degree field of view and the use of an inverse square law for brightness in the rendering process.', 'duration': 88.927, 'highlights': ['Implementing an inverse square law for brightness by squaring the scene index and width', 'Adjusting the view to create a black background and a 60-degree field of view', 'Removing wall boundaries to create a better view']}, {'end': 1235.312, 'start': 982.146, 'title': 'Adjusting perspective and movement', 'summary': 'Explores adjusting the perspective by altering the map, reintroducing outer walls, and implementing perlin noise for movement, as well as refining angle calculations for more accurate directional movement and velocity.', 'duration': 253.166, 'highlights': ['The chapter covers adjusting the map perspective by modifying the map and reintroducing outer walls, which enhances the visual experience of the environment.', 'The implementation of Perlin noise for movement provides an engaging user experience as the object can be navigated around in the environment.', 'Refining the angle calculations for directional movement and velocity allows for more accurate and expected movement of the object within the environment.']}], 'duration': 342.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH8893219.jpg', 'highlights': ['Implementing an inverse square law for brightness by squaring the scene index and width', 'Adjusting the view to create a black background and a 60-degree field of view', 'Removing wall boundaries to create a better view', 'The chapter covers adjusting the map perspective by modifying the map and reintroducing outer walls, which enhances the visual experience of the environment', 'The implementation of Perlin noise for movement provides an engaging user experience as the object can be navigated around in the environment', 'Refining the angle calculations for directional movement and velocity allows for more accurate and expected movement of the object within the environment']}, {'end': 1720.3, 'segs': [{'end': 1290.007, 'src': 'embed', 'start': 1255.105, 'weight': 0, 'content': [{'end': 1263.19, 'text': 'So can I adjust the field of view in real time? So I have my field of view variable.', 'start': 1255.105, 'duration': 8.085}, {'end': 1267.733, 'text': 'I could create a slider.', 'start': 1265.371, 'duration': 2.362}, {'end': 1282.98, 'text': "So let's say, let's have slider fov, and let's say slider fov equals create slider, and I have a range between zero and 360.", 'start': 1269.025, 'duration': 13.955}, {'end': 1286.003, 'text': "I'm going to start with a 45 degree field of view.", 'start': 1282.98, 'duration': 3.023}, {'end': 1288.505, 'text': 'So now we should.', 'start': 1286.684, 'duration': 1.821}, {'end': 1290.007, 'text': 'I have this slider.', 'start': 1288.505, 'duration': 1.502}], 'summary': 'A slider with a range of 0 to 360 is created to adjust the field of view in real time.', 'duration': 34.902, 'max_score': 1255.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81255105.jpg'}, {'end': 1409.111, 'src': 'embed', 'start': 1382.54, 'weight': 3, 'content': [{'end': 1386.863, 'text': 'The other thing is, all of a sudden now, once I change the field of view, my driving seems to have been broken.', 'start': 1382.54, 'duration': 4.323}, {'end': 1391.969, 'text': 'a few bugs that I left off last week that I want to fix before I finish this off and release the code to you.', 'start': 1387.483, 'duration': 4.486}, {'end': 1394.052, 'text': 'So bug number one, let me fix the driving.', 'start': 1392.23, 'duration': 1.822}, {'end': 1401.663, 'text': "One of the things that is sort of key to the way that I've designed this, which is not by any means a requirement to how you need to do this,", 'start': 1394.773, 'duration': 6.89}, {'end': 1402.804, 'text': 'but I am.', 'start': 1401.663, 'duration': 1.141}, {'end': 1409.111, 'text': "the rays in the world are always relative to the vehicle's velocity or the direction that it's moving in.", 'start': 1402.804, 'duration': 6.307}], 'summary': "Fixing bugs in driving code, related to field of view and vehicle's velocity.", 'duration': 26.571, 'max_score': 1382.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81382540.jpg'}, {'end': 1500.84, 'src': 'heatmap', 'start': 1471.873, 'weight': 1, 'content': [{'end': 1473.194, 'text': 'I suggest reading the whole thing.', 'start': 1471.873, 'duration': 1.321}, {'end': 1476.658, 'text': "But if you scroll all the way down, you'll notice that it says ah,", 'start': 1473.695, 'duration': 2.963}, {'end': 1481.042, 'text': 'the distance you should calculate should be the distance projected on the camera direction.', 'start': 1476.658, 'duration': 4.384}, {'end': 1484.285, 'text': 'The raw Euclidean distance will give the fisheye effect.', 'start': 1481.362, 'duration': 2.923}, {'end': 1487.508, 'text': "So let's say I have this particle, which is really the camera.", 'start': 1484.645, 'duration': 2.863}, {'end': 1490.41, 'text': 'And its camera is pointing in a particular direction.', 'start': 1487.828, 'duration': 2.582}, {'end': 1491.171, 'text': "That's the view.", 'start': 1490.45, 'duration': 0.721}, {'end': 1492.452, 'text': "That's the camera's view.", 'start': 1491.431, 'duration': 1.021}, {'end': 1498.257, 'text': "Now, I have any particular ray that's emanating from that camera's view within the field of view.", 'start': 1492.712, 'duration': 5.545}, {'end': 1500.84, 'text': "So let's say I have the wall is something like this.", 'start': 1498.538, 'duration': 2.302}], 'summary': 'The distance for calculation should be projected on camera direction to avoid fisheye effect.', 'duration': 28.967, 'max_score': 1471.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81471873.jpg'}, {'end': 1546.164, 'src': 'heatmap', 'start': 1521.304, 'weight': 0.779, 'content': [{'end': 1529.231, 'text': "That would be this distance here, this projection of the ray onto the camera's view.", 'start': 1521.304, 'duration': 7.927}, {'end': 1536.518, 'text': 'And so this is actually the distance that I should use, which I can get by the Euclidean distance times cosine of this angle.', 'start': 1529.612, 'duration': 6.906}, {'end': 1540.462, 'text': "And there's a variety of different ways I could calculate this, but that's what I'm going to apply in the code.", 'start': 1536.858, 'duration': 3.604}, {'end': 1546.164, 'text': 'So in the code where I am calculating the Euclidean distance is right here.', 'start': 1540.982, 'duration': 5.182}], 'summary': 'Using euclidean distance and cosine for distance calculation in code.', 'duration': 24.86, 'max_score': 1521.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81521304.jpg'}, {'end': 1615.4, 'src': 'heatmap', 'start': 1589.318, 'weight': 0.721, 'content': [{'end': 1593.621, 'text': "But if I'm going to adjust it after the fact, I have to use let, which I think is fine here.", 'start': 1589.318, 'duration': 4.303}, {'end': 1595.203, 'text': 'And now let me hit refresh.', 'start': 1594.182, 'duration': 1.021}, {'end': 1597.665, 'text': 'And finally, I think that I have gotten it.', 'start': 1595.463, 'duration': 2.202}, {'end': 1599.506, 'text': "Here's a pretty good setup.", 'start': 1598.465, 'duration': 1.041}, {'end': 1602.289, 'text': 'You can see this looks less fish-eyey.', 'start': 1599.546, 'duration': 2.743}, {'end': 1604.611, 'text': 'It looks more correct, like what you would expect.', 'start': 1602.309, 'duration': 2.302}, {'end': 1609.475, 'text': 'Just to be sure about this, let me add something to just sort of switch it on and off.', 'start': 1605.291, 'duration': 4.184}, {'end': 1615.4, 'text': "I mean, this is a very, a checkbox or something would be better, but I'm just going to say if not mouse is pressed.", 'start': 1609.575, 'duration': 5.825}], 'summary': "Using 'let' for adjustments results in a correct setup with a less fish-eye appearance.", 'duration': 26.082, 'max_score': 1589.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81589318.jpg'}, {'end': 1686.776, 'src': 'embed', 'start': 1659.162, 'weight': 2, 'content': [{'end': 1666.168, 'text': 'And we can see what is the difference now with a 360 degree field of view with the cosine of the angle or without.', 'start': 1659.162, 'duration': 7.006}, {'end': 1669.671, 'text': 'Ah, you can see how notably different that is.', 'start': 1666.428, 'duration': 3.243}, {'end': 1671.631, 'text': "I think I'm going to wrap this up here.", 'start': 1670.211, 'duration': 1.42}, {'end': 1673.772, 'text': 'Thanks for watching this coding challenge.', 'start': 1672.472, 'duration': 1.3}, {'end': 1679.114, 'text': 'I think there are a rich set of possibilities you could explore just by building off of this very basic example.', 'start': 1673.792, 'duration': 5.322}, {'end': 1686.776, 'text': 'First of all, creating an actual, proper maze, with constraints about where the vehicle particle camera thing can drive around,', 'start': 1679.974, 'duration': 6.802}], 'summary': 'A 360-degree field of view significantly impacts the visual difference, offering rich possibilities for exploring maze constraints.', 'duration': 27.614, 'max_score': 1659.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81659162.jpg'}], 'start': 1235.352, 'title': 'Field of view implementation', 'summary': 'Covers the real-time adjustment of field of view through slider creation and bug fixing, as well as the improvement of ray casting for a 360-degree field of view by correcting fisheye effect, resulting in more accurate visualization.', 'chapters': [{'end': 1394.052, 'start': 1235.352, 'title': 'Real-time field of view adjustment', 'summary': 'Discusses the implementation of real-time field of view adjustment through the creation of a slider and the subsequent fixing of bugs affecting driving functionality.', 'duration': 158.7, 'highlights': ['The chapter discusses the implementation of real-time field of view adjustment through the creation of a slider, allowing for a range between 0 and 360 degrees, with an initial setting of 45 degrees.', "The speaker demonstrates the creation of a slider for field of view adjustment and the subsequent implementation of an event handling function to update the field of view and reset rays, enabling real-time adjustment of the scene's perspective.", 'The chapter also addresses the identification and resolution of bugs affecting driving functionality, emphasizing the need to fix these issues before releasing the code.']}, {'end': 1720.3, 'start': 1394.773, 'title': 'Improving ray casting for 360-degree field of view', 'summary': 'Discusses the implementation of ray casting for a 360-degree field of view, including the correction of fisheye effect by adjusting the distance calculation using cosine of the angle, leading to a more accurate visualization.', 'duration': 325.527, 'highlights': ['Implement correction for fisheye effect by adjusting distance calculation with cosine of the angle The speaker corrects the fisheye effect by adjusting the distance calculation using cosine of the angle, resulting in a more accurate visualization.', 'Discuss the implementation of ray casting for a 360-degree field of view The speaker demonstrates the implementation of ray casting for a 360-degree field of view, allowing for a comprehensive visualization of the environment.', 'Exploration of possibilities for further development, such as creating a proper maze and texturing walls The speaker encourages further exploration, including creating a proper maze, adding colors and textures to walls, and automating particle movement for a more immersive experience.']}], 'duration': 484.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vYgIKn7iDH8/pics/vYgIKn7iDH81235352.jpg', 'highlights': ['Real-time field of view adjustment through a slider, range 0-360 degrees, initial setting 45 degrees', 'Correction of fisheye effect by adjusting distance calculation using cosine of the angle', 'Implementation of ray casting for a 360-degree field of view for comprehensive visualization', 'Identification and resolution of bugs affecting driving functionality']}], 'highlights': ['Implementing ray casting for a 360-degree field of view for comprehensive visualization', 'Real-time field of view adjustment through a slider, range 0-360 degrees, initial setting 45 degrees', 'Adjusting the view to create a black background and a 60-degree field of view', "Implementing a 40 degree range of view for the particle's movement", "Modifying the agent's field of vision to a specific cone to simulate a realistic field of view", 'Rendering objects based on their distance, with farther objects appearing smaller and darker, and closer objects appearing larger and brighter', 'Debugging a 3D view, updating the particle based on mouse location, and gaining more agency over visualization process', 'Implementing 3D view with distance-based object size and rotational functionality', 'Adjusting the map perspective by modifying the map and reintroducing outer walls, which enhances the visual experience of the environment', 'The implementation of Perlin noise for movement provides an engaging user experience as the object can be navigated around in the environment']}