9.1: Transformations Pt.1 (Translate, Rotate, Push/Pop) - p5.js Tutorial

hello everybody in this video tutorial I am starting here by this whiteboard my friend the whiteboard I think I'm gonna disturb all the room XD okay it's fine it's fine hopefully no one's gonna come and complain I want to talk about transformations so this is actually a video tutorial that I've been missing for a long time it fits right in to the first or second week of programming really because it will it can become a very sophisticated complex topic as we move into 3d graphics and all sorts of stuff but ultimately this is a way of controlling your views so to speak of the canvas you're drawing to the orientation the scale the rotation to alter the way that you draw things so as a terrible way to explain it so let me make a list first this is gonna help the functions that I want to explore in this video are translate rotate there's another one scale and then also push and pop now there are more functions related to transformations than just these three and then push these five really but these are the ones I don't want to focus on in this video and I want to talk about what's of goal what is the goal here so there's a lot of reasons why you might want to use transformations and I'll try to talk about those grouping shapes together can be useful nesting various shapes within each other is a way that it could be useful but ultimately for you who are if you're just starting working with code and p5 at graphics the main reason you want to use transformations it's really just for this rotate function because you have a canvas you might have a rectangle here and what you want is for that rectangle to spin around and rotate like rotate to spin around and you would think that's like the simplest thing because there's a rotate function in turn I just say rotate another thing rotates and we're done we can leave it's not and ultimately it's it's it's um it's not so hard but it is a little tricky at first and a little confusing what these things do so the goal that I want to have in this video and there's more to it than this but at least for this first video about transformations is I want to have two rectangles and I want them each to rotate maybe this one rotates around its center and maybe this one rotates around its corner and they both rotate in opposite directions independently of each other and then you might think to yourself also like an exercise you can do and maybe I'll I think I did this actually in some solar system simulation video but from remembering that right now is you could think about what if you had some type of solar system like simulation where you have some type of star or Sun in the middle a planet that rotates around that and while that planet rotates around that there's another one you know kind of rotating around that so think about these sort of nested systems and I'm sure you'll come up with all sorts of other creative ideas so where to begin I first want to begin with the translate function so I'm going to come over here and I'm gonna go to some code which has very little in it and I'm gonna just do I'm gonna write a draw function ultimately I'm gonna start with something static but ultimately I might have an animate so so I'm gonna draw a rectangle and I'm gonna draw that rectangle at you know 50 comma 50 and I'm going to be a hundred pixels wide and 50 pixels high and I'm gonna say fill 255 and I'm gonna go back to the browser and I'm gonna look at this rectangle so I see this rectangle there there it is so what have I done I'm gonna draw the canvas again and what I've done right I have this rectangle and I gave it an XY position and it's oriented according to its corner its position is 50 comma 50 50 pixels along the x-axis 50 pixels on the y-axis and it's we see it here because it's 50 comma 50 relative to zero zero which is in the top left so we're saying rectangle 50 comma 50 you know 100 comma 50 now I could do exactly the same code exactly the same code in a slightly different way I could say instead translate 50 comma 50 and then I could say rectangle zero comma zero 100 comma 50 and what I've done is I this is these two pieces of code are identical because what does translate do it moves the point of origin it moves 0 0 and says 0 0 now lives here 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 and the reason why you might do this is to say you know translate this 0 0 into the center because you just feel you like to like think about your screen and it's like 0 0 being in the center there's all sorts of reasons why you might do this let's prove that this is the case though I'm back here so I'm now going to say right here translate 50-50 rectangle 0 0 100 comma 50 and I'm gonna say fill well actually what I'm gonna do is I'm gonna just comment this out and I'm gonna hit refresh we should see exactly the same code the second the same result so why would you do one or the other why would you say translate 50 50 and then draw the rectangle at 0 0 vs. just drawing the rectangle directly at 50 50 well one of the things that's important here is that these translations accumulate so just like when you say fill a certain color every shape afterwards is colored according that fill unless you say fill again with a different color the same sort of thing applies to translate so now if I were to say rectangle you know 100 150 comma 10 you can see there's that other rectangle it's drawn relative to where that origin was so now what's interesting about this is I can actually instead of saying translate 5050 I could say translate mouse X mouse Y so now these relative to that one position so this is one reason why this can be useful because you might want to think about this complex pattern that's all centered around or relative to one given point and you could move it all together just by altering the translation so this is one reason why it's useful another reason why it's reusable is really the main purpose for this video rotate you cannot control the rotation of a shape you're drawing without the use of translate and why is that well rotation is not as simple as just saying rotate something so let me grab this eraser here if if you said to me you know rotate that eraser at 90 degrees I would say well okay I rotate it at 90 degrees but we have this like bond you and me understand each other we can speak the language of angles and rotation without specifying but the computer does not have this bond with you it needs to know okay in addition to rotating just rotating by some angle I need to know like around what point should I rotate what's the origin what's the axis of rotation and so and what axis there's all sorts of questions so so this is what this is how this is why translate is so important because always always always rotation happens around the point of origin so if I translate to the and draw a rectangle at the corner it will 0 0 will rotate around its corner so and I have another way of describing this that I'm going to come back to in a second so let me explain what I mean by this let's come back let's put this rectangle at 5050 let's get rid of translate and I'm gonna say okay and here's the other thing hello angles time for a little review I think I have this a video for sure but since we're here let's talk about angles for a second so I have some room over here so if you're me you probably typically think of angles in terms of degrees this is like a 90-degree angle and this is a 45-degree angle and you know a full rotation is 360 degrees and we can actually the unit of measurement degrees in p5 and I'm going to because there's a function where I can say angle mode and then I can say degrees to tell p5 I like to think in terms of degrees and you should think in terms of degrees also but natively and if you use other programming and graphics environments you might not be able to do this the native kind of unit of measurement for both computer graphics systems is something called I need more space a unit of measurement known as radians radians refers to arc length oh my goodness what's that well maybe I'll make a video about arcs someday but let's just think about a circle and pretend the circle is a unit circle what is a unit circle it means the radius is of length one one pixel one centimetre one metre whatever it is let's say I want to know what is this angle right here in radians well it turns out that if I take this arc flatten it out and measure it that length is that angle in radians so radius is a way of describing and and and if you remember from some math class or you haven't taken this math class yet the circumference of a circle meaning the whole length of the entire outline of a circle the formula for calculating that is two PI R so if R is one it's just 2 pi and guess what what is 360 degrees in radians it's 2 pi so I kind of got a little off track the point of what I'm talk about which is translate rotate but if I want to rotate something according to an angle I need to at least decide what unit of measurement I'm using by default it'll use radians let's make things a little simpler and let's switch it to degrees so I'm back over here now and I'm going to say right under create canvas angle mode angel mode let's let's activate angel mode degrees before this rectangle I am going to say rotate 45 oh so oh wow that's good so let's let's add a variable have you tried variables yeah I don't know where this video fits into the playlist but variables and incidentally I'm going to use this word let to create a variable which sometimes the future too is be silly what I'm saying it cuz all my videos will have left but this is kind of new say let a for all that angle equals 0 and I'm gonna put angle in here and then every time through draw I'm going to say angle equals angle plus 1 so I'm gonna increase by 1 degrees what's going on here look at that oh there's a circle it's gonna come back in a second can we wait you mind waiting oh look there it is okay so what's it doing ah okay so what it's doing is this rectangle is at 5050 is rotating around the origin 0 0 by default if you just say rotate everything's gonna rotate around the origin so that's why we're seeing this happen you know it goes to here and then it goes to here and then it goes to here this is not a bad thing that might be what you want in fact maybe you want it to kind of like rotate around the center of the window so I could come back over here and I could say let's move the origin let me move the origin to 200 200 and now I have this rectangle that's rotating kind of around the center it's a little confusing I think it might help if I drew a line we could see what's going on here if I drew a line from 0 0 to 50 50 oh well what happened there so why didn't the line look what I did so if this is really important and I'm a quick this is a little more complicated than I mean to but this is so key look at this I translated drew the line and then I rotate it and drew the rectangle so only the rectangle is rotating not the line that were of operations is so so important 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 so I hit save I don't think so so now I can really see what's going on you can see here how it's rotating the or 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 and then this is there now why does this work this way I'm going to turn something and I'm pretty sure it was goal on Levin who I saw do a demonstration of this but I have a piece of paper this piece of paper I wanted to now be indicate I want it to be the canvas I'm gonna put it up here ok so what's actually happening let's say that I translate it to the center here right and now I'm going to say rotate 45 degrees I'm gonna rotate this 45 degrees now what am I gonna do I want to draw a rectangle so I'm gonna draw a rect and you can see this and draw a rectangle there we go look what I got can you see that so what's actually happening like in the computer's mind is this like turns the thing it transforms the view in essence of the actual windows canvas itself they draws it as if it hadn't moved it at all but then what you actually see of course is not like the canvas doesn't move just your the view of it moves so what you're actually seeing is the rotated thing try this on your own somebody make a video that's much better than that Oh spike this is why I'll never do live physics demonstrations raising like because I'm terrible about it okay anyway so you see what's going on here so what do I want to do what if I now want this rectangle to rotate around its center how am I going to handle that ok so let's go back to the code and I'm going to say ok well let's forget about this line for a second and let's put this rectangle back here let me run it again Oh but where that's weird what's oh it's still doing what it did before what I want is to draw the rectangle at 0-0 if I draw the rectangle at the point of origin you can't then it will rotate around that kicked myself like a weird finger nails on a chalkboard feeling their save refresh so you can see now it's rotating around that rectangles point of reference because that is zero zero and that's where the rectangle is if I wanted to rotate it around at the center let me say let me say a thing I can do is just say rect mode Center so I can tell the rectangle to reference its Center and now I have a rectangle rotating around its center that's what I wanted and let me position it a little bit up in the corner more of the screen we can see it spinning over there let me have it go rotate by five degrees every frame and we can see there we go we have this rotating rectangle and it's sort of important to realize that if I was going to have something move around like if I was gonna have this thing move around I would probably then I would I'd have like an exposition 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 so now you can see this 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 two or something now it's rotating and moving so this is kind of interesting by the way and I have some future videos somewhere in the nature of code playlists that deal with like angular velocity if you're like throwing something and having it spin it something you could sort of think about simulating but let me back up for a second I'm gonna get rid of the whole X&Y concept that's useful for you to think about and I am going to now make the graph the question what happens if I put a rectangle over here and I want it to rotate at a different speed in the opposite direction so let's give these some colors so we can distinguish them let's make this some reddish something or other and then I'm going to add another rectangle I'm gonna just put rect mode and set up just sort of as like kind of like a global setting for the program then I'm going to draw another rectangle and I'm gonna give it a different color and where do I want it to be I want it to be kind of at like this is 400 by 400 so let me put it at 300 300 so I'm gonna put it at 300 300 whoa where'd it go yeah we're good so what's going on so one of the things you have to remember is that this translate and rotate affects everything after it so here's a way I could fix that I could just suddenly just take that translate and rotate and put it afterwards I just put an afterwards just put it after I just put adapter don't worry about it now I've got that rotating with this not rotating because I drew the blue rectangle first then I translated rotate it and got the other thing and this isn't effect because every time through draw every time through draw transformations reset back to nothing back to zero zero being the top left with no rotation but that's not really a viable solution because I mean I'd like you to draw it in a different order and I might want this thing to rotate so if I were to like translate rotate this is gonna affect the other thing so how do I deal with this now don't get me wrong sometimes once again we want this right remember what if I just wanted a little tiny rectangle offset by a little bit rotating around so you can see I might actually want this to be the project I want things to be relative and then this is good that they follow each other but in the case of me wanting it to be in the corner separate how do i how do I stop it so one thing you might think to yourself is ah undo well let's see if I translate to 50/50 then I rotated in I drew the thing I know I know I can rotate back by negative the angle okay that undoes the rotation and then I can rotate back by negative 50 negative 15 so I'm gonna undo I'm gonna go backwards and like on we assemble we put this canvas back in the right spot let me hit save and we hit refresh look that worked so that works but this also this is a really not a viable solution because someday I'm gonna create a program with so many transformations for so many different things and one some things have been related some things some things to be independent this is me having to keep track of it myself and undo everything is kind of a nightmare there is actually a function called reset matrix which will actually and why are we calling it Matrix will reset everything but really the function that I'm looking for the one that I haven't bothered to mention yet are these push and pop so you can think about push another word for push in this case being safe and pop another word for pop being restore so I can save the current transformation state where is the origin what's the rotation by the way there's also scale so I haven't mentioned or showing you scale but that's another transformation I can save the state and then I can do a whole bunch of stuff and then I can restore it so kind of like in an undo kind of way so let's look at how that works so I can say right here before I do my first translation let me say save save whatever things were before I do this now I could do some stuff that I could undo it by saying pop so this ultimately has the same effect as it back backing out of what I did before so you can kind of this is a way putting push at the top and pop at the bottom around some code is the waving in that code self-contained within its own transformation world and now if i refresh we can see there we go it's this this rectangle is completely independent of that rectangle and now I could do something like instead of instead of drawing the rectangle at 300 300 I could translate to 300 300 I could draw the rectangle at 0-0 and I could say something like a rotate by a negative angle times 3 so I'm just going to reuse the same variable but have it be faster or something and we can see this so we could see now I have my one rectangle rotating this way independently of this one rotating the other way so I have a feeling that I've I've missed a whole bunch of things I've missed talking about scale I missed talk about why it's push and pop one of those terms mean so I think I'm gonna pause here for a second I'm gonna come back and in the next video if you're interested I'm gonna do a cup one thing I'm going to talk a little bit about what's actually going on a bit more behind the scenes why is it called push and pop what does this function reset matrix do why is there a matrix I'm gonna talk about that a little bit and I also need to show you scale a little bit more which I think can be useful okay thanks for watching and stay tuned for another video I guess oh yeah well so am I good okay bye [Music]

Channel: The Coding Train

Views: 138,033

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, itp nyu, translate, rotate, push, pop, pushmatrix, popmatrix, resetmatrix, printmatrix, processing, p5.js transformations, p5.js matrix, canvas translate, canvas, html5 canvas, html5 canvas animation, canvas rotate, canvas matrix, p5.js, javascript, p5.js tutorial

Id: o9sgjuh-CBM

Length: 22min 55sec (1375 seconds)

Published: Mon Sep 18 2017