IAT 800 Lab 2 Polygons Transformations and Arrays

IAT 800 Lab 2: Polygons, Transformations, and Arrays , Fall 2006 IAT 800

Today g Arrays g Building Complex Shapes g Translation and Rotation g Pushing and Popping , Fall 2006 IAT 800

Arrays g Arrays store lists of values g Access items by index number , Fall 2006 IAT 800

Building Special Shapes g The begin. Shape() and end. Shape() functions allow us to draw irregular shapes from any number of points we define. g Many types of Shape: – POINTS, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON – POLYGON will be the most useful. , Fall 2006 IAT 800 …

Building Polygons g begin. Shape(POLYGON); – Tells the program to start the polygon. g vertex(x, y); – Make as many calls to this as you have vertices in your polygon. g end. Shape(); – Finishes the shape, connecting the last vertex to the first vertex to close the polygon, then colors it with the current fill() color. , Fall 2006 IAT 800

Building Polygons g begin. Shape(POLYGON); g vertex(10, 50); (starts a new polygon, and begins at point (10, 50). ) , Fall 2006 IAT 800

Building Polygons g vertex(20, 10); g vertex(30, 40); g vertex(80, 60); g vertex(40, 80); (adds 4 more points to the polygon, and connects them in the order they are called. ) , Fall 2006 IAT 800

Building Polygons g end. Shape(); (connects the last point to the first point, and fills the polygon. ) , Fall 2006 IAT 800

Let’s Use Arrays g Let’s store the points that we’re drawing. int[] xvals = {10, 20, 30, 80, 40}; int[] yvals = {50, 10, 40, 60, 80}; begin. Shape(POLYGON); for(int i = 0; i < xvals. length; i++) { vertex(xvals[i], yvals[i]); } end. Shape(); , Fall 2006 IAT 800

Let’s Use Arrays g Well, we can also use those arrays to draw the same shape somewhere else. begin. Shape(POLYGON); for(int i = 0; i < xvals. length; i++) { vertex(xvals[i] + 10, yvals[i] + 10); } end. Shape(); , Fall 2006 IAT 800

This is not very general g What if you wanted to move by some other value? g Need a general method of moving polygons of some given shape , Fall 2006 IAT 800

Translation gives us another way of drawing in a new location. It in essence, moves the point (0, 0) in our window. (0, 0) begin. Shape(POLYGON); for(int i = 0; i < xvals. length; i++) { vertex(xvals[i], yvals[i]); } end. Shape(); , Fall 2006 IAT 800

Translation g After the call to translate(), any drawing functions called will treat our new orange point as if it were (0, 0) (10, 10) translate(10, 10); , Fall 2006 IAT 800

Translation g So now, if we write the exact same polygon code as above, the new polygon will be 10 pixels down and 10 pixels to the right. (0, 0) (10, 10) begin. Shape(POLYGON); for(int i = 0; i < xvals. length; i++) { vertex(xvals[i], yvals[i]); } end. Shape(); , Fall 2006 IAT 800

Rotation g Much like Translation, Rotation moves our drawing space, so that we can draw at different angles. g Most of the time, you’ll want to use Rotation in conjunction with Translation, because rotate() rotates the drawing window around the point (0, 0). , Fall 2006 IAT 800

Rotation g Let’s look at an example without translation: (0, 0) rect(10, 50, 50); , Fall 2006 IAT 800

Rotation g Make a variable with the value for 45 degrees in Radians. (0, 0) float angle = radians(45); ( radians() takes an int or float degree value and returns a float radian value. If you’re confused about the concept of radians, ask me afterward. ) , Fall 2006 IAT 800

Rotation g Rotate our drawing canvas 45 degrees around the origin. (0, 0) rotate(angle); (You can see that one problem now is that much of our drawing canvas is now outside of the window. ) , Fall 2006 IAT 800

Rotation g Draw the same square, now relative to our rotated canvas. (0, 0) rect(10, 50, 50); (We only get to see about half of our square, and it isn’t really rotated in any satisfactory way. ) , Fall 2006 IAT 800

Rotation g Let’s try this from the start, using translation. g Where should we translate to? – The point around which we want to rotate. So let’s try and rotate around the center of the square. – This means moving the origin, and drawing the square around it. , Fall 2006 IAT 800

Rotation g Let’s start with setting our rotation point: (0, 0) translate(35, 35); (35, 35) , Fall 2006 IAT 800

Rotation g Now let’s draw a square with this point at its center. (0, 0) rect(-25, 50, 50); (35, 35) , Fall 2006 IAT 800

Rotation g Then time. let’s do the same rotate we did last (0, 0) float angle = radians(45); rotate(angle); , Fall 2006 (35, 35) IAT 800

Rotation g Now when we draw the same square as before, it will have the same center point. (0, 0) float angle = radians(45); rotate(angle); , Fall 2006 (35, 35) IAT 800

Rotation g Try applying rotation to your animations using draw(). What variable will you want to iterate to make a shape rotate over time? g Try making a custom polygon rotate instead of a square. , Fall 2006 IAT 800

Wait! How do I get back to normal? ! g If you plan to do a lot of translations and rotations, it helps to know about the concepts of push (0, 0) and pop… (6 0, 15 ) ck ba go to ted r nt wa I sta st e I ju her his! w to ore t f be , Fall 2006 (35, 35) IAT 800

Pushing and Popping g Pushing is a way to say: – “Remember this orientation!” – Push. Matrix(); g Popping is a way to say: – “Take me back to the way things once were!” – Pop. Matrix(); , Fall 2006 IAT 800

Push & Pop …IN ACTION! g If we want to remember the original orientation… push. Matrix(); translate(35, 35); rotate( radians(45) ); rect(-25, 50, 50); pop. Matrix(); rect(-25, 50, 50); (0, 0) (35, 35) You can push and pop as many times as you want. It’s like you’re writing an address for the way things were on a card, and putting it on a stack each time you push… and pop just takes the first card off the top of the , Fall 2006 stack. IAT 800

How is this useful? You don’t have to remember the math to reverse all the translations and rotations you’ve done! g You can make spiral shapes, then go back to normal! g You can make drawings with limbs! g (You don’t want to have to calculate , the Fall 2006 angles of every finger, do you? ) IAT 800

Review Arrays g Drawing Polygons g Translation and Rotation g Push. Matrix and Pop. Matrix g Go over building your own methods? (no slides) g , Fall 2006 IAT 800