title
How to Rotate Shapes in p5.js (translate, rotate, push, pop)
description
In this video I cover the functions translate(), rotate(), push() and pop(). Code: https://thecodingtrain.com/tracks/transformations-in-p5/transformations/translate-rotate-push-pop
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/HbW7TMPZM
đĨ Next: https://youtu.be/pkHZTWOoTLM
Videos:
đ Solar System Simulation: https://youtu.be/l8SiJ-RmeHU
đ Angles and Rotation: https://youtu.be/DMg-WRfNB60
Timestamps:
00:00 Introduction
03:00 Translate
08:10 Angles
10:45 Rotate
20:15 Push and Pop
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
đ Website: https://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
#transformations #translate #rotate #javascript #p5js
detail
{'title': 'How to Rotate Shapes in p5.js (translate, rotate, push, pop)', 'heatmap': [{'end': 674.407, 'start': 653.828, 'weight': 0.845}, {'end': 701.298, 'start': 684.891, 'weight': 1}, {'end': 756.782, 'start': 740.725, 'weight': 0.79}, {'end': 811.568, 'start': 781.315, 'weight': 0.914}, {'end': 977.722, 'start': 948.392, 'weight': 0.803}, {'end': 1022.039, 'start': 1002.932, 'weight': 0.72}], 'summary': "Tutorial series covers 2d transformations in p5.js, emphasizing translate, rotate, scale, push, and pop functions, with practical examples on manipulating objects' position, orientation, and visual transformations. it also explains the use of 'push' and 'pop' functions to save and restore transformation states for independent rotations and translations.", 'chapters': [{'end': 167.853, 'segs': [{'end': 75.475, 'src': 'embed', 'start': 41.471, 'weight': 0, 'content': [{'end': 43.211, 'text': "So that's a terrible way to explain it.", 'start': 41.471, 'duration': 1.74}, {'end': 46.172, 'text': 'So let me make a list first.', 'start': 43.871, 'duration': 2.301}, {'end': 46.832, 'text': 'This is going to help.', 'start': 46.312, 'duration': 0.52}, {'end': 55.913, 'text': 'The functions that I want to explore in this video are translate, rotate.', 'start': 48.352, 'duration': 7.561}, {'end': 59.154, 'text': "There's another one, scale.", 'start': 58.094, 'duration': 1.06}, {'end': 65.453, 'text': 'And then also push and pop.', 'start': 62.222, 'duration': 3.231}, {'end': 73.174, 'text': 'Now, there are more functions related to transformations than just these three and these five, really.', 'start': 67.13, 'duration': 6.044}, {'end': 75.475, 'text': 'But these are the ones that I want to focus on in this video.', 'start': 73.494, 'duration': 1.981}], 'summary': 'The video will explore the functions translate, rotate, scale, push, and pop for transformations.', 'duration': 34.004, 'max_score': 41.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM41471.jpg'}, {'end': 124.354, 'src': 'embed', 'start': 94.266, 'weight': 3, 'content': [{'end': 97.913, 'text': 'The main reason you want to use transformations is really just for this rotate function.', 'start': 94.266, 'duration': 3.647}, {'end': 100.358, 'text': 'Because you have a canvas.', 'start': 98.274, 'duration': 2.084}, {'end': 104.683, 'text': 'you might have a rectangle here.', 'start': 102.782, 'duration': 1.901}, {'end': 111.026, 'text': 'And what you want is for that rectangle to spin around and rotate, like rotate, spin around.', 'start': 105.083, 'duration': 5.943}, {'end': 114.368, 'text': "And you would think that's like the simplest thing, because there's a rotate function.", 'start': 111.046, 'duration': 3.322}, {'end': 117.05, 'text': "and shouldn't I just say rotate and then the thing rotates and we're done and we can leave?", 'start': 114.368, 'duration': 2.682}, {'end': 117.77, 'text': "It's not.", 'start': 117.33, 'duration': 0.44}, {'end': 124.354, 'text': "And ultimately, it's not so hard, but it is a little tricky at first and a little confusing what these things do.", 'start': 118.29, 'duration': 6.064}], 'summary': 'Using transformations, like the rotate function, can be tricky at first for spinning a rectangle on a canvas.', 'duration': 30.088, 'max_score': 94.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM94266.jpg'}, {'end': 172.937, 'src': 'embed', 'start': 149.103, 'weight': 2, 'content': [{'end': 155.486, 'text': "I think I did this actually in some solar system simulation video, but I'm remembering that right now is you could think about well,", 'start': 149.103, 'duration': 6.383}, {'end': 161.808, 'text': 'what if you had some type of solar system-like simulation where you have some type of star or sun in the middle,', 'start': 155.486, 'duration': 6.322}, {'end': 167.853, 'text': "a planet that rotates around that And while that planet rotates around that, there's another one rotating around that.", 'start': 161.808, 'duration': 6.045}, {'end': 169.934, 'text': 'So think about these nested systems.', 'start': 167.893, 'duration': 2.041}, {'end': 172.937, 'text': "And I'm sure you'll come up with all sorts of other creative ideas.", 'start': 169.954, 'duration': 2.983}], 'summary': 'Discussion of nested solar system simulation with creative potential.', 'duration': 23.834, 'max_score': 149.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM149103.jpg'}], 'start': 0.389, 'title': '2d transformations in p5', 'summary': 'Covers 2d transformations in p5, detailing translate, rotate, scale, and push and pop functions. it emphasizes the significance of rotate function in creating independent rotations for shapes and simulating celestial movements in a solar system-like simulation.', 'chapters': [{'end': 167.853, 'start': 0.389, 'title': 'Understanding 2d transformations in p5', 'summary': 'Discusses 2d transformations in p5, focusing on translate, rotate, scale, and push and pop functions, emphasizing the importance of transformations, particularly the rotate function, in creating independent rotations for shapes and simulating celestial movements in a solar system-like simulation.', 'duration': 167.464, 'highlights': ['The chapter discusses 2D transformations in P5, focusing on translate, rotate, scale, and push and pop functions. The tutorial introduces the key functions related to transformations in P5, including translate, rotate, scale, and push and pop.', 'Emphasizes the importance of transformations, particularly the rotate function, in creating independent rotations for shapes. The tutorial underscores the significance of using transformations, especially the rotate function, to achieve independent rotations for shapes in a canvas.', 'Mentions simulating celestial movements in a solar system-like simulation using rotations. The chapter mentions the possibility of simulating celestial movements, such as planets rotating around a star, using rotations in a solar system-like simulation.']}], 'duration': 167.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM389.jpg', 'highlights': ['The tutorial introduces the key functions related to transformations in P5, including translate, rotate, scale, and push and pop.', 'The chapter discusses 2D transformations in P5, focusing on translate, rotate, scale, and push and pop functions.', 'The chapter mentions the possibility of simulating celestial movements, such as planets rotating around a star, using rotations in a solar system-like simulation.', 'The tutorial underscores the significance of using transformations, especially the rotate function, to achieve independent rotations for shapes in a canvas.', 'Emphasizes the importance of transformations, particularly the rotate function, in creating independent rotations for shapes.']}, {'end': 697.216, 'segs': [{'end': 197.417, 'src': 'embed', 'start': 167.893, 'weight': 0, 'content': [{'end': 169.934, 'text': 'So think about these nested systems.', 'start': 167.893, 'duration': 2.041}, {'end': 172.937, 'text': "And I'm sure you'll come up with all sorts of other creative ideas.", 'start': 169.954, 'duration': 2.983}, {'end': 179.462, 'text': 'So where to begin? I first want to begin with the translate function.', 'start': 173.397, 'duration': 6.065}, {'end': 180.343, 'text': "So I'm going to come over here.", 'start': 179.482, 'duration': 0.861}, {'end': 184.326, 'text': "And I'm going to go to some code, which has very little in it.", 'start': 182.004, 'duration': 2.322}, {'end': 187.749, 'text': "And I'm going to just do, I'm going to write a draw function.", 'start': 184.827, 'duration': 2.922}, {'end': 189.571, 'text': "Ultimately, I'm going to start with something static.", 'start': 187.789, 'duration': 1.782}, {'end': 195.437, 'text': 'But ultimately, I might have an animator.', 'start': 190.575, 'duration': 4.862}, {'end': 197.417, 'text': "So I'm going to draw a rectangle.", 'start': 195.637, 'duration': 1.78}], 'summary': 'Discussing nested systems and coding a draw function.', 'duration': 29.524, 'max_score': 167.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM167893.jpg'}, {'end': 313.744, 'src': 'embed', 'start': 291.317, 'weight': 2, 'content': [{'end': 299.76, 'text': "So if I draw the rectangle at 0, 0, I see it in exactly the same place, but I'm just thinking about the orientation of the canvas in a different way.", 'start': 291.317, 'duration': 8.443}, {'end': 309.223, 'text': 'And a reason why you might do this is to say translate 0, 0 into the center, because you like to think about your screen as 0, 0 being in the center.', 'start': 300.02, 'duration': 9.203}, {'end': 310.923, 'text': "There's all sorts of reasons why you might do this.", 'start': 309.243, 'duration': 1.68}, {'end': 313.744, 'text': "Let's prove that this is the case.", 'start': 312.544, 'duration': 1.2}], 'summary': 'Shifting canvas orientation to center at 0, 0 for screen visualization.', 'duration': 22.427, 'max_score': 291.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM291317.jpg'}, {'end': 410.781, 'src': 'embed', 'start': 360.131, 'weight': 1, 'content': [{'end': 364.733, 'text': 'unless you say fill again with a different color, the same sort of thing applies to translate.', 'start': 360.131, 'duration': 4.602}, {'end': 379.924, 'text': "So now, if I were to say rectangle 100, 100, 50, 10, you can see there's that other rectangle.", 'start': 364.773, 'duration': 15.151}, {'end': 382.626, 'text': "It's drawn relative to where that origin was.", 'start': 380.004, 'duration': 2.622}, {'end': 391.013, 'text': "So now what's interesting about this is I can actually, instead of saying translate 50, 50, I could say translate mouse x, mouse y.", 'start': 382.906, 'duration': 8.107}, {'end': 395.976, 'text': 'So now these move relative to that one position.', 'start': 392.915, 'duration': 3.061}, {'end': 398.637, 'text': 'So this is one reason why this can be useful,', 'start': 395.996, 'duration': 2.641}, {'end': 404.939, 'text': "because you might want to think about this complex pattern that's all centered around or relative to one given point.", 'start': 398.637, 'duration': 6.302}, {'end': 408.96, 'text': 'And you could move it all together just by altering the translation.', 'start': 405.219, 'duration': 3.741}, {'end': 410.781, 'text': "So this is one reason why it's useful.", 'start': 409.24, 'duration': 1.541}], 'summary': 'Using translate function to create relative positioning for shapes and patterns, illustrating its usefulness in complex designs.', 'duration': 50.65, 'max_score': 360.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM360131.jpg'}, {'end': 572.697, 'src': 'embed', 'start': 541.922, 'weight': 4, 'content': [{'end': 546.304, 'text': 'But natively, and if you use other programming and graphics environments, you might not be able to do this.', 'start': 541.922, 'duration': 4.382}, {'end': 556.693, 'text': 'The native kind of unit of measurement for most computer graphics systems is something called I need more space.', 'start': 546.344, 'duration': 10.349}, {'end': 560.454, 'text': 'A unit of measurement known as radians.', 'start': 558.114, 'duration': 2.34}, {'end': 568.936, 'text': 'Radians refers to arc length.', 'start': 565.656, 'duration': 3.28}, {'end': 570.177, 'text': 'Oh my goodness.', 'start': 569.337, 'duration': 0.84}, {'end': 572.697, 'text': "What's that? Well, maybe I'll make a video about arcs someday.", 'start': 570.277, 'duration': 2.42}], 'summary': 'Computer graphics use radians as the native unit of measurement.', 'duration': 30.775, 'max_score': 541.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM541922.jpg'}, {'end': 629.097, 'src': 'embed', 'start': 605.039, 'weight': 5, 'content': [{'end': 612.585, 'text': "So radian is a way of describing and if you remember from some math class, or you haven't taken this math class yet the circumference of a circle,", 'start': 605.039, 'duration': 7.546}, {'end': 618.009, 'text': 'meaning the whole length of the entire outline of a circle.', 'start': 612.585, 'duration': 5.424}, {'end': 622.292, 'text': 'the formula for calculating that is 2 pi r.', 'start': 618.009, 'duration': 4.283}, {'end': 624.774, 'text': "So if r is 1, it's just 2 pi.", 'start': 622.292, 'duration': 2.482}, {'end': 629.097, 'text': "And guess what? What is 360 degrees in radians? It's 2 pi.", 'start': 624.834, 'duration': 4.263}], 'summary': 'Radian is a way of describing the circumference of a circle; 360 degrees equals 2 pi.', 'duration': 24.058, 'max_score': 605.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM605039.jpg'}, {'end': 680.269, 'src': 'heatmap', 'start': 653.828, 'weight': 0.845, 'content': [{'end': 662.256, 'text': 'Degrees And now, Before this rectangle, I am going to say rotate 45.', 'start': 653.828, 'duration': 8.428}, {'end': 669.563, 'text': "Oh, so what? What's going on? So let's add a variable.", 'start': 662.256, 'duration': 7.307}, {'end': 673.126, 'text': "Have you tried variables yet? I don't know where this video fits into my playlist.", 'start': 669.943, 'duration': 3.183}, {'end': 674.407, 'text': 'But variables.', 'start': 673.507, 'duration': 0.9}, {'end': 680.269, 'text': "And, incidentally, I'm going to use this word let to create a variable which,", 'start': 675.507, 'duration': 4.762}], 'summary': "Introduction to using variables and creating a variable with the word 'let'.", 'duration': 26.441, 'max_score': 653.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM653828.jpg'}], 'start': 167.893, 'title': 'Transforming objects in programming', 'summary': "Delves into nested systems, translate function, and the importance of origin, emphasizing manipulation of objects' position and orientation on canvas using code. it also covers understanding angles and radians in programming, elucidating the use of degrees and radians for rotation, with practical examples.", 'chapters': [{'end': 313.744, 'start': 167.893, 'title': 'Nested systems and translate function', 'summary': 'Explores the concept of nested systems and the translate function, demonstrating how to manipulate the position and orientation of objects on the canvas using code, with examples and explanations.', 'duration': 145.851, 'highlights': ['The chapter discusses the concept of nested systems and how they can lead to creative ideas.', 'It demonstrates the use of the translate function to manipulate the position and orientation of objects on the canvas using code.', 'Examples of drawing a rectangle at specific coordinates and using the translate function to achieve the same result are provided.', 'The importance of understanding the orientation of the canvas and reasons for using the translate function are explained.']}, {'end': 494.277, 'start': 315.401, 'title': 'Translate, rotate, and the importance of origin', 'summary': 'Explains the importance of translate in accumulating transformations, using relative positioning, and controlling rotation, emphasizing that rotation always happens around the point of origin.', 'duration': 178.876, 'highlights': ['Rotation always happens around the point of origin, making translate important for controlling rotation. The computer needs to know the axis of rotation, and rotation always happens around the point of origin, making translate important for controlling rotation.', 'Translate is useful for creating complex patterns relative to a given point and for moving multiple elements together. Translate can be used to create complex patterns relative to a given point and to move multiple elements together, providing a useful function in graphic design.', 'The importance of translate in accumulating transformations, similar to how fill affects subsequent shapes. Translate is important in accumulating transformations, similar to how fill affects subsequent shapes, demonstrating its significance in graphic design.']}, {'end': 697.216, 'start': 494.278, 'title': 'Understanding angles and radians in programming', 'summary': 'Discusses the concept of angles and radians in programming, highlighting the use of degrees and radians for rotation and providing a practical example of rotating an object in a p5 environment.', 'duration': 202.938, 'highlights': ['The native unit of measurement for most computer graphics systems is radians, which refers to arc length and is used to measure angles in a circle.', 'A full rotation of 360 degrees is equivalent to 2 pi in radians, illustrating the relationship between degrees and radians.', 'The chapter provides a practical example of using the P5 environment to rotate an object by 45 degrees and increment it by 1 degree through the draw function.']}], 'duration': 529.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM167893.jpg', 'highlights': ['The chapter discusses the concept of nested systems and how they can lead to creative ideas.', 'It demonstrates the use of the translate function to manipulate the position and orientation of objects on the canvas using code.', 'The importance of understanding the orientation of the canvas and reasons for using the translate function are explained.', 'Translate is useful for creating complex patterns relative to a given point and for moving multiple elements together.', 'The native unit of measurement for most computer graphics systems is radians, which refers to arc length and is used to measure angles in a circle.', 'A full rotation of 360 degrees is equivalent to 2 pi in radians, illustrating the relationship between degrees and radians.']}, {'end': 899.437, 'segs': [{'end': 758.284, 'src': 'heatmap', 'start': 725.237, 'weight': 0, 'content': [{'end': 726.678, 'text': "So that's why we're seeing this happen.", 'start': 725.237, 'duration': 1.441}, {'end': 732.242, 'text': 'It goes to here, and then it goes to here, and then it goes to here.', 'start': 729.44, 'duration': 2.802}, {'end': 734.122, 'text': 'This is not a bad thing.', 'start': 733.001, 'duration': 1.121}, {'end': 735.782, 'text': 'That might be what you want.', 'start': 734.682, 'duration': 1.1}, {'end': 740.405, 'text': 'In fact, maybe you want it to kind of like rotate around the center of the window.', 'start': 736.002, 'duration': 4.403}, {'end': 745.607, 'text': "So I could come back over here and I could say, let's move the origin.", 'start': 740.725, 'duration': 4.882}, {'end': 751.652, 'text': 'Let me move the origin to 200, 200.', 'start': 746.467, 'duration': 5.185}, {'end': 755.9, 'text': "And now I have this rectangle that's rotating kind of around the center.", 'start': 751.653, 'duration': 4.247}, {'end': 756.782, 'text': "It's a little confusing.", 'start': 755.96, 'duration': 0.822}, {'end': 758.284, 'text': 'I think it might help if I drew a line.', 'start': 756.842, 'duration': 1.442}], 'summary': 'Discussion about moving the origin to (200, 200) for rotating a rectangle.', 'duration': 33.047, 'max_score': 725.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM725237.jpg'}, {'end': 815.351, 'src': 'heatmap', 'start': 776.994, 'weight': 1, 'content': [{'end': 780.915, 'text': 'Look at this, I translated, drew the line, and then I rotated and drew the rectangle.', 'start': 776.994, 'duration': 3.921}, {'end': 784.875, 'text': 'So only the rectangle is rotating, not the line.', 'start': 781.315, 'duration': 3.56}, {'end': 787.216, 'text': 'The order of operations is so, so important.', 'start': 784.895, 'duration': 2.321}, {'end': 794.737, 'text': 'So let me put rotate up here, then let me draw both a line and a rectangle after I translate to the center and rotate by that angle.', 'start': 787.736, 'duration': 7.001}, {'end': 797.558, 'text': "Did I hit save? I don't think so.", 'start': 794.757, 'duration': 2.801}, {'end': 800.78, 'text': "So now we can really see what's going on.", 'start': 799.039, 'duration': 1.741}, {'end': 802.822, 'text': "You can see here how it's rotating.", 'start': 801.041, 'duration': 1.781}, {'end': 811.568, 'text': "The point of origin, the point of reference for that rotation, is the center of the window, wherever I've defined 0, 0 to be by translation.", 'start': 803.783, 'duration': 7.785}, {'end': 815.351, 'text': "Now, why does this work this way? I'm going to attempt something.", 'start': 811.969, 'duration': 3.382}], 'summary': 'Demonstrating translation, rotation, and the importance of order of operations.', 'duration': 38.357, 'max_score': 776.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM776994.jpg'}, {'end': 884.045, 'src': 'embed', 'start': 854.847, 'weight': 2, 'content': [{'end': 859.049, 'text': 'Can you even see this? I draw a rectangle, there we go.', 'start': 854.847, 'duration': 4.202}, {'end': 862.091, 'text': 'Look what I got.', 'start': 861.351, 'duration': 0.74}, {'end': 869.99, 'text': "Can you see that? So what's actually happening in the computer's mind is it turns the thing.", 'start': 863.072, 'duration': 6.918}, {'end': 878.9, 'text': "It transforms the view, in essence, of the actual Windows canvas itself, then draws it as if it hadn't moved it at all.", 'start': 870.03, 'duration': 8.87}, {'end': 884.045, 'text': "But then what you actually see, of course, is not the canvas doesn't move, just the view of it moves.", 'start': 879.16, 'duration': 4.885}], 'summary': 'Demonstrates how the computer processes and displays a rectangle on the windows canvas.', 'duration': 29.198, 'max_score': 854.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM854847.jpg'}], 'start': 698.957, 'title': 'Visual transformations', 'summary': 'Explores rectangle rotation around the origin and the possibility of changing the origin. it also highlights the importance of the order of operations in transformations and discusses visual transformation in computer graphics, emphasizing rotation and translation.', 'chapters': [{'end': 751.652, 'start': 698.957, 'title': 'Rectangle rotation around origin', 'summary': 'Explores the rotation of a rectangle around the origin and the possibility of changing the origin to achieve rotation around a different point, such as the center of the window.', 'duration': 52.695, 'highlights': ['The rectangle is rotating around the origin, 0, 0, and the default rotation makes everything rotate around the origin.', 'The possibility of changing the origin to 200, 200 to make the rectangle rotate around a different point, such as the center of the window.']}, {'end': 800.78, 'start': 751.653, 'title': 'Order of operations and transformations', 'summary': 'Highlights the importance of the order of operations in transformations, demonstrating the impact of the sequence of translation and rotation on the visual output.', 'duration': 49.127, 'highlights': ['The order of operations in transformations is crucial, as demonstrated by the impact of the sequence of translation and rotation on the visual output.', 'Drawing a line from 0, 0 to 50, 50 and then rotating the rectangle illustrates the impact of the order of operations, providing a visual representation of the concept.', 'The importance of the order of operations is emphasized through the visual demonstration of translating, drawing a line, and then rotating the rectangle, showcasing the significance of sequence in transformations.']}, {'end': 899.437, 'start': 801.041, 'title': 'Visual transformation in computer graphics', 'summary': 'Discusses visual transformation in computer graphics, including rotation and translation, demonstrated with a piece of paper and a canvas, and emphasizes the concept of transforming the view of the canvas without physically moving it.', 'duration': 98.396, 'highlights': ['The concept of visual transformation in computer graphics is demonstrated through rotation and translation, using a piece of paper as a canvas and emphasizing the transformation of the view without physically moving the canvas.', 'The demonstration includes translating the paper to the center and then rotating it by 45 degrees, resulting in a visually transformed rectangle on the canvas.']}], 'duration': 200.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM698957.jpg', 'highlights': ['The possibility of changing the origin to 200, 200 to make the rectangle rotate around a different point, such as the center of the window.', 'The importance of the order of operations is emphasized through the visual demonstration of translating, drawing a line, and then rotating the rectangle, showcasing the significance of sequence in transformations.', 'The concept of visual transformation in computer graphics is demonstrated through rotation and translation, using a piece of paper as a canvas and emphasizing the transformation of the view without physically moving the canvas.']}, {'end': 1069.251, 'segs': [{'end': 1022.039, 'src': 'heatmap', 'start': 948.392, 'weight': 0, 'content': [{'end': 957.258, 'text': 'If I wanted to rotate around its center, let me say, the easy thing I can do is just say rect mode center.', 'start': 948.392, 'duration': 8.866}, {'end': 960.22, 'text': 'So I can tell the rectangle to reference its center.', 'start': 957.618, 'duration': 2.602}, {'end': 963.402, 'text': 'And now I have a rectangle rotating around its center.', 'start': 960.86, 'duration': 2.542}, {'end': 964.903, 'text': "That's what I wanted.", 'start': 963.562, 'duration': 1.341}, {'end': 971.117, 'text': 'Let me position it a little bit up in the corner more of the screen.', 'start': 966.994, 'duration': 4.123}, {'end': 973.959, 'text': 'We can see it spinning over there.', 'start': 972.478, 'duration': 1.481}, {'end': 977.722, 'text': 'Let me have it rotate by 5 degrees every frame.', 'start': 974.039, 'duration': 3.683}, {'end': 978.902, 'text': 'And we can see, there we go.', 'start': 978.022, 'duration': 0.88}, {'end': 981.604, 'text': 'We have this rotating rectangle.', 'start': 978.922, 'duration': 2.682}, {'end': 988.329, 'text': "And it's sort of important to realize that if I was going to have something move around, like if I was going to have this thing move around,", 'start': 981.844, 'duration': 6.485}, {'end': 990.831, 'text': 'I would probably then have like an x position.', 'start': 988.329, 'duration': 2.502}, {'end': 1001.928, 'text': 'and I might have a y position, and now what I would want to do is position the rectangles, position is defined by translate, x and y.', 'start': 992.128, 'duration': 9.8}, {'end': 1003.852, 'text': 'So now you can see this.', 'start': 1002.932, 'duration': 0.92}, {'end': 1012.936, 'text': "It's the same sketch as before, but now if x changes, so in addition to the angle changing, if I were to say x equals x plus 2 or something,", 'start': 1003.932, 'duration': 9.004}, {'end': 1014.576, 'text': "now it's rotating and moving.", 'start': 1012.936, 'duration': 1.64}, {'end': 1015.957, 'text': 'So this is kind of interesting, by the way.', 'start': 1014.696, 'duration': 1.261}, {'end': 1022.039, 'text': 'And I have some future videos somewhere in the Nature of Code playlist that deal with angular velocity.', 'start': 1015.997, 'duration': 6.042}], 'summary': 'A rectangle rotates around its center, moving and rotating by 5 degrees every frame.', 'duration': 73.647, 'max_score': 948.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM948392.jpg'}], 'start': 899.637, 'title': 'Rotating rectangles', 'summary': 'Discusses rotating rectangles around their center in processing, using rect mode center and translate to achieve rotation and movement. it includes an example of rotating and moving rectangles by 5 degrees and x + 2, and introduces the concept of simulating angular velocity.', 'chapters': [{'end': 1069.251, 'start': 899.637, 'title': 'Rotating rectangles in processing', 'summary': 'Discusses how to rotate rectangles around their center in processing, demonstrating the use of rect mode center and translate to achieve the desired rotation and movement, with an example of rotating and moving rectangles by 5 degrees and x + 2, as well as introducing the concept of simulating angular velocity.', 'duration': 169.614, 'highlights': ['The chapter demonstrates using rect mode center to make the rectangle rotate around its center. The author shows how to use rect mode center to make the rectangle rotate around its center, achieving the desired rotation.', 'The chapter showcases the use of translate to position the rectangles and achieve rotation and movement. The author explains how translate can be used to position the rectangles and achieve both rotation and movement, demonstrating the impact of changing x and y positions.', 'The chapter introduces the concept of simulating angular velocity for rotating and moving objects. The author briefly mentions the concept of simulating angular velocity and provides a glimpse of its relevance in future videos in the Nature of Code playlist.']}], 'duration': 169.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM899637.jpg', 'highlights': ['The chapter demonstrates using rect mode center to make the rectangle rotate around its center.', 'The chapter showcases the use of translate to position the rectangles and achieve rotation and movement.', 'The chapter introduces the concept of simulating angular velocity for rotating and moving objects.']}, {'end': 1214.774, 'segs': [{'end': 1135.683, 'src': 'embed', 'start': 1113.223, 'weight': 0, 'content': [{'end': 1122.755, 'text': 'Because every time through draw, every time through draw, transformations reset back to nothing, back to 0, 0 being the top left with no rotation.', 'start': 1113.223, 'duration': 9.532}, {'end': 1128.757, 'text': "But that's not really a viable solution because, I mean, I might need to draw it in a different order.", 'start': 1124.514, 'duration': 4.243}, {'end': 1130.379, 'text': 'And I might want this thing to rotate.', 'start': 1128.877, 'duration': 1.502}, {'end': 1133.001, 'text': 'So if I were to translate rotate, this is going to affect the other thing.', 'start': 1130.639, 'duration': 2.362}, {'end': 1135.683, 'text': "So how do I deal with this? Now, don't get me wrong.", 'start': 1133.341, 'duration': 2.342}], 'summary': 'Challenges in maintaining transformations and rotations during drawing process.', 'duration': 22.46, 'max_score': 1113.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1113223.jpg'}, {'end': 1232.439, 'src': 'embed', 'start': 1200.407, 'weight': 1, 'content': [{'end': 1202.828, 'text': 'I want some things to be related to some things, some things to be independent.', 'start': 1200.407, 'duration': 2.421}, {'end': 1207.05, 'text': 'This me having to keep track of it myself and undo everything is kind of a nightmare.', 'start': 1203.108, 'duration': 3.942}, {'end': 1213.313, 'text': "There is actually a function called reset matrix, which will actually and why we're calling it matrix will reset everything,", 'start': 1207.89, 'duration': 5.423}, {'end': 1214.774, 'text': "but really a function that I'm looking for.", 'start': 1213.313, 'duration': 1.461}, {'end': 1219.099, 'text': "The one that I haven't bothered to mention yet are these, push and pop.", 'start': 1216.015, 'duration': 3.084}, {'end': 1227.011, 'text': 'So you can think about push, another word for push, in this case, being save.', 'start': 1219.48, 'duration': 7.531}, {'end': 1232.439, 'text': 'And pop, another word for pop, being restore.', 'start': 1227.832, 'duration': 4.607}], 'summary': 'The need for a function to reset and manage related and independent elements is expressed in the transcript.', 'duration': 32.032, 'max_score': 1200.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1200407.jpg'}], 'start': 1070.171, 'title': 'Managing transformations in canvas', 'summary': 'Details techniques for managing transformations in a canvas, covering translation, rotation, and resetting using specific coordinates and functions like reset matrix.', 'chapters': [{'end': 1214.774, 'start': 1070.171, 'title': 'Managing transformations in canvas', 'summary': 'Explains how to manage transformations in a canvas, addressing challenges with translating, rotating, and undoing transformations using specific coordinates and functions like reset matrix.', 'duration': 144.603, 'highlights': ['The translate and rotate functions affect everything after it, which can be resolved by reordering these functions to ensure the desired transformations (e.g., rotating a specific element without affecting others).', 'The need for managing transformations arises from the desire for some elements to be related and others to be independent, which can become complex to handle manually as the program grows.', "The solution involving the 'reset matrix' function simplifies the process by resetting all transformations, addressing the challenge of manually undoing multiple transformations in a complex program."]}], 'duration': 144.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1070171.jpg', 'highlights': ['The translate and rotate functions affect everything after it, which can be resolved by reordering these functions to ensure the desired transformations (e.g., rotating a specific element without affecting others).', "The solution involving the 'reset matrix' function simplifies the process by resetting all transformations, addressing the challenge of manually undoing multiple transformations in a complex program.", 'The need for managing transformations arises from the desire for some elements to be related and others to be independent, which can become complex to handle manually as the program grows.']}, {'end': 1362.064, 'segs': [{'end': 1244.739, 'src': 'embed', 'start': 1216.015, 'weight': 0, 'content': [{'end': 1219.099, 'text': "The one that I haven't bothered to mention yet are these, push and pop.", 'start': 1216.015, 'duration': 3.084}, {'end': 1227.011, 'text': 'So you can think about push, another word for push, in this case, being save.', 'start': 1219.48, 'duration': 7.531}, {'end': 1232.439, 'text': 'And pop, another word for pop, being restore.', 'start': 1227.832, 'duration': 4.607}, {'end': 1238.346, 'text': 'So I can save the current transformation state.', 'start': 1234.619, 'duration': 3.727}, {'end': 1241.733, 'text': "Where is the origin? What's the rotation? By the way, there's also scale.", 'start': 1238.707, 'duration': 3.026}, {'end': 1244.739, 'text': "So I haven't mentioned or shown you scale, but that's another transformation.", 'start': 1242.294, 'duration': 2.445}], 'summary': 'Introduces push and pop as save and restore operations for transformation state, including origin, rotation, and scale.', 'duration': 28.724, 'max_score': 1216.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1216015.jpg'}, {'end': 1295.154, 'src': 'embed', 'start': 1268.996, 'weight': 1, 'content': [{'end': 1275.185, 'text': 'So this ultimately has the same effect as, backing out of what I did before.', 'start': 1268.996, 'duration': 6.189}, {'end': 1276.145, 'text': 'So you can kind of.', 'start': 1275.245, 'duration': 0.9}, {'end': 1280.167, 'text': 'this is a way of putting push at the top and pop at the bottom around some code,', 'start': 1276.145, 'duration': 4.022}, {'end': 1284.349, 'text': 'is the way of making that code self-contained within its own transformation world.', 'start': 1280.167, 'duration': 4.182}, {'end': 1295.154, 'text': 'And now, if I refresh, we can see, there we go, this rectangle is completely independent of that rectangle.', 'start': 1284.889, 'duration': 10.265}], 'summary': 'Demonstrating transformation with code, making rectangles independent.', 'duration': 26.158, 'max_score': 1268.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1268996.jpg'}, {'end': 1362.064, 'src': 'embed', 'start': 1338.307, 'weight': 2, 'content': [{'end': 1341.568, 'text': "And in the next video, if you're interested, I'm going to do a couple.", 'start': 1338.307, 'duration': 3.261}, {'end': 1345.129, 'text': "One thing, I'm going to talk a little bit about what's actually going on a bit more behind the scenes.", 'start': 1341.768, 'duration': 3.361}, {'end': 1351.751, 'text': "Why is it called push and pop? What does this function reset matrix do? Why is there a matrix? I'm going to talk about that a little bit.", 'start': 1345.589, 'duration': 6.162}, {'end': 1354.892, 'text': 'And I also need to show you scale a little bit more, which I think can be useful.', 'start': 1351.791, 'duration': 3.101}, {'end': 1359.539, 'text': 'Thanks for watching, and stay tuned for another video, I guess.', 'start': 1355.512, 'duration': 4.027}, {'end': 1362.064, 'text': 'What else am I going to do? OK, bye.', 'start': 1359.88, 'duration': 2.184}], 'summary': 'Next video will cover push and pop, reset matrix function, and scaling techniques.', 'duration': 23.757, 'max_score': 1338.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1338307.jpg'}], 'start': 1216.015, 'title': 'Transformation and undoing in graphics', 'summary': "Discusses the use of 'push' and 'pop' to save and restore transformation states, enabling independent transformations like rotation and translation.", 'chapters': [{'end': 1362.064, 'start': 1216.015, 'title': 'Transformation and undoing in graphics', 'summary': "Discusses the use of 'push' and 'pop' to save and restore transformation states, allowing for independent transformations, including rotation and translation, in graphics.", 'duration': 146.049, 'highlights': ["The 'push' and 'pop' functions allow for saving and restoring transformation states, enabling independent transformations such as rotation and translation in graphics.", "Using 'push' and 'pop' functions allows for creating self-contained code within its own transformation world, resulting in independent graphics elements.", "The chapter mentions the possibility of further discussing the concepts of scale, the functions of 'push' and 'pop', and the use of 'reset matrix' in the next video."]}], 'duration': 146.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/o9sgjuh-CBM/pics/o9sgjuh-CBM1216015.jpg', 'highlights': ["The 'push' and 'pop' functions allow for saving and restoring transformation states, enabling independent transformations such as rotation and translation in graphics.", "Using 'push' and 'pop' functions allows for creating self-contained code within its own transformation world, resulting in independent graphics elements.", "The chapter mentions the possibility of further discussing the concepts of scale, the functions of 'push' and 'pop', and the use of 'reset matrix' in the next video."]}], 'highlights': ["The 'push' and 'pop' functions allow for saving and restoring transformation states, enabling independent transformations such as rotation and translation in graphics.", "Using 'push' and 'pop' functions allows for creating self-contained code within its own transformation world, resulting in independent graphics elements.", 'The tutorial underscores the significance of using transformations, especially the rotate function, to achieve independent rotations for shapes in a canvas.', 'The chapter demonstrates using rect mode center to make the rectangle rotate around its center.', 'The chapter introduces the concept of simulating angular velocity for rotating and moving objects.', "The solution involving the 'reset matrix' function simplifies the process by resetting all transformations, addressing the challenge of manually undoing multiple transformations in a complex program.", 'The need for managing transformations arises from the desire for some elements to be related and others to be independent, which can become complex to handle manually as the program grows.', 'The chapter discusses the concept of nested systems and how they can lead to creative ideas.', 'The importance of understanding the orientation of the canvas and reasons for using the translate function are explained.', 'The possibility of changing the origin to 200, 200 to make the rectangle rotate around a different point, such as the center of the window.']}