Computation as an Computation as an Expressive MediumExpressive Medium

Lab 2: Polygons, Lab 2: Polygons, Transformations, and ArraysTransformations, and Arrays

EvanEvan

On this Episode of On this Episode of Lab...Lab...

Arrays, or Dude, What's My Arrays, or Dude, What's My Index?Index?

Building Complex ShapesBuilding Complex Shapes Translation and RotationTranslation and Rotation Pushing and PoppingPushing and Popping

ArraysArrays

Arrays store the same kind of Arrays store the same kind of data that variables do, they data that variables do, they just have more than one “spot” just have more than one “spot” for it under one namefor it under one name

If a variable is like a 1/2” If a variable is like a 1/2” binder, an array is a much binder, an array is a much bigger binderbigger binder

Array Example: Array Example: BubblesortBubblesort

Sorting functions sort arrays!Sorting functions sort arrays! What 'sorting' means depends on the What 'sorting' means depends on the contents of the array, but with contents of the array, but with numbers it usually means 'smallest numbers it usually means 'smallest to largest'to largest'

Bubblesort is the “simplest” Bubblesort is the “simplest” sorting algorithmsorting algorithm 'Bubble' larger values to the end 'Bubble' larger values to the end of the array, one by oneof the array, one by one

Bubblesort, the codeBubblesort, the codevoid bubblesort(int[] input)

{

int temp = -1;

for(int i = 0; i < input.length; i++)

{

for(int j = 0; j < input.length - 1; j++)

{

if(input[j] > input[j+1])

{

temp = input[j+1];

input[j+1] = input[j];

input[j] = temp;

} //end if

} //end for(j)

} //end for(i)

}

Bubblesort, explainedBubblesort, explainedvoid bubblesort(int[] input)

{

int temp = -1;

for(int i = 0; i < input.length; i++)

{

for(int j = 0; j < input.length - 1; j++)

{

if(input[j] > input[j+1])

{

temp = input[j+1];

input[j+1] = input[j];

input[j] = temp;

} //end if

} //end for(j)

} //end for(i)

}

One pass per element inOne pass per element inthe arraythe array

Bubblesort, explainedBubblesort, explainedvoid bubblesort(int[] input)

{

int temp = -1;

for(int i = 0; i < input.length; i++)

{

for(int j = 0; j < input.length - 1; j++)

{

if(input[j] > input[j+1])

{

temp = input[j+1];

input[j+1] = input[j];

input[j] = temp;

} //end if

} //end for(j)

} //end for(i)

}

Check each element againstCheck each element againstthe next...but don't run offthe next...but don't run offthe end of the array!the end of the array!

Bubblesort, explainedBubblesort, explainedvoid bubblesort(int[] input)

{

int temp = -1;

for(int i = 0; i < input.length; i++)

{

for(int j = 0; j < input.length - 1; j++)

{

if(input[j] > input[j+1])

{

temp = input[j+1];

input[j+1] = input[j];

input[j] = temp;

} //end if

} //end for(j)

} //end for(i)

}

If the current elementis larger than thenext...

...swap their positions!

Note that we use a 'temp'variable to hold our value.

Building Special ShapesBuilding Special Shapes

The beginShape() and endShape() The beginShape() and endShape() functions allow us to draw functions allow us to draw irregular shapes from any irregular shapes from any number of points we define.number of points we define.

Many types of Shape:Many types of Shape: POINTS, LINES, LINE_STRIP, LINE_LOOP, POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGONPOLYGON

POLYGON will be the most useful.POLYGON will be the most useful.…

Building PolygonsBuilding 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 Make as many calls to this as you have vertices in your polygon.vertices in your polygon.

endShape();endShape(); Finishes the shape, connecting the last Finishes the shape, connecting the last vertex to the first vertex to close the vertex to the first vertex to close the polygon, then colors it with the current polygon, then colors it with the current fill() color.fill() color.

Building PolygonsBuilding Polygons

beginShape(POLYGON);beginShape(POLYGON); vertex(10, 50);vertex(10, 50);

(starts a new polygon, andbegins at point (10, 50).)

Building PolygonsBuilding 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 thepolygon, and connects them in the order they are called.)

Building PolygonsBuilding Polygons

endShape();endShape();

(connects the last point to the first point, and fills thepolygon.)

Let’s Use ArraysLet’s Use Arrays

How can we apply arrays to How can we apply arrays to this? Let’s store the points this? Let’s store the points that we’re drawing.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 ArraysLet’s Use Arrays

Great! Now we know a somewhat Great! Now we know a somewhat shorter way of doing the same shorter way of doing the same thing.thing.

Well, we can also use those Well, we can also use those arrays to draw the same shape arrays to draw the same shape somewhere else.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 Now it’s time to break your brain.your brain.

What if there were an easier What if there were an easier way than adding to these values way than adding to these values each time?each time?

