1 / 33

IAT 800

IAT 800. Lab 1: Loops, Animation, and Simple User Interaction. http://biov.iat.sfu.ca/~shaw/iat800. Lab Hours. e-mail me if you have questions. What have you gone over?. (0,0). x. Window size and coordinate system Commenting code Variables Drawing primitives point line rect ellipse

merlin
Download Presentation

IAT 800

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. http://biov.iat.sfu.ca/~shaw/iat800 Lab Hours • e-mail me if you have questions. IAT 800

  3. What have you gone over? (0,0) x • 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 y IAT 800

  4. Today’s lab • Variables: A Recap • Drawing primitives (more info) • Java Control Flow: Looping • The Processing “draw()” looping function for animation • Simple mouse interaction IAT 800

  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. IAT 800

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

  7. More info on drawing primitives • Reference pages… • http://processing.org/reference/ IAT 800

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

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

  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. IAT 800

  11. Java Control Flow: While Loops • 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. IAT 800

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

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

  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); } } • The inside loop will run through, • then i will increment, • then the inside loop will run again. IAT 800

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

  16. Java Control Flow: Nested Loops • 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 IAT 800

  17. Java Control Flow: Nested Loops • 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 = 10, j = 10. Draws a point at (10, 10). IAT 800

  18. Java Control Flow: Nested Loops • 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. IAT 800

  19. Java Control Flow: Nested Loops • 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. IAT 800

  20. Java Control Flow: Nested Loops • 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 We keep looping in this j loop until it passes 100. Then what? IAT 800

  21. Java Control Flow: Nested Loops • 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 that the program has exited from our j loop, It sees that it’s still inside our i loop, and increments i By 10. IAT 800

  22. Java Control Flow: Nested Loops • 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. IAT 800

  23. Java Control Flow: Nested Loops • 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 braces. IAT 800

  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. IAT 800

  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. • You need the draw() function: • to change graphics over time, • have the user interact with graphics IAT 800

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

  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) IAT 800

  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. IAT 800

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

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

  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. 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. void draw() { background(204); line(mouseX, 20, mouseX, 80); } IAT 800

  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. IAT 800

  33. That’s It For Today! • For and While Loops • Processing draw() function • Mouse Position and Clicking IAT 800

More Related