title
Coding Challenge #112: 3D Rendering with Rotation and Projection
description
Can I draw and rotate a 3D cube using Processing's 2D renderer with just some math?!?! Yes! Watch to learn more about rotation and projection matrices along with perspective and orthographic projection! Code: https://thecodingtrain.com/challenges/112-3d-rendering-with-rotation-and-projection
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/r8l8XXD2A
đĨ Previous video: https://youtu.be/3noMeuufLZY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/XE3YDVdQSPo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đž Matrix Multiplication: http://matrixmultiplication.xyz
đ Rotation Matrix on Wikipedia: https://en.wikipedia.org/wiki/Rotation_matrix
đ 3D Projection on Wikipedia: https://en.wikipedia.org/wiki/3D_projection
Videos:
đ Matrix Math: https://www.youtube.com/watch?v=uSzGdfdOoG8
đ Matrix Multiplication for 3D Rendering: https://youtu.be/tzsgS19RRc8
đ´ Coding Train Live 148.1: https://youtu.be/v6EmLhu7C9M?t=3285s
Related Coding Challenges:
đ #26 3D Supershapes: https://youtu.be/akM4wMZIBWg
đ #113 4D Hypercube (aka 'Tesseract'): https://youtu.be/XE3YDVdQSPo
đ #142 Rubik's Cube: https://youtu.be/9PGfL4t-uqE
Timestamps:
0:00 Introducing today's topic: 3D rendering in 2D
2:08 Let's begin coding!
7:50 Add a projection matrix
12:00 Add a rotation matrix
18:02 Make a cube with 8 points
20:41 Normalize the cube
21:45 Connect the edges
28:09 Add perspective projection
31:36 Conclusion and next steps
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
#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing
detail
{'title': 'Coding Challenge #112: 3D Rendering with Rotation and Projection', 'heatmap': [{'end': 542.926, 'start': 516.664, 'weight': 0.728}, {'end': 1838.567, 'start': 1765.612, 'weight': 0.959}], 'summary': 'Explores creating a spinning cube in 3d, projecting 3d objects onto a 2d screen, applying projection and rotation in 3d graphics, covering 3d rotations and projections, discussing matrix rotations, and implementing perspective projection for depth, encouraging experimentation.', 'chapters': [{'end': 148.595, 'segs': [{'end': 52.631, 'src': 'embed', 'start': 0.947, 'weight': 0, 'content': [{'end': 3.291, 'text': 'Hello, welcome to a coding challenge.', 'start': 0.947, 'duration': 2.344}, {'end': 8.74, 'text': 'And I can summarize this coding challenge very quickly in one sentence.', 'start': 4.132, 'duration': 4.608}, {'end': 12.309, 'text': 'This is a spinning cube.', 'start': 9.847, 'duration': 2.462}, {'end': 17.012, 'text': 'It is a three-dimensional cube that you are seeing on your two-dimensional screen.', 'start': 12.389, 'duration': 4.623}, {'end': 27.979, 'text': 'I am able to create this three-dimensional cube because I am using the P3D renderer processing Java-based creative coding development platform thing.', 'start': 17.952, 'duration': 10.027}, {'end': 37.165, 'text': 'I can make 3D stuff using the P3D rendering engine and then functions like box and rotate X and rotate Y and rotate Z.', 'start': 28.439, 'duration': 8.726}, {'end': 39.267, 'text': 'And that is how I get this.', 'start': 37.165, 'duration': 2.102}, {'end': 46.829, 'text': 'But how does this really work? How does the processing even make this happen? I am going to do the most basic simple thing.', 'start': 40.667, 'duration': 6.162}, {'end': 49.81, 'text': "I am going, I said one sentence and I'm like 12 sentences.", 'start': 46.989, 'duration': 2.821}, {'end': 52.631, 'text': "I'm like 200 sentences in if I'm being perfectly honest.", 'start': 50.211, 'duration': 2.42}], 'summary': 'Coding challenge demonstrates 3d cube using p3d renderer in processing java-based platform.', 'duration': 51.684, 'max_score': 0.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk947.jpg'}, {'end': 131.909, 'src': 'embed', 'start': 107.105, 'weight': 2, 'content': [{'end': 114.791, 'text': "If I can project a 3D object into 2D space, there's no reason why I couldn't project a 4D object into 3D space.", 'start': 107.105, 'duration': 7.686}, {'end': 122.327, 'text': "And then, I don't know, my computer's going to melt and I'm never going to make any videos again.", 'start': 117.946, 'duration': 4.381}, {'end': 123.807, 'text': "But I'll just stick with this.", 'start': 122.367, 'duration': 1.44}, {'end': 126.408, 'text': "Okay, so let's begin coding.", 'start': 124.327, 'duration': 2.081}, {'end': 131.909, 'text': "So I am going to take out, I'm going to hit save, and I'm going to take out all of this 3D stuff.", 'start': 127.008, 'duration': 4.901}], 'summary': 'Discussing the possibility of projecting 4d object into 3d space and transitioning to coding.', 'duration': 24.804, 'max_score': 107.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk107105.jpg'}], 'start': 0.947, 'title': 'Creating a spinning cube', 'summary': 'Explores creating a spinning cube in 3d using the p3d renderer in processing, then simplifying it to 2d while discussing the potential of projecting higher-dimensional shapes into lower-dimensional spaces.', 'chapters': [{'end': 148.595, 'start': 0.947, 'title': 'Coding challenge: creating a spinning cube', 'summary': 'Explores creating a spinning cube in 3d using the p3d renderer in processing, then simplifying it to 2d while discussing the potential of projecting higher-dimensional shapes into lower-dimensional spaces.', 'duration': 147.648, 'highlights': ['The chapter explores creating a spinning cube in 3D using the P3D renderer in processing. It explains the use of the P3D rendering engine and functions like box and rotate X, Y, Z to create the 3D cube.', 'Simplifying it to 2D while discussing the potential of projecting higher-dimensional shapes into lower-dimensional spaces. The speaker discusses simplifying the visualization to 2D and explores the idea of projecting higher-dimensional shapes into lower-dimensional spaces.']}], 'duration': 147.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk947.jpg', 'highlights': ['The chapter explores creating a spinning cube in 3D using the P3D renderer in processing.', 'It explains the use of the P3D rendering engine and functions like box and rotate X, Y, Z to create the 3D cube.', 'Simplifying it to 2D while discussing the potential of projecting higher-dimensional shapes into lower-dimensional spaces.', 'The speaker discusses simplifying the visualization to 2D and explores the idea of projecting higher-dimensional shapes into lower-dimensional spaces.']}, {'end': 580.441, 'segs': [{'end': 226.186, 'src': 'embed', 'start': 197.831, 'weight': 0, 'content': [{'end': 205.995, 'text': "And I'm going to say points index 0 is a p vector at, and I'm just going to build a little square.", 'start': 197.831, 'duration': 8.164}, {'end': 211.018, 'text': "So I'm going to say the first one is at like negative 50, negative 50.", 'start': 206.756, 'duration': 4.262}, {'end': 223.944, 'text': 'And then the second, third, fourth is at 50, negative 50, then 50, 50, then negative 50, 50.', 'start': 211.018, 'duration': 12.926}, {'end': 226.186, 'text': 'These should be the four points of a square.', 'start': 223.944, 'duration': 2.242}], 'summary': 'Creating a square with 4 points at (-50, -50), (50, -50), (50, 50), and (-50, 50).', 'duration': 28.355, 'max_score': 197.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk197831.jpg'}, {'end': 402.847, 'src': 'embed', 'start': 373.487, 'weight': 1, 'content': [{'end': 377.571, 'text': "This is something that I've gone over in other matrix math videos, and here's a kind of a summary of it.", 'start': 373.487, 'duration': 4.084}, {'end': 391.443, 'text': "A projection matrix, if I'm projecting into 2D, if I'm projecting this 3D point into a new 2D point, what I need is a projection matrix.", 'start': 378.091, 'duration': 13.352}, {'end': 394.706, 'text': "Now here's a really simple projection matrix.", 'start': 391.483, 'duration': 3.223}, {'end': 402.847, 'text': 'This projection matrix has a 1 in the x spot, a 1 in the y spot.', 'start': 399.019, 'duration': 3.828}], 'summary': 'Summary of matrix math and projection matrix explained.', 'duration': 29.36, 'max_score': 373.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk373487.jpg'}, {'end': 559.894, 'src': 'heatmap', 'start': 516.664, 'weight': 2, 'content': [{'end': 519.585, 'text': "I'm going to call it the projected 2D vector.", 'start': 516.664, 'duration': 2.921}, {'end': 527.768, 'text': "And what I'm going to do is I'm going to say matrix multiply the projection times v.", 'start': 520.424, 'duration': 7.344}, {'end': 529.169, 'text': 'So this is what I want to do.', 'start': 527.768, 'duration': 1.401}, {'end': 542.926, 'text': 'to project a 3D point into 2D, I need a projection matrix, which I just made, and then I need to matrix multiply the projection matrix and the vector.', 'start': 529.169, 'duration': 13.757}, {'end': 550.291, 'text': 'Now how the math for that works involves this times, this plus, this times, this plus, this times this goes here, and this times, this plus,', 'start': 543.147, 'duration': 7.144}, {'end': 550.792, 'text': 'this times this.', 'start': 550.291, 'duration': 0.501}, {'end': 554.233, 'text': "I'll refer you to matrixmultiplication.xyz.", 'start': 551.232, 'duration': 3.001}, {'end': 559.894, 'text': "that website has a nice visualization and I've made other videos about how matrix multiplication works, which I'll also link to,", 'start': 554.233, 'duration': 5.661}], 'summary': 'Using a projection matrix to project a 3d point into 2d by matrix multiplication.', 'duration': 43.23, 'max_score': 516.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk516664.jpg'}], 'start': 148.635, 'title': '3d object projection', 'summary': 'Discusses creating 3d points for a square, using matrix operations, and projecting a 3d object onto a 2d screen with a simple 2d projection matrix, along with matrix multiplication for projection.', 'chapters': [{'end': 288.149, 'start': 148.635, 'title': 'Creating 3d points and matrix operations', 'summary': 'Discusses creating 3d points for a square and mentions the use of previously written functions for matrix operations, followed by the process of drawing and manipulating these points in a 3d environment.', 'duration': 139.514, 'highlights': ['The chapter discusses creating 3D points for a square The speaker explains the process of creating a square using P vector object and defining four points at specific coordinates (-50,-50), (50,-50), (50,50), and (-50,50).', 'Mention of previously written functions for matrix operations The speaker mentions using functions previously written, possibly in a video, for certain matrix operations, providing a link for viewers to watch the coding process.', 'Process of drawing and manipulating points in a 3D environment The speaker outlines the plan to draw 3D points and discusses the need to build a 3D engine, indicating the intent to search for props for this purpose.']}, {'end': 580.441, 'start': 289.109, 'title': '3d object projection and matrix multiplication', 'summary': 'Introduces the concept of projecting a 3d object onto a 2d screen using a projection matrix, focusing on a simple 2d projection matrix and its application in code, with a demonstration of matrix multiplication for projecting 3d points into 2d.', 'duration': 291.332, 'highlights': ['The concept of projecting a 3D object onto a 2D screen using a projection matrix is introduced, with a focus on a simple 2D projection matrix and its application in code. The chapter explains the process of projecting a 3D object onto a 2D screen using a simple 2D projection matrix and its application in code for creating the same effect as a real-world demonstration.', 'Demonstration of matrix multiplication for projecting 3D points into 2D is provided, emphasizing the mathematical process and its practical application. The chapter includes a demonstration of matrix multiplication for projecting 3D points into 2D, explaining the mathematical process involved and its practical application in code.', 'Explanation of the 3D to 2D projection process and the matrix multiplication method is detailed, accompanied by references to additional resources for further understanding. The chapter provides a detailed explanation of the 3D to 2D projection process and the matrix multiplication method, along with references to additional resources for further understanding, such as the website matrixmultiplication.xyz.']}], 'duration': 431.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk148635.jpg', 'highlights': ['The chapter discusses creating 3D points for a square using P vector object and defining four points at specific coordinates (-50,-50), (50,-50), (50,50), and (-50,50).', 'The concept of projecting a 3D object onto a 2D screen using a projection matrix is introduced, with a focus on a simple 2D projection matrix and its application in code.', 'Demonstration of matrix multiplication for projecting 3D points into 2D is provided, emphasizing the mathematical process and its practical application.']}, {'end': 827.656, 'segs': [{'end': 652.602, 'src': 'embed', 'start': 599.725, 'weight': 0, 'content': [{'end': 606.049, 'text': 'So if I were to move that light around and change the projection matrix, different things can happen.', 'start': 599.725, 'duration': 6.324}, {'end': 607.47, 'text': "But I'm not going to worry about that right now.", 'start': 606.069, 'duration': 1.401}, {'end': 614.134, 'text': 'What I want to do now is see if I can apply some rotation.', 'start': 607.63, 'duration': 6.504}, {'end': 619.177, 'text': 'So how do I apply rotation? Well, I know that I could.', 'start': 615.875, 'duration': 3.302}, {'end': 622.92, 'text': 'I could just say, like, rotate by angle.', 'start': 619.197, 'duration': 3.723}, {'end': 628.308, 'text': 'Right, if I say rotate by angle, processing is going to do that transformation for me.', 'start': 624.246, 'duration': 4.062}, {'end': 634.352, 'text': "But what if I want to rotate x, rotate around the x-axis? I can't do that.", 'start': 628.809, 'duration': 5.543}, {'end': 637.213, 'text': "I'm getting some sort of error somewhere or nothing.", 'start': 634.992, 'duration': 2.221}, {'end': 639.915, 'text': 'It should say not available with this renderer.', 'start': 638.234, 'duration': 1.681}, {'end': 644.277, 'text': 'Oh yeah, rotate x can only be used with a renderer that supports P3D.', 'start': 640.015, 'duration': 4.262}, {'end': 646.178, 'text': 'I need to write my own rotate x function.', 'start': 644.417, 'duration': 1.761}, {'end': 650.361, 'text': 'And guess what I need for that? Rotation matrix.', 'start': 646.499, 'duration': 3.862}, {'end': 652.602, 'text': 'I think the ding is better after.', 'start': 651.321, 'duration': 1.281}], 'summary': 'Experimenting with applying rotation using projection matrix and encountering errors; discussing the need for a custom rotation function and rotation matrix.', 'duration': 52.877, 'max_score': 599.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk599725.jpg'}, {'end': 739.772, 'src': 'embed', 'start': 706.012, 'weight': 2, 'content': [{'end': 708.993, 'text': "So just for fun, let's first just do this.", 'start': 706.012, 'duration': 2.981}, {'end': 717.255, 'text': "I'm going to say float, I'm going to make another, I'm going to call this rotation.", 'start': 710.693, 'duration': 6.562}, {'end': 719.598, 'text': "And I'm going to make another matrix.", 'start': 718.277, 'duration': 1.321}, {'end': 721.099, 'text': "And I'm going to do exactly this.", 'start': 720.018, 'duration': 1.081}, {'end': 722.6, 'text': "It's going to be 2 by 2.", 'start': 721.159, 'duration': 1.441}, {'end': 725.482, 'text': "And it's going to be cosine theta and negative sine theta.", 'start': 722.6, 'duration': 2.882}, {'end': 727.183, 'text': "And I'm calling it angle.", 'start': 725.922, 'duration': 1.261}, {'end': 730.745, 'text': 'Cosine angle, negative sine angle.', 'start': 727.703, 'duration': 3.042}, {'end': 739.772, 'text': "And then it's going to be, what was it? Sine angle, cosine angle, cosine angle.", 'start': 731.946, 'duration': 7.826}], 'summary': 'Demonstrating matrix operations with 2x2 rotation matrix.', 'duration': 33.76, 'max_score': 706.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk706012.jpg'}, {'end': 800.491, 'src': 'embed', 'start': 761.667, 'weight': 3, 'content': [{'end': 767.331, 'text': "So what now, what if I were to say, okay, now I'm going to take out this rotate x.", 'start': 761.667, 'duration': 5.664}, {'end': 770.112, 'text': "I'm not using the native rotate function.", 'start': 767.331, 'duration': 2.781}, {'end': 781.558, 'text': "And I'm going to say P vector rotated equals matmul rotation times projected to D.", 'start': 770.993, 'duration': 10.565}, {'end': 791.183, 'text': "And now I'm going to draw the point at rotate it.", 'start': 787.119, 'duration': 4.064}, {'end': 792.784, 'text': 'So I am projecting.', 'start': 791.423, 'duration': 1.361}, {'end': 795.026, 'text': 'V is a 3D vector.', 'start': 793.325, 'duration': 1.701}, {'end': 797.689, 'text': "I'm projecting it into 2D.", 'start': 795.346, 'duration': 2.343}, {'end': 800.491, 'text': "And then I'm rotating it, just a 2D rotation.", 'start': 798.069, 'duration': 2.422}], 'summary': 'Implementing a 2d rotation on a 3d vector using matrix multiplication.', 'duration': 38.824, 'max_score': 761.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk761667.jpg'}], 'start': 580.481, 'title': '3d projection and rotation', 'summary': 'Explains the process of applying projection and rotation in 3d graphics, including the challenges encountered and the need for custom functions, with a focus on the rotation matrix and its implementation. it also discusses creating a 2d rotation matrix and attempting to rotate a 3d vector into 2d, encountering a matrix multiplication error.', 'chapters': [{'end': 652.602, 'start': 580.481, 'title': '3d projection and rotation', 'summary': 'Explains the process of applying projection and rotation in 3d graphics, including the challenges encountered and the need for custom functions, with a focus on the rotation matrix and its implementation.', 'duration': 72.121, 'highlights': ['The need for a custom rotate x function due to the limitation of the renderer, emphasizing the requirement for a rotation matrix and the challenges of implementing the function.', 'The impact of moving the light around and changing the projection matrix on the 3D graphics, highlighting the potential for different outcomes based on these modifications.', 'The absence of the option to directly rotate around the x-axis and the error message related to using the renderer for P3D, indicating the need for a custom rotation function and the challenges faced in this process.']}, {'end': 827.656, 'start': 655.782, 'title': 'Creating a 2d rotation matrix', 'summary': 'Discusses creating a 2d rotation matrix and attempting to rotate a 3d vector into 2d, encountering a matrix multiplication error.', 'duration': 171.874, 'highlights': ['Creating a 2D rotation matrix using cosine and sine values to represent rotation angles.', 'Attempting to rotate a 3D vector into 2D and encountering a matrix multiplication error.', 'Exploring the process of projecting a 3D vector into 2D and applying a 2D rotation.']}], 'duration': 247.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk580481.jpg', 'highlights': ['The need for a custom rotate x function due to the limitation of the renderer, emphasizing the requirement for a rotation matrix and the challenges of implementing the function.', 'The impact of moving the light around and changing the projection matrix on the 3D graphics, highlighting the potential for different outcomes based on these modifications.', 'Creating a 2D rotation matrix using cosine and sine values to represent rotation angles.', 'Attempting to rotate a 3D vector into 2D and encountering a matrix multiplication error.']}, {'end': 1155.246, 'segs': [{'end': 885.482, 'src': 'embed', 'start': 827.956, 'weight': 0, 'content': [{'end': 830.998, 'text': "Even if I'm drawing just the x and y, there's always that z component.", 'start': 827.956, 'duration': 3.042}, {'end': 839.063, 'text': 'So I actually need to include this extra column of zeros in it to do this demonstration.', 'start': 831.358, 'duration': 7.705}, {'end': 842.706, 'text': "So now you can see that's me doing 2D rotation.", 'start': 839.424, 'duration': 3.282}, {'end': 849.704, 'text': "And actually, I'm actually doing 3D rotation, right? Because really, what this should be is this.", 'start': 843.346, 'duration': 6.358}, {'end': 857.763, 'text': 'This is what I would call XY rotation.', 'start': 853.058, 'duration': 4.705}, {'end': 865.611, 'text': 'I am rotating around the Z axis by using the X and Y axes right?', 'start': 858.264, 'duration': 7.347}, {'end': 873.099, 'text': "Look at this now I'm going to say but so this is what, and if I kept scrolling down this Wikipedia page, we would see this", 'start': 866.412, 'duration': 6.687}, {'end': 875.88, 'text': 'We would find this right here.', 'start': 873.72, 'duration': 2.16}, {'end': 877.461, 'text': "This is the one that I'm doing.", 'start': 876.341, 'duration': 1.12}, {'end': 881.742, 'text': 'Rotation z, right? Oh, I need a one there, of course.', 'start': 878.021, 'duration': 3.721}, {'end': 882.922, 'text': 'Not a zero there.', 'start': 882.022, 'duration': 0.9}, {'end': 885.482, 'text': "Very important, I don't want to lose the z point.", 'start': 883.222, 'duration': 2.26}], 'summary': 'Demonstrating 3d rotation with xy rotation using x and y axes and correcting for z point.', 'duration': 57.526, 'max_score': 827.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk827956.jpg'}, {'end': 1143.595, 'src': 'embed', 'start': 1117.954, 'weight': 2, 'content': [{'end': 1123.155, 'text': 'But really, I can kind of make the cube just with eight points, which are the edges of all those connections.', 'start': 1117.954, 'duration': 5.201}, {'end': 1124.435, 'text': 'So let me just run this for a second.', 'start': 1123.175, 'duration': 1.26}, {'end': 1126.115, 'text': 'Oh boy, this works too fast.', 'start': 1124.835, 'duration': 1.28}, {'end': 1127.436, 'text': "I didn't want this to work too fast.", 'start': 1126.155, 'duration': 1.281}, {'end': 1133.397, 'text': 'So now we can see, let me just go back to rotate Z.', 'start': 1127.736, 'duration': 5.661}, {'end': 1133.857, 'text': 'And look at this.', 'start': 1133.397, 'duration': 0.46}, {'end': 1141.773, 'text': "That looks now, why do I not see eight points? Because I'm using orthographic projection as if the light is right there.", 'start': 1135.307, 'duration': 6.466}, {'end': 1143.595, 'text': "There's no kind of perspective.", 'start': 1141.813, 'duration': 1.782}], 'summary': 'Demonstrating cube creation with eight points and discussing perspective in orthographic projection.', 'duration': 25.641, 'max_score': 1117.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1117954.jpg'}], 'start': 827.956, 'title': '3d rotations and projections', 'summary': 'Covers 3d rotation demonstration, emphasizing the need for the z component and rotating around the z axis using the x and y axes. it also discusses implementing 3d rotations around x, y, and z axes, focusing on correcting syntax errors. additionally, it explores 3d vector rotation and projection, creating a cube using eight points and the limitations of orthographic projection with no perspective.', 'chapters': [{'end': 922.242, 'start': 827.956, 'title': '3d rotation demonstration', 'summary': 'Discusses the demonstration of 3d rotation, emphasizing the need to include the z component and the process of rotating around the z axis using the x and y axes.', 'duration': 94.286, 'highlights': ['The need to include the z component and an extra column of zeros for the 2D rotation demonstration.', 'The process of rotating around the Z axis using the X and Y axes.', 'The importance of having a one instead of a zero to avoid losing the z point during rotation.', 'The demonstration of rotation x and the requirement of rotation values in the y and z spots.']}, {'end': 1022.817, 'start': 924.949, 'title': 'Implementing 3d rotations', 'summary': 'Discusses the implementation of 3d rotations, including rotation around the x, y, and z axes, with a focus on correcting syntax errors and achieving accurate results.', 'duration': 97.868, 'highlights': ['The chapter covers the implementation of 3D rotations, with a focus on rotation around the x, y, and z axes.', 'The speaker encounters syntax errors and seeks help to correct spacing and missing commas during the implementation process.', 'The importance of correctly aligning the elements for rotation around the x, y, and z axes is emphasized for accurate results.']}, {'end': 1155.246, 'start': 1023.077, 'title': '3d projection and rotation', 'summary': 'Explores the process of rotating and projecting 3d vectors, creating a cube using eight points, and the limitations of orthographic projection with no perspective.', 'duration': 132.169, 'highlights': ['Creating a cube using eight points, which are the edges of all those connections.', 'Exploring the limitations of orthographic projection with no perspective.', 'The process of rotating and projecting 3D vectors.']}], 'duration': 327.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk827956.jpg', 'highlights': ['The process of rotating around the Z axis using the X and Y axes.', 'The chapter covers the implementation of 3D rotations, with a focus on rotation around the x, y, and z axes.', 'Creating a cube using eight points, which are the edges of all those connections.', 'The need to include the z component and an extra column of zeros for the 2D rotation demonstration.', 'The importance of having a one instead of a zero to avoid losing the z point during rotation.']}, {'end': 1491.41, 'segs': [{'end': 1214.427, 'src': 'embed', 'start': 1185.09, 'weight': 0, 'content': [{'end': 1186.731, 'text': "Now, there's a way I could probably combine all those.", 'start': 1185.09, 'duration': 1.641}, {'end': 1189.973, 'text': "But I'm just going to do all those matrix rotations.", 'start': 1187.011, 'duration': 2.962}, {'end': 1190.774, 'text': 'And here we go.', 'start': 1190.273, 'duration': 0.501}, {'end': 1195.937, 'text': 'Now we have my cube spinning along all axes.', 'start': 1191.554, 'duration': 4.383}, {'end': 1197.437, 'text': "Now, it doesn't look like a cube.", 'start': 1195.997, 'duration': 1.44}, {'end': 1198.598, 'text': 'Time out.', 'start': 1198.218, 'duration': 0.38}, {'end': 1202.1, 'text': 'In all of my futzing with this, I left an extra 0 here.', 'start': 1198.978, 'duration': 3.122}, {'end': 1207.203, 'text': 'This rotation x should be 1, 0, 0, 0, cosine, negative sine, 0, sine, cosine.', 'start': 1202.44, 'duration': 4.763}, {'end': 1207.423, 'text': 'All right.', 'start': 1207.243, 'duration': 0.18}, {'end': 1209.724, 'text': "So hopefully that doesn't change much.", 'start': 1207.603, 'duration': 2.121}, {'end': 1210.545, 'text': 'It still looks right.', 'start': 1209.885, 'duration': 0.66}, {'end': 1212.246, 'text': 'So that probably was just being ignored.', 'start': 1210.785, 'duration': 1.461}, {'end': 1213.086, 'text': 'I was ignoring it.', 'start': 1212.286, 'duration': 0.8}, {'end': 1214.427, 'text': "But I don't want that in my code.", 'start': 1213.106, 'duration': 1.321}], 'summary': 'Demonstrating matrix rotations and correcting code errors for cube spinning.', 'duration': 29.337, 'max_score': 1185.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1185090.jpg'}, {'end': 1253.732, 'src': 'embed', 'start': 1223.252, 'weight': 2, 'content': [{'end': 1226.674, 'text': 'Obviously, I could manually connect all the points I want to connect.', 'start': 1223.252, 'duration': 3.422}, {'end': 1231.577, 'text': 'Also, this is not the same size as what I started with.', 'start': 1227.154, 'duration': 4.423}, {'end': 1239.121, 'text': "What I actually want to do is instead of using 50 all in here, I'm going to change every instance of 50 to just the number 1.", 'start': 1233.337, 'duration': 5.784}, {'end': 1241.622, 'text': 'So we kind of have like normalized the cube.', 'start': 1239.121, 'duration': 2.501}, {'end': 1243.303, 'text': 'Actually, I kind of want to change it to 0.5.', 'start': 1241.682, 'duration': 1.621}, {'end': 1249.591, 'text': "Instead of 1, I'm going to change it to, because I want the sides, the lines to be a length 1.", 'start': 1243.303, 'duration': 6.288}, {'end': 1253.732, 'text': "So whoops, replace all, ooh, that's, do I have, oh, I have ones in other places.", 'start': 1249.591, 'duration': 4.141}], 'summary': 'Goal: normalizing cube by changing instances of 50 to 1, and then to 0.5 for line length 1.', 'duration': 30.48, 'max_score': 1223.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1223252.jpg'}, {'end': 1298.447, 'src': 'embed', 'start': 1272.699, 'weight': 1, 'content': [{'end': 1280.94, 'text': "And again, I could do this with some kind of, I'm just going to do multiply each vector by 100, and then I have this.", 'start': 1272.699, 'duration': 8.241}, {'end': 1286.382, 'text': 'And if I multiply it by 200, then I have this, which more closely matches what I started with.', 'start': 1281.14, 'duration': 5.242}, {'end': 1289.463, 'text': "The angle rotations are different, but that's no big deal.", 'start': 1286.642, 'duration': 2.821}, {'end': 1293.285, 'text': 'OK, I wanted to do that because I also would like to show you perspective.', 'start': 1289.864, 'duration': 3.421}, {'end': 1298.447, 'text': "And I think if all my coordinates are normalized, that's going to make it a little easier to do.", 'start': 1293.785, 'duration': 4.662}], 'summary': 'Demonstrated vector manipulation with scalar multiplication, achieving closer match with 200 and emphasizing normalized coordinates.', 'duration': 25.748, 'max_score': 1272.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1272699.jpg'}, {'end': 1370.78, 'src': 'embed', 'start': 1323.338, 'weight': 3, 'content': [{'end': 1330.101, 'text': 'Let me write a function called connect, and it gets two p vectors, and it just draws a line.', 'start': 1323.338, 'duration': 6.763}, {'end': 1339.576, 'text': "I'm going to say stroke weight 1, and it draws a line between one and the other.", 'start': 1333.473, 'duration': 6.103}, {'end': 1344.358, 'text': 'Stroke 255.', 'start': 1341.817, 'duration': 2.541}, {'end': 1348.7, 'text': "So if I were to say connect, oh, and it doesn't get two p vectors.", 'start': 1344.358, 'duration': 4.342}, {'end': 1349.981, 'text': 'It gets two integers.', 'start': 1348.78, 'duration': 1.201}, {'end': 1360.686, 'text': "And p vector a1 equals, I'm going to call this i and j.", 'start': 1351.261, 'duration': 9.425}, {'end': 1370.78, 'text': 'P vector A equals points I and P vector B equals points J.', 'start': 1362.537, 'duration': 8.243}], 'summary': "Function 'connect' draws a line between two points using 'stroke weight 1' and 'stroke 255'.", 'duration': 47.442, 'max_score': 1323.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1323338.jpg'}], 'start': 1155.647, 'title': 'Matrix rotation and points', 'summary': "Discusses matrix rotations applied to a cube, normalizing the cube's size for visualization, and connecting and drawing points using p vectors and for loops for visualization.", 'chapters': [{'end': 1293.285, 'start': 1155.647, 'title': 'Matrix rotation and cube visualization', 'summary': "Discusses matrix rotations applied to a cube, including correcting a rotation matrix and normalizing the cube's size for visualization, with a final mention of perspective.", 'duration': 137.638, 'highlights': ['Applying matrix rotations to a cube to achieve spinning along all axes. The speaker demonstrates applying matrix rotations to achieve the spinning of a cube along all axes, showcasing the capability of the rotation operation.', 'Correcting a rotation matrix by adjusting the values to achieve the desired visualization. The speaker corrects a rotation matrix by adjusting its values to ensure the correct visualization of the cube, emphasizing the importance of precise matrix values in achieving the desired outcome.', "Normalizing the cube's size for visualization by changing the scale factor from 50 to 0.5. The speaker normalizes the cube's size for visualization by changing the scale factor from 50 to 0.5, highlighting the process of adjusting the scale to achieve the desired size for visualization.", 'Mentioning the intention to demonstrate perspective visualization. The speaker briefly mentions the intention to demonstrate perspective visualization, hinting at upcoming content and potential visual demonstrations.']}, {'end': 1491.41, 'start': 1293.785, 'title': 'Connecting and drawing points', 'summary': 'Discusses the process of connecting and drawing points, using p vectors and for loops, to create lines and arrays of points for visualization.', 'duration': 197.625, 'highlights': ['Creating a function called connect to draw lines between points using p vectors and integers, with a stroke weight of 1 and stroke color of 255.', 'Using arrays and for loops to project points in 2D and connect them to create a visualization.']}], 'duration': 335.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1155647.jpg', 'highlights': ['Applying matrix rotations to achieve spinning along all axes.', 'Correcting a rotation matrix to achieve the desired visualization.', "Normalizing the cube's size for visualization by changing the scale factor from 50 to 0.5.", 'Creating a function called connect to draw lines between points using p vectors and integers.']}, {'end': 1982.576, 'segs': [{'end': 1601.298, 'src': 'embed', 'start': 1572.969, 'weight': 4, 'content': [{'end': 1585.978, 'text': "So there's definitely an algorithm for this, because now I just want to connect zero to four, one to five, right,", 'start': 1572.969, 'duration': 13.009}, {'end': 1591.802, 'text': 'two to six hopefully the algorithm is revealing itself to you and seven to eight.', 'start': 1585.978, 'duration': 5.824}, {'end': 1594.945, 'text': 'No, no, no, three to, sorry, three to seven.', 'start': 1592.863, 'duration': 2.082}, {'end': 1597.676, 'text': 'There we go!', 'start': 1597.196, 'duration': 0.48}, {'end': 1599.397, 'text': "There's my cube!", 'start': 1598.517, 'duration': 0.88}, {'end': 1601.298, 'text': 'I have done it!.', 'start': 1600.618, 'duration': 0.68}], 'summary': 'Following an algorithm, the speaker successfully connects specific numbers to form a cube.', 'duration': 28.329, 'max_score': 1572.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1572969.jpg'}, {'end': 1747.421, 'src': 'embed', 'start': 1698.919, 'weight': 0, 'content': [{'end': 1702.442, 'text': "Basically, we're going to add a variable.", 'start': 1698.919, 'duration': 3.523}, {'end': 1706.123, 'text': 'which indicates the distance.', 'start': 1703.402, 'duration': 2.721}, {'end': 1710.443, 'text': 'Remember my ridiculous experiment earlier, like about four and a half hours ago.', 'start': 1706.143, 'duration': 4.3}, {'end': 1712.984, 'text': 'if you are actually watching this video all the way to the end,', 'start': 1710.443, 'duration': 2.541}, {'end': 1718.845, 'text': 'where I had this light source and I was shining the light source and you were seeing the shadow here, that projection?', 'start': 1712.984, 'duration': 5.861}, {'end': 1728.187, 'text': 'I need a variable, which is the distance away from the object, the surface, that that light source is.', 'start': 1719.305, 'duration': 8.882}, {'end': 1732.128, 'text': "That's how I get perspective projection right?", 'start': 1729.767, 'duration': 2.361}, {'end': 1738.797, 'text': 'So to create this idea of perspective, I want to move the light source or move the camera further away.', 'start': 1733.595, 'duration': 5.202}, {'end': 1742.239, 'text': "There's a lot of different ways to do this in highly sophisticated methods.", 'start': 1738.817, 'duration': 3.422}, {'end': 1747.421, 'text': 'But basically, I need to scale the xy positions by the depth.', 'start': 1742.459, 'duration': 4.962}], 'summary': 'Adding a variable to indicate distance for perspective projection in video creation.', 'duration': 48.502, 'max_score': 1698.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1698919.jpg'}, {'end': 1838.567, 'src': 'heatmap', 'start': 1765.612, 'weight': 0.959, 'content': [{'end': 1776.639, 'text': "So I'm going to move this and I'm going to before I project, before I apply, before I project the final rotated matrix,", 'start': 1765.612, 'duration': 11.027}, {'end': 1782.699, 'text': 'I need to dynamically calculate this projection matrix according to the z value itself.', 'start': 1777.697, 'duration': 5.002}, {'end': 1791.383, 'text': 'So one thing that I could do is I could just say float z equals rotated dot z.', 'start': 1783.28, 'duration': 8.103}, {'end': 1795.605, 'text': 'And I could just try dividing by it.', 'start': 1791.383, 'duration': 4.222}, {'end': 1801.028, 'text': "I'm sort of scaling it according to that z.", 'start': 1798.546, 'duration': 2.482}, {'end': 1801.808, 'text': "Let's see what that does.", 'start': 1801.028, 'duration': 0.78}, {'end': 1803.359, 'text': 'Eh, something.', 'start': 1802.738, 'duration': 0.621}, {'end': 1804.78, 'text': 'Maybe it looks all weird and crazy.', 'start': 1803.399, 'duration': 1.381}, {'end': 1805.48, 'text': "That's not right.", 'start': 1804.82, 'duration': 0.66}, {'end': 1809.443, 'text': 'Well, a nice formula for doing this is actually saying 1.', 'start': 1805.76, 'duration': 3.683}, {'end': 1810.564, 'text': 'divided by.', 'start': 1809.443, 'duration': 1.121}, {'end': 1817.509, 'text': 'this is now the distance, basically the camera distance, the light source distance, minus rotated dot z.', 'start': 1810.564, 'duration': 6.945}, {'end': 1829.834, 'text': 'So if I put that in here now and I were to say float distance equals two, for example, now you can see,', 'start': 1817.509, 'duration': 12.325}, {'end': 1833.599, 'text': 'this looks much more like perspective projection.', 'start': 1829.834, 'duration': 3.765}, {'end': 1838.567, 'text': "So this is no longer orthographic, it's more like perspective, exactly sort of.", 'start': 1833.88, 'duration': 4.687}], 'summary': 'Dynamically calculating projection matrix for z value, achieving perspective projection.', 'duration': 72.955, 'max_score': 1765.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1765612.jpg'}, {'end': 1982.576, 'src': 'embed', 'start': 1962.619, 'weight': 2, 'content': [{'end': 1979.152, 'text': "Make some sort of weird pretend 3D world that doesn't follow our own sense of three dimensions by playing with this code and share that with me in the comments or on Twitter and also on thecodingtrain.com.", 'start': 1962.619, 'duration': 16.533}, {'end': 1982.576, 'text': "There'll be a link to the webpage where you can submit user-made things.", 'start': 1979.172, 'duration': 3.404}], 'summary': 'Create a unique 3d world using code and share it on twitter and thecodingtrain.com.', 'duration': 19.957, 'max_score': 1962.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1962619.jpg'}], 'start': 1492.671, 'title': 'Creating 3d perspective projection', 'summary': 'Discusses implementing perspective projection in 3d rendering, using distance variables to create depth, demonstrated through code and visual output. the presenter encourages experimentation and sharing of creations.', 'chapters': [{'end': 1670.274, 'start': 1492.671, 'title': 'Algorithm for connecting points', 'summary': 'Discusses the process of connecting points in a plane to form a cube, using trial and error to find an algorithm, resulting in a successful creation of the cube structure with 8 vertices and 12 edges.', 'duration': 177.603, 'highlights': ['Successfully creating a cube structure with 8 vertices and 12 edges through trial and error.', 'Identifying the algorithm for connecting points in a plane to form the cube structure.', 'Discussing the process of connecting points in a plane using a modulus operation and specific mathematical operations.']}, {'end': 1982.576, 'start': 1670.314, 'title': 'Creating 3d perspective projection', 'summary': 'Discusses the implementation of perspective projection in 3d rendering, involving the use of distance variables to create the illusion of depth, demonstrated through code and visual output. the presenter also encourages viewers to experiment with the concepts and share their creations.', 'duration': 312.262, 'highlights': ['Implementing perspective projection by using distance variables to create the illusion of depth The chapter delves into the process of adding perspective to 3D rendering by introducing distance variables to create the illusion of depth, demonstrating the impact of altering these variables on the visual output.', 'Encouraging viewers to experiment with the concepts and share their creations The presenter encourages viewers to explore the demonstrated concepts by experimenting with code and visual output, and sharing their creations on various platforms, fostering community engagement and creativity.', 'Demonstrating the potential distortions and manipulations achievable through altering code parameters The chapter showcases the potential for achieving diverse visual distortions and manipulations by altering code parameters, such as distance variables and trigonometric functions, to create unique 3D rendering effects.']}], 'duration': 489.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/p4Iz0XJY-Qk/pics/p4Iz0XJY-Qk1492671.jpg', 'highlights': ['Implementing perspective projection using distance variables to create depth', 'Demonstrating the impact of altering distance variables on visual output', 'Encouraging experimentation and sharing of creations', 'Showcasing potential visual distortions through code parameter alterations', 'Creating a cube structure with 8 vertices and 12 edges through trial and error', 'Identifying the algorithm for connecting points in a plane to form the cube structure', 'Discussing the process of connecting points in a plane using specific mathematical operations']}], 'highlights': ['The chapter explores creating a spinning cube in 3D using the P3D renderer in processing.', 'The chapter discusses creating 3D points for a square using P vector object and defining four points at specific coordinates (-50,-50), (50,-50), (50,50), and (-50,50).', 'The need for a custom rotate x function due to the limitation of the renderer, emphasizing the requirement for a rotation matrix and the challenges of implementing the function.', 'The process of rotating around the Z axis using the X and Y axes.', 'Applying matrix rotations to achieve spinning along all axes.', 'Implementing perspective projection using distance variables to create depth']}