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

2.
Lab Hours
Thanks for your responses! I’ll send out an by the end of the day with with lab hours.
And always feel free to me if you have questions. I’m at .
(If you forget, it’ll be on the whiteboard in here.)

3. 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

4. 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

5. 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.

6. 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.

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

8. 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();

9. 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.

10. 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.

11. 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.

12. 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.

13. 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)

14. 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.

15. 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

16. 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

17. 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.

18. 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.

19. 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.

20. 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?

21. 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.

22. 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.

23. 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.

24. 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.

25. 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.

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

27. 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)

28. 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.

29. 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.

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

31. 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.

32. 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.

33. That’s It For Today! For and While Loops Processing draw() function
Mouse Position and Clicking
Fig. 1: Ninja.