Computation as an Expressive Medium Lab 2: Polygons, Transformations, and Arrays (Oh My) Micah

This Week’s EXCITING lesson… Arrays, or Whoa, I’m Still Confused(?) Arrays, or Whoa, I’m Still Confused(?) Building Complex Shapes Building Complex Shapes Translation and Rotation Translation and Rotation Pushing and Popping Pushing and Popping

Arrays Rock! Arrays store lists of variables that you can access in order later. Arrays store lists of variables that you can access in order later.

Building Special Shapes The beginShape() and endShape() functions allow us to draw irregular shapes from any number of points we define. The beginShape() and endShape() functions allow us to draw irregular shapes from any number of points we define. Many types of Shape: Many types of Shape: POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON POLYGON will be the most useful. POLYGON will be the most useful. …

Building Polygons beginShape(POLYGON); beginShape(POLYGON); Tells the program to start the polygon. Tells the program to start the polygon. vertex(x, y); vertex(x, y); Make as many calls to this as you have vertices in your polygon. Make as many calls to this as you have vertices in your polygon. endShape(); endShape(); Finishes the shape, connecting the last vertex to the first vertex to close the polygon, then colors it with the current fill() color. Finishes the shape, connecting the last vertex to the first vertex to close the polygon, then colors it with the current fill() color.

Building Polygons beginShape(POLYGON); beginShape(POLYGON); vertex(10, 50); vertex(10, 50); (starts a new polygon, and begins at point (10, 50).)

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

Building Polygons endShape(); endShape(); (connects the last point to the first point, and fills the polygon.)

Let’s Use Arrays How can we apply arrays to this? Let’s store the points that we’re drawing. How can we apply arrays to this? Let’s store the points that we’re drawing. int[] xvals = {10, 20, 30, 80, 40}; int[] yvals = {50, 10, 40, 60, 80}; beginShape(POLYGON); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]); } endShape();

Let’s Use Arrays Great! Now we know a somewhat shorter way of doing the same thing. Great! Now we know a somewhat shorter way of doing the same thing. Well, we can also use those arrays to draw the same shape somewhere else. Well, we can also use those arrays to draw the same shape somewhere else. beginShape(POLYGON); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i] + 10, yvals[i] + 10); } endShape();

Now it’s time to break your brain. What if there were an easier way than adding to these values each time? What if there were an easier way than adding to these values each time?

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

Translation After the call to translate(), any drawing functions called will treat our new orange point as if it were (0, 0). 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); (0, 0)

Translation 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. 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. (10, 10) beginShape(POLYGON); for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]); } endShape(); (0, 0)

Rotation Much like Translation, Rotation moves our drawing space, so that we can draw at different angles. Much like Translation, Rotation moves our drawing space, so that we can draw at different angles. 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). 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).

Rotation Let’s look at an example without translation: Let’s look at an example without translation: rect(10, 10, 50, 50); (0, 0)

Rotation Make a variable with the value for 45 degrees in Radians. Make a variable with the value for 45 degrees in Radians. float angle = radians(45); (0, 0) ( 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.)

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

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

Rotation Let’s try this from the start, using translation. Let’s try this from the start, using translation. Where should we translate to? 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. 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. This means moving the origin, and drawing the square around it.

Rotation Let’s start with setting our rotation point: Let’s start with setting our rotation point: translate(35, 35); (0, 0) (35, 35)

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

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

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

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

Wait! How do I get back to normal?! If you plan to do a lot of translations and rotations, it helps to know about the concepts of push and pop… If you plan to do a lot of translations and rotations, it helps to know about the concepts of push and pop… (0, 0) (35, 35) (60, 15) I just want to go back to Kansas! I just want to go back to where I started before this whole crazy mess!

Pushing and Popping Pushing is a way to say: “Hey, computer! Remember this orientation!” Pushing is a way to say: “Hey, computer! Remember this orientation!” PushMatrix(); PushMatrix(); Popping is a way to say: “AAAAAAAAAA! Computer, take me back to the way things once were!” Popping is a way to say: “AAAAAAAAAA! Computer, take me back to the way things once were!” PopMatrix(); PopMatrix();

Push & Pop …IN ACTION! If we want to remember the original orientation… If we want to remember the original orientation… pushMatrix(); translate(35,35); rotate( radians(45) ); rect(-25,-25,50,50); popMatrix(); rect(-25,-25,50,50); (0, 0) 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 stack. (35, 35)

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

Confused yet? We went over: We went over: Arrays Arrays Drawing Polygons Drawing Polygons Translation and Rotation Translation and Rotation PushMatrix and PopMatrix PushMatrix and PopMatrix Fig. 2: Cranial leakage. ow.