TranslationTranslation

Translation gives us another Translation gives us another way of drawing in a new way of drawing in a new location. It in essence, moves location. It in essence, moves the point (0, 0) in our window.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();

TranslationTranslation

After the call to translate(), After the call to translate(), any drawing functions called any drawing functions called will treat our new orange point will treat our new orange point as if it were (0, 0).as if it were (0, 0).

(10, 10)translate(10, 10);

(0, 0)

TranslationTranslation

So now, if we write the exact So now, if we write the exact same polygon code as above, the same polygon code as above, the new polygon will be 10 pixels new polygon will be 10 pixels down and 10 pixels to the down and 10 pixels to the right.right. (10, 10)

beginShape(POLYGON);for(int i = 0; i < xvals.length; i++) { vertex(xvals[i], yvals[i]);}endShape();

(0, 0)

RotationRotation

Much like Translation, Rotation Much like Translation, Rotation moves our drawing space, so that moves our drawing space, so that we can draw at different angles.we can draw at different angles.

Most of the time, you’ll want to Most of the time, you’ll want to use Rotation in conjunction with use Rotation in conjunction with Translation, because rotate() Translation, because rotate() rotates the drawing window rotates the drawing window around the point (0, 0).around the point (0, 0).

RotationRotation

Let’s look at an example Let’s look at an example without translation:without translation:

rect(10, 10, 50, 50);

(0, 0)

RotationRotation

Make a variable with the value Make a variable with the value for 45 degrees in Radians.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.)

RotationRotation

Rotate our drawing canvas 45 Rotate our drawing canvas 45 degrees around the origin.degrees around the origin.

rotate(angle);

(0, 0)

(You can see that one problem nowis that much of our drawing canvasis now outside of the window.)

RotationRotation

Draw the same square, now Draw the same square, now relative to our rotated canvas.relative to our rotated canvas.

rect(10, 10, 50, 50);

(0, 0)

(We only get to see about half of oursquare, and it isn’t really rotated in any satisfactory way.)

RotationRotation

Let’s try this from the start, Let’s try this from the start, using translation.using translation.

Where should we translate to?Where should we translate to? The point around which we want to The point around which we want to rotate. So let’s try and rotate rotate. So let’s try and rotate around the center of the square.around the center of the square.

This means moving the origin, and This means moving the origin, and drawing the square around it.drawing the square around it.

RotationRotation

Let’s start with setting our Let’s start with setting our rotation point:rotation point:

translate(35, 35);

(0, 0)

(35, 35)

RotationRotation

Now let’s draw a square with Now let’s draw a square with this point at its center.this point at its center.

rect(-25, -25, 50, 50);

(0, 0)

(35, 35)

RotationRotation

Then let’s do the same rotate Then let’s do the same rotate we did last time.we did last time.

float angle = radians(45);rotate(angle);

(0, 0)

(35, 35)

RotationRotation

Now when we draw the same Now when we draw the same square as before, it will have square as before, it will have the same center point.the same center point.

float angle = radians(45);rotate(angle);

(0, 0)

(35, 35)

RotationRotation

Try applying rotation to your Try applying rotation to your animations using draw(). What animations using draw(). What variable will you want to variable will you want to iterate to make a shape rotate iterate to make a shape rotate over time?over time?

Try making a custom polygon Try making a custom polygon rotate instead of a square.rotate instead of a square.

Wait! How do I get back to Wait! How do I get back to normal?!normal?!

If you plan to do a lot of If you plan to do a lot of translations and rotations, it translations and rotations, it helps to know about the helps to know about the concepts of concepts of pushpush and and poppop……

(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 PoppingPushing and Popping

Pushing is a way to say: Pushing is a way to say: “Hey, “Hey, computer! Remember this computer! Remember this orientation!”orientation!” PushMatrix();PushMatrix();

Popping is a way to say: Popping is a way to say: “AAAAAAAAAA! Computer, take me “AAAAAAAAAA! Computer, take me back to the way things once back to the way things once were!”were!” PopMatrix();PopMatrix();

Push & Pop …Push & Pop …IN ACTION!IN ACTION! If we want to remember the If we want to remember the original orientation…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?How is this useful?

You don’t have to You don’t have to remember the math to remember the math to reverse all the reverse all the translations and translations and rotations you’ve rotations you’ve done!done!

You can make spiral-You can make spiral-y shapes, then go y shapes, then go back to normal!back to normal!

You can make You can make drawings with limbs!drawings with limbs!

(You don’t want to have to calculate the angles of every finger, do you?)

Confused yet?Confused yet?

We went over:We went over: ArraysArrays Drawing PolygonsDrawing Polygons Translation and Translation and RotationRotation

PushMatrix and PushMatrix and PopMatrixPopMatrix

Fig. 2: Cranial leakage

.

ow.