IAT 800 Lab 1: Loops, Animation, and Simple User Interaction

Sep 10, Fall 2009IAT 800 What have you gone over?  Window size and coordinate system  Commenting code  Variables  Drawing primitives –point –line –rect –ellipse –triangle  print() and println()  if(boolean){ do something }else{ do something} logic (0,0)x y

Sep 10, Fall 2009IAT 800 Today’s lab  Variables: A Recap  Drawing primitives (more info)  Java Control Flow: Looping  The Processing “draw()” looping function for animation  Simple mouse interaction

Sep 10, Fall 2009IAT 800 Variables  Variables are placeholders for your data. int i; // declares a new variable i i = 1; // assigns the value of 1 to the new variable int j = i + 1; // declares a new variable j, and assigns it to i + 1, which is 2.

Sep 10, Fall 2009IAT 800 Variables  Two main types: Primitives and Objects  Primitives: –Boolean, Char, Byte, Short, Int, Long, Float, Double  Objects: –Everything else. –Constructed with primitives as a base. –For example, a “String” object is a series of Char variables.

Sep 10, Fall 2009IAT 800 More info on drawing primitives  Reference pages… –

Sep 10, Fall 2009IAT 800 Java Control Flow  If-Then-Else: Conditional Logic int i = 5; if(i > 10) { draw_the_kitten(); } else if(i > 3) { erase_the_kitten(); } else { paint_the_kitten(); }

Sep 10, Fall 2009IAT 800 Java Control Flow: Looping  Draw ten lines, evenly-spaced apart line(10, 10, 10, 200); line(20, 10, 20, 200); line(30, 10, 30, 200);...  Tedious

Sep 10, Fall 2009IAT 800 Java Control Flow: Looping  Want to draw ten lines, evenly-spaced apart? line(10, 10, 10, 200); line(20, 10, 20, 200); line(30, 10, 30, 200);...  This can get old, fast. Also would be tedious if you wanted to change all of the lines to start 5 pixels higher, instead. What if we could run this same line of code multiple times, only changing these two numbers?

Sep 10, Fall 2009IAT 800 Java Control Flow: While Loops  Use a while loop line(10, 10, 10, 200); line(20, 10, 20, 200); line(30, 10, 30, 200);... int i = 10; while(i <= 100) { line(i, 10, i, 200); i = i + 10; }  A while loop will run the code inside the brackets repeatedly until the condition in the parentheses is false.

Sep 10, Fall 2009IAT 800 Java Control Flow: While Loops  Make sure the condition will eventually return false, or else it will go forever. while(true) {... } int i = 10; while(i > 0) { line(i, 10, i, 200); i = i + 10; }  Both of these loops are valid, will compile, and run infinitely.

Sep 10, Fall 2009IAT 800 Java Control Flow: For Loops  For Loops are just like While loops, but a bit more compact for simple incrementing  These two loops are functionally the same: int i = 10; while(i <= 100) { line(i, 10, i, 200); i += 10; } for(int i = 10; i <= 100; i += 10) { line(i, 10, i, 200); } ( i += 10 is equivalent to i = i + 10 )

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Nesting of loops refers to putting one loop inside the brackets of another. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); }  The inside loop will run through,  then i will increment,  then the inside loop will run again.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j Sets i to 10. First step.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j Sets j to 10. That’s all for now.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j i = 10, j = 10. Draws a point at (10, 10).

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j Now we jump to the top of the innermost loop, and increment j by 10, and then check if it’s greater or equal to 100, which it’s not, so we continue.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j i is still 10, but j is now 20. We draw the new point, Then go to loop again.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j We keep looping in this j loop until it passes 100. Then what?

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j Now that the program has exited from our j loop, It sees that it’s still inside our i loop, and increments i By 10.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j The program reaches the j loop again, so it loops All the way through drawing dots. Only this time, i is 20, so the dots are further to the right.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Let’s look at this thing closer. for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } i j The i loop keeps incrementing in this way, drawing columns of dots, until i exceeds 100. The program then exits the code inside the i loop’s braces.

Sep 10, Fall 2009IAT 800 Java Control Flow: Nested Loops  Nested Loops are especially useful for drawing in grid formations in a 2-D space.  Think about how you could nest another loop inside to make a grid in a 3-D space.

Sep 10, Fall 2009IAT 800 The draw() function  What is the draw() function? –Processing allows you to put code in a special function called draw, which will run a number of times per second.  You need the draw() function: –to change graphics over time, –have the user interact with graphics

Sep 10, Fall 2009IAT 800 The draw() function  Simple example: float a = 200; void draw() { background(255); a = a - 1; if (a < 0) { a = height; } line(0, a, width, a); }

Sep 10, Fall 2009IAT 800 The draw() function  Simple example: float a = 200; void draw() { background(255); a = a - 1; if (a < 0) { a = height; } line(0, a, width, a); } Important! The variable declaration must be outside the loop function, or else it will be reset every time draw() is called. (Try putting it inside draw() to see what happens)

Sep 10, Fall 2009IAT 800 The draw() function  Simple example: float a = 200; void draw() { background(255); a = a - 1; if (a < 0) { a = height; } line(0, a, width, a); } For animation, this line is necessary To clear the last frame that was drawn.

Sep 10, Fall 2009IAT 800 The draw() function  Simple example: float a = 200; void draw() { background(255); a = a - 1; if (a < 0) { a = height; } line(0, a, width, a); } This is the meat of what makes the line move. Each loop, we subtract 1 from the variable a, which we later use when drawing the line, so it will appear to move. When a is 0, we’ve hit the top of the window, and reset a to the highest value.

Sep 10, Fall 2009IAT 800 The setup() function  You can use the setup() function to define some properties of your window once when your program first starts: –size(width, height): size of drawing window (in pixels) –framerate(fps): number of times per second that the draw() function is called. void setup() { size(640, 480); framerate(30); }

Sep 10, Fall 2009IAT 800 Tracking Mouse Position  Processing uses two global variables which have the current mouse position at all times: –mouseX, mouseY: current X and Y of cursor, relative to the top-left of drawing window. void draw() { background(204); line(mouseX, 20, mouseX, 80); } A simple program that moves a line left or right to follow your cursor. Note that it stops tracking your mouse when it’s not in the drawing window.

Sep 10, Fall 2009IAT 800 Reacting to Mouse Clicks  Use the variable mousePressed. void draw() { if(mousePressed) { point(mouseX, mouseY); } This simple function will draw a point in the window whenever the mouse is in the clicked position. Try clicking and dragging around the window and see what happens. Can you think of a way to make the drawing smoother?  There are similar variables for mouseReleased, mouseMoved, and mouseDragged.

Sep 10, Fall 2009IAT 800 That’s It For Today!  For and While Loops  Processing draw() function  Mouse Position and Clicking