When someone returns a tray to the stack, its weight pushes the platform down. What about the push and pop part of the names? These come from a computer concept known as a stack, which works like a spring-loaded tray dispenser in a cafeteria. And that's why the pushMatrix() and popMatrix() have that word in their name. This table, or matrix has only a few rows and columns, yet, through the miracle of mathematics, it contains all the information needed to do any series of transformations. Here is some sample code and the results.Įvery time you do a rotation, translation, or scaling, the information required to do the transformation is accumulated into a table of numbers. A rotation followed by a translate followed by a scale will not give the same results as a translate followed by a rotate by a scale. When you do multiple transformations, the order makes a difference. Try using scale(3.0, 0.5) to make the x dimension three times its normal size and the y dimension only half its normal size. There is no law saying that you have to scale the x and y dimensions equally. Hint: use translate() to move the origin, then use scale(). Programming Challenge: Scale up the black square, but keep its upper left corner in the same place as the gray square. ![]() That's no optical illusion-the lines really are twice as thick, because the coordinate system has been scaled to double its size. You can also see that the lines are thicker. Its upper left corner is still at (20, 20) on the scaled-up grid, but that point is now twice as far away from the origin as it was in the original coordinate system. Here is a diagram of how Processing measures angles in degrees (black) and radians (red).įirst, you can see that the square appears to have moved. When you talk about angles in radians, you say that a full circle has 2π radians. When you talk about angles in degrees, you say that a full circle has 360°. In Processing, all the functions that have to do with rotation measure angles in radians rather than degrees. This function takes one argument, which is the number of radians that you want to rotate. In addition to moving the grid, you can also rotate it with the rotate() function. In this case, the code draws the house in the same place every time, with its upper left corner at (0, 0), and lets translation do all the work instead. Triangle(x + 15, y, x, y + 15, x + 30, y + 15) Ĭompare that to the version of the function that uses translate(). Look at all the additions that you have to keep track of. This is the code for drawing the house by changing its position. It uses a loop that calls a function named house(), which takes the x and y location of the house's upper-left corner as its parameters. Here is some code that draws a row of houses. But let's take an example of where translate() can make life easier. For a simple example like the rectangle, you are correct. You may be thinking that picking up the coordinate system and moving it is a lot more trouble than just adding to coordinates. Later on in this tutorial, you will find out why those functions seem to have such strange names. However, when you start doing more sophisticated operations with the coordinate system, it's easier to use pushMatrix() and popMatrix() to save and restore the status rather than having to undo all your operations. Yes, you could have done a translate(-60, -80) to move the grid back to its original position. Finally, popMatrix() restores the coordinate system to the way it was before you did the translate. Remember, the things you draw don't move-the grid moves instead. The rect(20, 20, 40, 40) draws the rectangle at the same place it was originally. The translate(60, 80) moves the coordinate system 60 units right and 80 units down. pushMatrix() is a built-in function that saves the current position of the coordinate system. Let's look at the translation code in more detail. draw a translucent blue rectangle by translating the grid draw a translucent red rectangle by changing the coordinates Copy and paste this code into Processing and give it a try. Only the method used to move them has changed. ![]() The rectangles are translucent so that you can see that they are (visually) at the same place. Here is code that draws the rectangle in red by changing its coordinates, then draws it in blue by moving the grid. When you use transformations, the things you draw never change position the coordinate system does. Its upper left corner is still at (20,20). The important thing to notice in the preceding diagram is that, as far as the rectangle is concerned, it hasn't moved at all.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |