IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.
-
date post
19-Dec-2015 -
Category
Documents
-
view
227 -
download
0
Transcript of IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.
![Page 1: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/1.jpg)
IAT 800
IAT 800
Lab 1: Loops, Animation, and Simple User Interaction
![Page 2: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/2.jpg)
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
![Page 3: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/3.jpg)
Sep 10, Fall 2009 IAT 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
![Page 4: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/4.jpg)
Sep 10, Fall 2009 IAT 800
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.
![Page 5: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/5.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 6: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/6.jpg)
Sep 10, Fall 2009 IAT 800
More info on drawing primitives
Reference pages…– http://processing.org/reference/
![Page 7: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/7.jpg)
Sep 10, Fall 2009 IAT 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();}
![Page 8: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/8.jpg)
Sep 10, Fall 2009 IAT 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
![Page 9: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/9.jpg)
Sep 10, Fall 2009 IAT 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?
![Page 10: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/10.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 11: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/11.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 12: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/12.jpg)
Sep 10, Fall 2009 IAT 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)
![Page 13: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/13.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 14: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/14.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 15: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/15.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 16: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/16.jpg)
Sep 10, Fall 2009 IAT 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).
![Page 17: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/17.jpg)
Sep 10, Fall 2009 IAT 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 greateror equal to 100, which it’s not, so we continue.
![Page 18: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/18.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 19: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/19.jpg)
Sep 10, Fall 2009 IAT 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 itpasses 100. Then what?
![Page 20: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/20.jpg)
Sep 10, Fall 2009 IAT 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 iBy 10.
![Page 21: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/21.jpg)
Sep 10, Fall 2009 IAT 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 loopsAll the way through drawing dots. Only this time, iis 20, so the dots are further to the right.
![Page 22: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/22.jpg)
Sep 10, Fall 2009 IAT 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, drawingcolumns of dots, until i exceeds 100. The programthen exits the code inside the i loop’s braces.
![Page 23: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/23.jpg)
Sep 10, Fall 2009 IAT 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.
![Page 24: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/24.jpg)
Sep 10, Fall 2009 IAT 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
![Page 25: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/25.jpg)
Sep 10, Fall 2009 IAT 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); }
![Page 26: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/26.jpg)
Sep 10, Fall 2009 IAT 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 declarationmust be outside the loop function, orelse it will be reset every time draw() iscalled.
(Try putting it inside draw() to see what happens)
![Page 27: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/27.jpg)
Sep 10, Fall 2009 IAT 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 necessaryTo clear the last frame that was drawn.
![Page 28: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/28.jpg)
Sep 10, Fall 2009 IAT 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 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.
![Page 29: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/29.jpg)
Sep 10, Fall 2009 IAT 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);}
![Page 30: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/30.jpg)
Sep 10, Fall 2009 IAT 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 aline left or right to follow yourcursor. Note that it stops trackingyour mouse when it’s not in thedrawing window.
![Page 31: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/31.jpg)
Sep 10, Fall 2009 IAT 800
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.
![Page 32: IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.](https://reader036.fdocuments.in/reader036/viewer/2022062421/56649d405503460f94a19f31/html5/thumbnails/32.jpg)
Sep 10, Fall 2009 IAT 800
That’s It For Today!
For and While Loops Processing draw() function
Mouse Position and Clicking