Intro to Graphics 05 - 2D Transformations

thank you all thank you all for coming to uh another lecture um so this is going to be an interesting one i actually spent quite a lot of time preparing this lecture for you because this is a very important topic and the topic is going to be our probably most matty topic that's going to be transformations and this is a very very fundamental thing i'm calling it mathy but it's not that having on the math we're going to deal with vectors and matrices uh but we're not going to do complicated stuff with vectors and matrices we're going to do very very basic simple stuff with vectors and matrices and that's the that's really core math requirement for uh for for graphics really some some graphics stuff will require more math but when you look at the entirety of graphics the core part that's shared with everyone it's gonna involve this much math that we're gonna go over today it's gonna be about transformations so what is transformation right so uh imagine that i have whoa a scene like this right uh so how how would you build something like this in reality right so you know let's say you have this yard um you're gonna you know put some tables and chairs right so you know you buy your tables and your chairs and and whatever else you want to put on the tables and you you you carry them you put them wherever you want them right this is how we do in reality so the way we're going to do it in computer graphics is not going to be very different actually so all these um assets we call them these models these um chair model or table model or anything else you see like trees and whatever they're going to be modeled separately somewhere right and then we're going to put them in our scene and we're going to place them wherever we want right we're going to move them we're going to orient the uh orient them however we like maybe we're going to duplicate them as many times as we want so we can have multiple chairs or multiple tables um so and all of this stuff we're going to do this mathematically using transformations that's why transformation is a very very fundamental operation for for computer graphics this is how we are going to be building our our data that we're going to be dealing with all right so uh the kind of transformations that we're going to be talking about today are specifically affine transformations so those of you uh who heard about alpine transformations should be familiar with what those are so there's translation uh that's just moving something right um there's rotation that's another alpha transformation that rotation uh scale is another affine transformation um and when people talk about f1 transformations they also talk about oftentimes skew like when i ask this in my classes at least one person will say oh there's also skew yes there's cube and skew looks something like this um but i don't quite like talking about f line transformations that including skew in them because skew is actually a combination of rotation and scale and here's how it works you start with a rotation and then you apply some non-uniform scale and then you rotate it back and that becomes skew so skew is not really a new thing it's just a combination of rotation and scale that's why i when i think about f1 transformations these are what i mean and specifically speaking you'll see that rotation and scale are linear transformations when we add translation to it that becomes um the set of alpine transformations now these are the simplest transformations we can have that's why we're talking about them so you can basically you know maybe take uh a chair model and you can bend it in some weird ways that's gonna that's not gonna be an f1 transformation that's gonna be a you know non-linear transformation so these f9 transformations are going to be a sort of layer in the sense that they're going to preserve lines and they're going to preserve the the parallel uh lines as as parallel so all lines after these transformations will remain as lines and all parallel lines will remain as parallel lines after these transformations so basically this is the set of easiest transformations we can do and these are the kind of transformations that we're going to be using very very frequently for all sorts of operations in computer graphics uh we're going to be using them for building our scenes we're also going to be using them for rendering and we're going to talk about that next time all right so uh let's start talking about them well i would like to talk about them in the context of 2d graphics first so we're going to talk about 2dfine transformations today and next time we're going to talk about how to extend them to 3d and it's not going to be hard so i would like to talk about all the details and all the complicated stuff in 2d but let's start the simplest one translation or just moving some stuff right so um it's a it's a good idea to think about these in the context of vectors so i have this coordinate frame of course i can't have a vector without a coordinate right i have a chord in frame and i have a vector right um so what i would like to do is translate that vector so what does that mean i'm going to take this this position and move it somewhere else so i'm going to get a new vector like this so i started with let's say vector p and p prime over here is the resulting vector after translation operation so basically what happened here is that i uh move that position by adding another vector to it so if i write it write this as a vector math it's going to look like my my resulting vector is my input vector plus some translation vector whatever that is right and if you look at vector components in 2d of course x and y components are going to be just you know i'm just adding the translation vector to my original vector and this is it so very very simple math right super simple translation is super easy you think yes it is super easy so let's move on to scale um in scale i'm going to just um you know move things make things larger or smaller we can't do that in reality but in computer graphics that's very easy to do so we're going to do that uh so let's see that this is let's say that this is our initial vector and when i scale it it's just going to grow right so this was my initial vector and i scaled it to this this larger record right and so this is not going to change direction if i do uniform scale so if i'm scaling both x and y directions the same amount then it's not going to change its direction so i can write the output vector p prime as some scalar multiple of my input vector right simple stuff so again if i look at the individual components this is what it looks like both x and y components are scaled by the same amount uh if i want to do some non-uniform scale now in x and y directions i'm not scaling the same amount let's say i scale in the x direction first and then i i'm going to scale down in y direction right so this is my total scale operation uh so p to p prime uh in this case we call this non-uniform scale because we're not i'm not scaling the same amount uh and here i can't quite write it as an equation like this because i don't have a single scaling factor so this is this is not going to work but i can still write it like this right i can still write it as individual components and now x and y are scaled by different amounts simple enough super simple right nothing complicated let's move on let's move on to rotation in rotation we're taking to an object and we're rotating it obviously so from the perspective of a vector it's going to be like this is my input vector and i'm rotating it and this is the vector i get so what i did here is just i just rotate it by some angle let's call it theta all right uh so let's see what this what the equation for this looks like so now this looks a little bit more complicated right it is it is going to be just a little bit more complicated but not much uh so let's start with this input vector um to see what the equation for this rotation could be so what i'm going to do is that i'm going to represent this vector as a sum of its uh vertical and horizontal components its component along x and its component along y so this is it's a component along x and the other one is its component on y so basically my input vector is a sum of these two vectors right basic i mean this is super simple right it's a x coordinate y coordinate that's what it is good so the interesting bit here is that when i rotate this vector um i can rotate these x and y coordinates together with it right if i rotate all of these these three vectors together this is what it looks like right so basically um let's take a look at this this x component only uh for the time being and what what happened here is that this x component i ended up rotating it by the same same angle so what happened to this this vector well its length is still this is still is still the same it was px that was its length and it is still px right because i just rotated it um so how can i find its coordinates well it's relatively easy right so that its x coordinate is going to be p x cosine theta y coordinate is going to be p x sine theta and why is that it's because of this uh uh trigonometric identity right for a triangle with angle theta i'm going to have one edge cosine theta length the other edge is going to be sine theta enough yeah that's where it's coming from all right so this was our um x component so if i uh so i can actually write this this resulting vector as this a p x times p x is the magnitude times cosine theta sine theta vector that's the direction good so that's our that's just this vector so we we also have this other vector remember the other component the y component that's also rotated well it's rotated similarly not quite exactly uh in this case um the what the the angles come out as what the the values for x and y come out as minus sine theta and cosine theta and if you look at it its x component over here is negative so it's going to be minus sine theta right here right minus sine theta and its y component is going to be cosine theta all right so this is the other vector so if i add these two things up together that should form my resulting rotated vector right so basically this is my rotation equation i can just uh i can just look at my initial vector that was p and i take its x and y uh coordinate values and i multiply them by these these vectors and i add them together that's going to be my rotation simple enough right here's our rotation formulation and now this is this looks a little bit ugly to write it like this there's a simpler way of writing this in the form of a matrix it's writing i'm writing the same equation in the form of a matrix so i put p x and p y over here uh as one vector and what i'm multiplying them by is this this matrix so this equation at the bottom here is exactly the same thing as the equation at the top here right same thing nothing complicated now um here's the thing i intentionally pick this rotation to be counterclockwise rotation um sometimes people prefer using clockwise rotation well if it's clockwise rotation then the rotation angle is going to be negative theta right it's going to be the opposite of that so that's the notation that's used in the book so let's um let's be faithful to that uh so i'm going to uh take these and uh write uh replace them so we're rotating from here to here now in clockwise direction so this minus sign went over here uh effectively because this theta became minus theta effectively all right so this is the equation you'll see in the book if you see the other one the minus sign is over here not over there it's going to be the counterclockwise rotation matrix that's basically the same thing all right so this can i write this as like a vector equation i can't quite write it as a pure vector equation but i can write it as a vector animations equation obviously that was this is my resulting vector this is my rotation matrix and this is my initial uh vector so rotation matrix there it is we're gonna so we're gonna be doing rotations using matrices because that just uh makes the notation quite simpler now let's talk a little bit about rotation matrices because they're actually very very interesting rotation matrices are orthogonal matrices so if you haven't heard about orthogonal matrices before it's a a very simple concept really an orthogonal matrix is gonna have um if you look at these columns each column you will see that these columns form two vectors and these two vectors are going to be perpendicular to each other in 3d in a two by two orthogonal matrix these two vectors are going to be perpendicular also these two vectors are going to be perpendicular so if you look at horizontal vectors they are also going to be perpendicular but if you look at vertical vectors and they are going to be perpendicular as well and there's that there's actually a good reason for that the rotation becomes an orthogonal um orthogonal matrix so if you if you remember what we did we took this initial vector and we it into two components right so i have this x component and y component now when i rotated them this x component is going to be perpendicular to the y component right it was perpendicular before after i rotate it they're still going to be perpendicular and remember so this is the direction over here this one and the other one is the direction that's that's over here this one so obviously they have to be perpendicular to each other by design so that's the reason why um that's you know one way to explain why rotation matrices are uh orthogonal matrices and this is an important concept because on top of matrices there's some very very interesting and nice properties the nice property here is that the inverse of an orthogonal matrix the matrix inverse is just it's transpose so if you just do the transpose of a rotational matrix you get its inverse so it's just basically writing the same thing here it's the rotation matrix multiplied by it's transpose uh it's going to give you identity matrix that means it's it's inverse and that's also very easy to understand here if you look at this so this is transpose is the same amount of rotation with negative theta right if i put negative theta over here if i just take this theta and make it negative theta i'm going to get this matrix right because uh negative sine cosine is going to just destroy that negative sign and sine is going to be sine negative theta is going to be negative sine theta right so if i rotate something and rotate in the opposite direction of course i'm going to get back to doing nothing which is the identity matrix and that's why its transpose turns out to be its inverse and that's a very very important property i want you to remember this this is going to come up and it's going to be very very important orthogonal matrices have this very nice property uh that their transpose is going to be their inverse and rotation matrices are orthogonal matrices uh although i should mention this not all orthogonal matrices are rotation matrices there is one more little uh trick to it uh orthogonal matrices in involving rotation matrices and also reflections so they may include reflection as well so what i mean by that is of course this is rotation in 2d and reflection is going to be this right i just flipped it over uh and you know you can think of this this will this um reflection as the rotation in a higher dimension like if if this were in 3d i'm just rotating it this way uh so in some ways it is like rotation but in the higher dimension so orthogonal matrices will include all this stuff uh not just rotations right but uh it's it's okay to think about you know orthogonal matrices as um rotation matrices um it's pretty close uh so this was rotation we basically said that for rotational operation i can write it as a matrix which is good um okay well can i do the same for scale turns out i can so this non-uniform scale i had to write it in some strange way but i don't have to write it in a strange way i can actually write it as like a in a matrix form like this um and in this case this is the same thing as what i wrote before right um so this matrix equation is the same thing as this equation i'm scaling the x and y coordinates with different values um so going back to scale i if i write it like a scale matrix here i can use it in like matrix operation like this like and good i have my scale operation non-uniform scale also represented as a matrix multiplication which is pretty nice and these are very very simple matrices they're going to be diagonal matrices so that means all nonzero values are going to be along the diagonal and they don't have to be the same value uh they can be different values to represent non-uniform scale and super simple matrices all right you can say why do i care let me bring back skew to explain why do you care about representing scale as a matrix now we said this this q operation was what a rotation first right and then some uh non-uniform scale and then some rotation back right so i can write this as a matrix equation like this so i have my initial vector multiplied by my first rotation matrix and then the resulting vector is multiplied by the scale matrix and then the resulting vector is multiplied by the rotation matrix right so i can transform everything like this or i can just combine all of these matrices together i can multiply them together to to form the result and that's multiplied result is going to be just one matrix right so i can actually form a skew matrix and a matrix that will do the skew operation as a combination of rotation scale and another rotation so that would be my just one matrix that will do my skew operation and this is not actually this is not specific to skew um any two by two matrix that you can come up with just randomly generate some values for a two by two matrix you can represent it as a rotation scale and another rotation it's not very specific to scale and that's why these rotation and scale are really fundamental operations using in 2d although there's a little bit of asterisk here because uh this doesn't have to be strictly speaking rotation so you can take any two by two matrix and apply what we call um singular value decomposition as an operation that takes a matrix and separates it into these three matrices uh i'm not going to explain you how to do singular value decomposition that's not very important for for this course but i would like you to know that it exists you can actually do this you can take a matrix and apply singular value become position and when you do that you get three matrices out of it and two of these three matrices are orthogonal matrices now they don't have to be rotational matrices so they can include reflections in them but you can think of them as rotation matrices and the matrix in the middle is going to be a diagonal matrix that's going to be a scale matrix right so it's uh you know good to know that any kind of transformation i can do with rotation and scale or with a two by two matrix any kind of transformation i can do with a two by two matrix i can sort of represent it as a rotation scale rotation um but um though this is not specific to 2d actually it's it generalizes to any matrix it doesn't even have to be a square matrix uh i can apply singular value decomposition to any matrix and you get a orthogonal matrix uh that's going to be square orthogonal matrix diagonal matrix and another actually non uh rectangular diagonal matrix and another square orthogonal matrix out of that so singular value decomposition is a lot more general than 2v2 matrices but you know that that that's what it does for us well you know what is actually important here is not the fact that i can take any sort of two by two matrix and decompose it into these three operations what is really really important here is that i can take any series of rotation and scale applied in any order and i can convert that into just one transformation matrix right so i can rotate scale and then rotate again and then rotate again and then scale and then you know whatever i do like all these stuff and and all this the result of all that operation becomes one transformation just a single transformation becomes a single matrix it's just a single 2 by 2 matrix that does all of this stuff for us and that's going to be important because we're going to be doing when we're moving things around we're going to be applying all sorts of operations uh and uh you know it's it's good to represent everything using a single matrix well you might say that well there's something important that's missing here right what is that something very very important that's missing here super important that's translation what happened to translation yeah if i'm going to build a c i'm going to move things around i can't do that without translation it's kind of important right okay so let's try doing this first attempt um i'm going to add i'm going to do the rotation scale with a matrix and then i'm going to do the translation okay but what if i want to rotate after i translate okay i can rotate after i translate i do another rotation scale matrix whatever after i translate but what if i want to translate it again after that well then i'm gonna add another one all right this this is getting messy i'm not liking this right this is looking quite messy and i really don't want to do that and you may think that why would i care like who would want to translate and rotate and translate again well it's it's actually a very fundamental operation let me tell you why so here's the reason why i want to combine rotations and and translation so if i take this this cube and i rotate it um you know it might rotate like this and it's going to rotate around the origin point whatever that is let's say the origin is at this corner so rotation is going to when i apply the rotation it's going to rotate around the origin but if i want to take this object and i want to rotate it around its center how do i do that well here's how i do it first i apply a translation i move it center to the origin by this translation and then i apply my rotation and then i translate it back to to where it was and there it is so i ended up rotating it around and center so to be able to do a rotation around any point in the 2d space i'm gonna have to combine translation and rotation together and it would be nice to have one matrix that does that for me right instead of doing this you know translate and then rotate and translate again that's kind of messy uh so that brings us to homogeneous coordinates now um this term sounds like oh something quite complicated but it's actually a super simple super easy trick and it's going to allow us to represent rotate translations as a part of our matrices so here's the problem i want to be able to do a translation this is what i want to do right i want to add some translation to my vector and get the resulting negative and i want to be able to do this using some matrix algebra like this so i want to have a translation matrix whatever that is we don't know yet and i want to multiply my vector with that translation matrix to get my step but here's the thing there is no matrix that would actually do this right i can't just take this and convert it to some magical matrix operation it's just no matrix exists to do this for me because this is not multiplication this is addition addition is supposed to be something simpler but it's not matrix multiplication i can't do that so what am i going to do uh i'm going to do a trick i'm going to cheat here here's that's my right hand i'm actually going to cheat so what i'm going to do to be able to do this addition in the context of multiplication i'm going to cheat and add one more coordinate to my vector now i have one more coordinate and if i have one more coordinate i can just write a matrix like this so you see this part of the matrix is identity matrix right so it's not going to change anything and this part of the matrix is going to be multiplied by 1 and add it to these components right by just adding this one i could get this lovely matrix that will do this simple operation for me excellent right now okay uh now i have a two by three matrix which is no i'm not liking that and it'd be nice like so this is what we call homogeneous coordinates and i'll tell you a little bit more about this so basically i'm adding an extra coordinate so that i can do addition by and make addition look like matrix multiplication so if i'm going to be using homogeneous coordinates here i should be getting homogeneous coordinates on the other end as well so that's i'm going to convert my matrix to a three by three matrix now look at this last row this is a very very trivial row it says i don't care i don't care one so this this uh bottom row of the matrix is always going to be zero zero one always not quite we're going to fill up with it later but don't worry about it for the time being for today i'm going to assume that this bottom row is always going to be 0 0 1 right because i don't want to change this it start you know i start with 1 here and the bottom row is still going to be 1 over there so i would like this bottom row to be zero zero one all right so what did i do i basically added this extra coordinate and i'm calling this homogeneous coordinates uh and by doing that i managed to represent my translation as a form of matrix multiplication so i basically made the math more complicated than it was it was a simple addition i turned it into something a bit more complicated and the reason why i'm doing that is because now i can do this now i can take any series of transformations any affine transformation translation rotation scale and in any order and i can combine all that into just one matrix now when i get this matrix that's going to define my entire transformation and my transformation can be a string of rotations and scales and translations i don't care what it is this one matrix one three by three matrix is going to represent the result of that entire transformation for me uh which is a very very very useful operation in computer graphics and we're going to use that a lot and the resulting matrix will look like something like this so the bottom row is going to be 0 0 1 because yeah this is where i cheat and i don't care about this row right uh so this bottom row is always going to be like this uh okay for the time being it's always going to be like this now these two components are going to represent the ultimate the final resulting translation and these two by two components a b c d here they're going to represent the rotation and scale component the resulting rotation and scale component right again now it's very important for you guys to understand this part is going to be related to the project so i'm repeating this this is my resulting translation now my the way i get there maybe i did a whole bunch of translations and rotations or whatever it might be complicated but my ultimate um the the resulting translation out of all these uh complicated operations is going to be just this e and f that's going to be my resulting final translation and a b c d here is just going to be representing my combined rotation and scale matrix okay so there you have it this is um we did this we even uh did the homogeneous coordinates and now we can do stuff like this right we can just take our objects and translate them rotate them scale them however you want and we can do any uh any combination of these and build our seams so that's great and the nice thing is that you know i can take my chairs and put them around my table and then i can take this table and chair combination and move them together somewhere so basically i i first ended up placing my chair to next to a table and then i moved that table and chair somewhere else so basically i'm applying multiple trans transformations um translation rotation scale and in the end this whole thing boils down into a single transformation matrix all right so these are airline transformations yay um very fundamental stuff so but let's let's look at them some more i would really like you all to understand this this thing really well so um when well i'm gonna uh so there are different ways of thinking about transformations and i don't want you to get confused about this uh so you can think of this like i have this vector uh of course i need to have a coordinate frame first so i have this this vector and i'm by applying some transformation i'm changing this vector to something else so you can think about transformation like this um but um there's another way of thinking about this so i can say that hey i have i have this point in space and i have a vector in this in this coordinate frame i have a vector that represents this position now i'm interested in this position but i would like to represent this position from let's say a different coordinate frame this is the other coordinate frame and i'm i i'm still i want to represent this very position and i know where it is in this coordinate frame i would like to know what it is in this coordinate frame right so i would like to know this vector so you can think about transformation as a way of transforming the coordinate frame and it's going to be exactly the same thing right so this vector and this vector those are the this this is the same vector but this the only difference is conceptual you can think about this as i took my vector and i deformed it or you can think about this as i'm still representing the same point but from a different different viewpoint from a different uh coordinate right right these are the same things so again i can think of this as i had an object like this and i just you know moved and translated and rotated and scaled whatever uh i transformed this object to a different location or or i can think of this as well here's here's here's my object and i would like to know where that object is from a different perspective from a different coordinate frame right so these are exactly the same things it's just a you know different way of think different ways of thinking uh of the uh exact exact same thing well this is like uh you're it's relativity right it's uh same thing as i'm mowing in a car uh is it me that's moving or is it the street that's moving from my perspective the street is moving from everybody else's perspective the car is moving i'm moving in the car right it's uh basically the same thing that what's happening is exactly the same it's just your your perspective is different uh here's another important thing before i conclude this is here's another very very important thing um so i can represent positions and directions and i can handle them uh within the same in the same uh umbrella so if i'm interested in a position like this this position over here and i would like to know that position from a different coordinate frame um i would like to get this vector right but we said vectors can represent positions they can also represent directions but what if this vector did not represent a position it actually represented a direction if it represented a direction this is not the vector i want to get out of this right i would like to get a vector that is actually in the same direction this is the vector that i would like to i would like to have a transformation that will give me this not that right turns out homogeneous coordinates will help me do this very very easily so if i have a vector that represents a position we saw that we can do this representation with uh homogeneous coordinates i multiply by my resulting transformation matrix whatever that is and i've got the result right this is what we've been doing now if my vector if my vector represents a direction what i would like to do is that i would like to get rid of this translation here the resulting translation because i don't want to translate my vector i don't want to translate my position uh i just want to rotate and non-uniformly scale or like i would like to apply this part that that part is important i don't care about the translation part because you know that translation is going to change the vector direction and i don't want that all right so the way to do that is very simple if i have a direction vector instead of putting one here i'm just going to put zero and if i put zero here i'm gonna get zero out of there obviously uh and it's just gonna ignore this this resulting translation component so i can use exactly the same transformation matrix to transform vectors that represent positions and vectors that represent directions uh and i won't have to change my transformation matrix at all and by vectors that represent positions will look like this they will have one over here and after the transformation they will look like they will still look like vectors that represent um translation now sorry positions uh if my vectors that represent directions we'll have zero over here and after the transformation they will still have this zero component and they will still look like vectors that represent um directions right and that is the the reason for this sort of funny wording here calling this homogeneous coordinates it's homogeneous that it sort of encapsules all of the things that we want to do uh all of the f1 transformations and the two different types of vectors we have position vectors and direction vectors so everything is homogeneously contained in this in this one form and and uh that's what we're going to get now this is what we get for uh transformations in in 2d now um i don't want to get into transformations in in 3d today so this is where i'm going to stop and next time we're going to talk about transformations in 3d

Channel: Cem Yuksel

Views: 2,880

Keywords:

Id: EKN7dTJ4ep8

Length: 40min 35sec (2435 seconds)

Published: Sat Feb 06 2021