1. IAT 265
Lecture 2:
Java Loops, Arrays Processing setup, draw, mouse Shapes Transformations, Push/Pop

2. Suggestions on learning to program
Spend a lot of time fiddling around with code
Programming is something you have to learn by doing it
Get help from other people
I expect those who already know some programming to help others
Figure things out in groups
Ask me questions in class
Jan 9, 2018
IAT 265

3. setup() void setup() is a predefined Processing method that you define
Syntax
void setup() is a predefined Processing method that you define
setup() is called once when a sketch first starts executing
Place any startup code in setup(), eg.
Setting the size
Setting the background color
Initializing variables…
Semantics
Design
Jan 9, 2018
IAT 265

4. draw()
draw() is a predefined Processing method that you define
draw() is called repeatedly by the Processing system
Put code in draw() when you need to constantly update the display (for example, animating an object)
Jan 9, 2018
IAT 265

5. Example of setup() and draw()
int x; int y; void setup() { size(400, 400); background(0); x = 0; y = height/2; } void draw() { ellipse(x, y, 20, 20); x = x + 1; if (x > width)
Jan 9, 2018
IAT 265

6. setup() and draw() are examples of callbacks
A callback function is defined by the programmer
The callback gets called in response to some internal event
You usually don’t call callback functions directly with your own code.
setup() and draw() are predefined within Processing as to-be-called-if-defined
Jan 9, 2018
IAT 265

7. Callbacks
A Callback is an example of the Observer Pattern … more later!
Jan 9, 2018
IAT 265

8. Controlling draw()
frameRate() can be used to set the number of times per second that draw() is called
frameRate(30) says to call draw() 30 times a second (if the computer is capable)
delay() delays execution for a certain number of milliseconds
delay(250) delays for 250 milliseconds (1/4 of a sec.)
You can use delay() or frameRate() to determine how fast you want draw() to be called – frameRate() is probably easier
noLoop() tells the system to stop calling draw()
If you want to, for example, turn off animation
loop() tells the system to start calling draw() again
Use noLoop() and loop() together to turn repeated drawing on and off
Jan 9, 2018
IAT 265

9. Mouse variables
mouseX and mouseY – variables that automatically contain the current mouse location
pmouseX and pmouseY hold the previous location
mousePressed – boolean variable that is true if a mouse button is down
mouseButton – value is LEFT, RIGHT or CENTER depending on which button is held down
Jan 9, 2018
IAT 265

10. Mouse callback methods
There are several built-in methods you can fill in to respond to mouse events
mousePressed() mouseReleased()
mouseMoved() mouseDragged()
Example:
void mousePressed() {
if( mouseButton == LEFT ){
println( “Left Mouse Button was pressed” );
loop(); // activate drawing again }
Jan 9, 2018
IAT 265

11. If if statements introduce conditional execution
if ( <boolean expression> ) {
// do this code }
<boolean expressions> have one of two values: true or false
Jan 9, 2018
IAT 265

12. Example Try changing the values of drawRect and drawAnX
boolean drawRect = true;
boolean drawAnX = true;
if (drawRect) {
fill( 0, 200, 0 ); // fill with green
rect( 30, 30, 40, 40 ); }
if (drawAnX)
line( 0, 0, 100, 100 );
line( 100, 0, 0, 100 );
Try changing the values of drawRect and drawAnX
Jan 9, 2018
IAT 265

13. Example if / else boolean drawRect = true; boolean drawAnX = true;
if (drawRect) {
fill( 0, 200, 0 ); // fill with green
rect( 30, 30, 40, 40 ); }
else
fill( 0, 200, 220 ); // fill with cyan
ellipse( 30, 30, 40, 40);
if (drawAnX)
line( 0, 0, 100, 100 );
line( 100, 0, 0, 100 );
Jan 9, 2018
IAT 265

14. Nested if boolean drawRect = true;
boolean drawEllipse = true, drawTriangle = true ;
if (drawRect) {
fill( 0, 200, 0 ); // fill with green
rect( 30, 30, 40, 40 ); }
else if( drawEllipse )
fill( 0, 200, 220 ); // fill with cyan
ellipse( 30, 30, 40, 40);
else if( drawTriangle )
triangle( 30, 30, 30, 80, 80, 30 );
Jan 9, 2018
IAT 265

15. Loops Sometimes you want to execute code multiple times
E.g. draw() is being called in a loop
Java provides a number of looping mechanisms
They all test some boolean expression (just like an if statement does) and continue to execute code while the expression is true
Jan 9, 2018
IAT 265

16. while loops while( <boolean exp.> ) {
<code to execute each time> }
Repeatedly executes the code body while the boolean expression is true
Jan 9, 2018
IAT 265

17. for loops { <code to execute each time in loop> }
for( <init. statement> ; <boolean expression> ; <final statement> ) {
<code to execute each time in loop> }
First executes the initialization statement
Then tests the boolean expression – if true, executes the code once
Then repeats the following:
execute final statement,
test boolean expression  execute code if true
Jan 9, 2018
IAT 265

18. Converting for to while
Seeing how for loops can be converted to while loops helps you understand for
for(<init. stmt> ; <boolean exp> ; <final stmt> ) {
<code>
} // is the same as
<init. stmt> ;
while( <boolean exp> )
<final stmt> ; }
Jan 9, 2018
IAT 265

19. Get out of a loop for good behavior
while( <boolean exp.> ) { <code to execute each time> if( <some other boolean exp.> ) break ; } <more code to execute each time>
Jan 9, 2018
IAT 265

20. Reading time in Processing
int hour() – returns the hour (0 – 23) int minute() – returns the minutes (0 – 59) int second() – returns the seconds (0 – 59) int day() – returns the day of the month (1 -31) int month() – returns the month (1 – 12) int year() – returns the four digit year (e.g. 2004) float milliseconds() – returns number of millis since start of app
Jan 9, 2018
IAT 265

21. draw() has nothing to do with time
The value returned by second() or milliseconds() has nothing to do with how often draw() is called
In draw() you draw frames – you don’t know how often it will be called
Put a println in loop to see how often it gets called
long lastTimeLoopWasCalled = 0;
void draw() {
long milliseconds = millis();
println(milliseconds - lastTimeLoopWasCalled);
lastTimeLoopWasCalled = milliseconds ; }
Jan 9, 2018
IAT 265

22. Arrays An array is a contiguous collection of data items of one type
Allows you to structure data
Accessed by index number
Jan 9, 2018
IAT 265

23. Effect of creating an int variable
Code
Effect
Name: anInt, Type: int
// Single int
int anInt;
// Put a value in the int
anInt = 3;
// Type error!
anInt = “hello”;
Name: anInt, Type: int 3
Name: anInt, Type: int
“hello”
Can’t shove “hello” into an int
Jan 9, 2018
IAT 265

24. Creating an array of ints
Code
Effect
Name: intArray, Type: int[]
// declare int array
int[] intArray;
// initialize int array
intArray = new int[5];
// set first element
intArray[0] = 3;
// set third element
intArray[2] = 5; 1 2 3 4
each element has type int 1 2 3 4 3 1 2 3 4 3 5
Jan 9, 2018
IAT 265

25. Next Arrays Building Complex Shapes Translation and Rotation
Pushing and Popping
Jan 9, 2018
IAT 265

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

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

28. Building Polygons beginShape(); vertex(10, 50);
(starts a new polygon, and
begins at point (10, 50).)
Jan 9, 2018
IAT 265

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

30. Building Polygons endShape(CLOSE); (connects the last point to
the first point, and fills the
polygon.)
Jan 9, 2018
IAT 265

31. Let’s Use Arrays Let’s store the points that we’re drawing.
int[] xvals = {10, 20, 30, 80, 40};
int[] yvals = {50, 10, 40, 60, 80};
beginShape();
for(int i = 0; i < xvals.length; i++) {
vertex( xvals[i], yvals[i] ); }
endShape(CLOSE);
Jan 9, 2018
IAT 265

32. Arrays Use xvals and yvals arrays to draw the shape elsewhere
beginShape();
for(int i = 0; i < xvals.length; i++) {
vertex( xvals[i] +10, yvals[i] +10 ); }
endShape(CLOSE);
Jan 9, 2018
IAT 265

33. Not very general What if you wanted to move by some other value?
What if you wanted multiple copies of the same shape?
Need a general method of moving polygons of some given shape
Jan 9, 2018
IAT 265

34. Translation
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();
for(int i = 0; i < xvals.length; i++) {
vertex(xvals[i], yvals[i]); }
endShape(CLOSE);
Jan 9, 2018
IAT 265

35. Translation
After the call to translate(), any drawing functions called will treat our new orange point as if it were (0, 0).
(0, 0)
translate( 10, 10 );
(10, 10)
Jan 9, 2018
IAT 265

36. Translation Draw same polygon again Now located x+10, y+10 (0, 0)
(10, 10)
beginShape();
for(int i = 0; i < xvals.length; i++) {
vertex(xvals[i], yvals[i]); }
endShape(CLOSE);
Jan 9, 2018
IAT 265

37. Rotation
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).
Jan 9, 2018
IAT 265

38. Rotation Let’s look at an example without translation: (0, 0)
rect(10, 10, 50, 50);
Jan 9, 2018
IAT 265

39. Rotation 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.
Jan 9, 2018
IAT 265

40. Rotation Rotate our drawing canvas 45 degrees around the origin.
(0, 0)
rotate(angle);
Jan 9, 2018
IAT 265

41. Rotation Draw the same square, now on our rotated coordinate system
(0, 0)
rect(10, 10, 50, 50);
(We only get to see about half of our
square, and it isn’t really rotated in
any satisfactory way.)
Jan 9, 2018
IAT 265

42. Rotation Let’s try this from the start, using translation.
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.
Jan 9, 2018
IAT 265

43. Rotation Let’s start with setting our rotation point: (0, 0)
translate(35, 35);
(35, 35)
Jan 9, 2018
IAT 265

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

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

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

47. Rotation
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.
Jan 9, 2018
IAT 265

48. 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…
(0, 0)
(35, 35)
(60, 15)
I just want to go back to where I started before this!
Jan 9, 2018
IAT 265

49. Pushing and Popping Pushing is a way to say: Popping is a way to say:
“Remember this orientation!”
pushMatrix();
Popping is a way to say:
“Take me back to the way things once were!”
popMatrix();
Jan 9, 2018
IAT 265

50. Push & Pop 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)
(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 stack.
IAT 265

51. Stack
pushMatrix() and popMatrix() control a stack A stack stores chunks of data like a stack of plates in a cafeteria Last-In, First-out (LIFO) The graphics matrix stack lets you pushMatrix(), draw stuff, popMatrix() Returns drawing to state before pushMatrix
Jan 9, 2018
IAT 265

52. Stack
Push A Push B Push C Pop -> yields C Pop -> yields B Pop -> yields A C B A
Stack Base
Jan 9, 2018
IAT 265

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

54. Review setup() draw() Conditionals Loops Arrays Drawing Polygons
Translation and Rotation
pushMatrix and popMatrix
Stacks
Jan 9, 2018
IAT 265

55. Practice reading code
If code is a medium, then it can be both written and read
Reading code reveals
New programming constructs
Strategies and techniques (design patterns)
Style
Jan 9, 2018
IAT 265