Computation as an Expressive Medium Lab 1: Loops, Animation, and Simple User Interaction Jason Alderman *Slides blatantly stolen from Mayhew Seavey. Yoinks!

http://www.lcc.gatech.edu/~mateas/courses/LCC6310-Fall2005/Syllabus2005.html Lab Hours Thanks for your responses! I’ll send out an e-mail by the end of the day with with lab hours. And always feel free to e-mail me if you have questions. I’m at gtg362v@mail.gatech.edu . (If you forget, it’ll be on the whiteboard in here.)

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

What will we go over? Courseware! Variables: A Recap Drawing primitives (more info) Java Control Flow: Looping The Processing “draw()” looping function for animation Simple mouse interaction

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.

Variables Two main types: Primitives and Objects Primitives: Objects: 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.

More info on drawing primitives Zooooom on over to the reference pages…

Java Control Flow If-Then-Else: Conditional Logic int i = 5; if(i > 10) { save_the_kitten(); } else if(i > 3) { throw_the_kitten(); else { paint_the_kitten();

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.

Java Control Flow: Looping Want to draw ten lines, evenly-spaced apart? What if we could run this same line of code multiple times, only changing these two numbers? 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.

Java Control Flow: While Loops Holy Toledo! We can! Let’s use a while loop! int i = 10; while(i <= 100) { line(i, 10, i, 200); i = i + 10; } line(10, 10, 10, 200); line(20, 10, 20, 200); line(30, 10, 30, 200); ... A while loop will run the code inside the brackets repeatedly until the condition in the parentheses is false.

Java Control Flow: While Loops Be careful with 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.

Java Control Flow: For Loops For Loops are just like While loops, but a bit more compact for simple incrementing, like in our last example. 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)

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); } What does this mean? It means that the inside loop will run all the way through, then i will increment, and the inside loop will run again.

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

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

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } j i’s 10, j’s 10. Draws a point at (10, 10). Simple enough.

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } 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.

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

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } j Aha. So we keep looping in this j loop until it passes 100. Then what?

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } j Well, 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.

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } 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.

Java Control Flow: Nested Loops Still confused? Let’s look at this thing closer. i for(int i = 10; i <= 100; i += 10) { for(int j = 10; j <= 100; j += 10) { point(i, j); } 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 brackets.

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.

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. For any graphics that you want to change over time, or have the user interact with, you’ll need to use the draw() function.

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);

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)

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.

The draw() function Simple example: This is the meat of what makes the 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.

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); }

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.

Reacting to Mouse Clicks Use the variable mousePressed. 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? void draw() { if(mousePressed) { point(mouseX, mouseY); } There are similar variables for mouseReleased, mouseMoved, and mouseDragged.

That’s It For Today! For and While Loops Processing draw() function Mouse Position and Clicking Fig. 1: Ninja. http://www.lcc.gatech.edu/~mateas/courses/LCC6310-Fall2005/Syllabus2005.html