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

IAT 800

IAT 800

Lab 1: Loops, Animation, and Simple User Interaction

Sep 10, Fall 2009 IAT 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


Today’s lab

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 ii = 1; // assigns the value of 1 to the new variableint 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:– 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

Reference pages…– http://processing.org/reference/


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


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


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?


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.


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.


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)


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.



Let’s look at this thing closer.


i

j

Sets i to 10. First step.





i

j

Sets j to 10. That’s all for now.





i

j

i = 10, j = 10. Draws a point at (10, 10).





i

j

Now we jump to the top of the innermost loop, and increment j by 10, and then check if it’s greateror equal to 100, which it’s not, so we continue.





i

j

i is still 10, but j is now 20. We draw the new point,Then go to loop again.





i

j

We keep looping in this j loop until itpasses 100. Then what?





i

j

Now that the program has exited from our j loop,It sees that it’s still inside our i loop, and increments iBy 10.





i

j

The program reaches the j loop again, so it loopsAll the way through drawing dots. Only this time, iis 20, so the dots are further to the right.





i

j

The i loop keeps incrementing in this way, drawingcolumns of dots, until i exceeds 100. The programthen exits the code inside the i loop’s braces.



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.

You need the draw() function:– to change graphics over time, – have the user interact with graphics


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;


Important! The variable declarationmust be outside the loop function, orelse it will be reset every time draw() iscalled.

(Try putting it inside draw() to see what happens)


The draw() function

Simple example:

float a = 200;


For animation, this line is necessaryTo clear the last frame that was drawn.


The draw() function

Simple example:

float a = 200;


This is the meat of what makes theline move. Each loop, we subtract 1from the variable a, which we lateruse when drawing the line, so it willappear to move.

When a is 0, we’ve hit the top of thewindow, and reset a to the highestvalue.


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 aline left or right to follow yourcursor. Note that it stops trackingyour mouse when it’s not in thedrawing window.


Reacting to Mouse Clicks

Use the variable mousePressed.

void draw() { if(mousePressed) { point(mouseX, mouseY); }}

This simple function will draw a pointin the window whenever the mouse isin the clicked position. Try clicking anddragging around the window and seewhat happens.

Can you think of a way to make the drawing smoother?

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

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

Documents

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