LCC 6310 The Computer as an Expressive Medium Lecture 3Suggestions on learning to program Spend a lot of time fiddling around with code Programming is something you have to learn by trying it Get help from other people I expect those who already know some programming to help others Figure things out in groups Ask me questions in class Ask Josh questions in tutorialOverview Programming concepts Built-in Processing methods you fill in Loops Reading the time Arrays Questions about assignment 1So far… We've seen how to write commands in Processing We've learned that commands need to end with a ; We've learned how to call methods with specific arguments We've learned how to declare variables and assign values to them We've learned how to print values to the text output area We've learned about the primitive variable types We've learned how to control flow with conditional if-then statements By default, the sequence of commands we write in Processing will execute once and then the program will terminate This is Processing's "Basic" modeBasic mode example size(200, 200); background(255); color yellowish = color(255, 204, 0); int x = 30; int y = 20; int squareSide = 50; noStroke(); fill(yellowish); rect(x, y, squareSide, squareSide); Let's try it out in Processing…Continuous mode Processing's continuous mode provides: A setup() structure that is run once when the program begins, and A draw() structure that continually loops through the code inside This enables writing custom methods and classes and using keyboard and mouse events… more on this later! First, some more about setup() and draw()…setup() setup() is called once when a sketch first starts executing Place any startup code in setup(), e.g. Setting the size Setting the background color Initializing variables …draw() draw() is called continuously by the program Put code in draw() when you need to constantly update the display (for example, animating an object)Example of setup() and draw() int x, y; // declare integer variables x and y void setup() { // QUESTION: why do we need the void? size(400, 400); // set the window size to 400x400 pixels background(0); // set background to black x = 0; y = height/2; // height is a system variable, see reference } void draw() { background(0); ellipse(x, y, 20, 20); x = x + 1; if (x > width) { // width is a system variable, see reference x = 0; } } QUIZ: What does this program do? Let's try it out in Processing!Controlling draw() frameRate() can be used to set the number of times per second that draw() is called frameRate(30) says to call draw() 30 times a second (if the computer is capable of it) delay() delays execution for a certain number of milliseconds delay(250) delays for 250 milliseconds (1/4 of a sec.) You can use delay() or frameRate() to determine how fast you want draw() to be called – frameRate() is probably easier noLoop() tells the system to stop calling draw() If you want to, for example, turn off animation loop() tells the system to start calling draw() again Use noLoop() and loop() together to turn drawing on and offframerate() void setup() { frameRate(15); // try out different fps values! } int pos = 0; // QUICK QUIZ: // what happens if you declare pos inside setup()? void draw() { background(255); pos = pos + 1; line(pos, 0, pos, 100); if (pos > width) { pos = 0; } }delay() int pos = 0; void draw() { background(255); pos = pos + 1; line(pos, 0, pos, 100); if (pos > width) { pos = 0; } delay(250); // stops the program for 250 milliseconds // try out different delay values }noLoop() boolean looping = true; // try changing this to false! int i = 0; void setup() { if (!looping) { noLoop(); } } void draw() { println("count "+i); i = i + 1; }Getting info from the mouse mouseX and mouseY – variables that automagically contain the current mouse location pmouseX and pmouseY hold the previous location mousePressed – boolean variable that is true if the mouse button is down mouseButton – value is LEFT, RIGHT or CENTER depending on which button is held down Let's look at some examples…mouseX and pmouseX Horizontal motion void draw() { background(204); line(mouseX, 20, mouseX, 80); } What happens if you make this change? void draw() { background(204); line(mouseX, 20, pmouseX, 80); }mousePressed and mouseButton void draw() { if (mousePressed && (mouseButton == LEFT)) { fill(0); } else if (mousePressed && (mouseButton == RIGHT)) { fill(255); } else { fill(126); } rect(25, 25, 50, 50); }Mouse methods There are several built-in methods you can fill in to process mouse events mousePressed(), mouseReleased(), mouseMoved(), mouseDragged() Let's look at an example…mouseMoved() int value = 0; boolean goingUp = true; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseMoved() { if (goingUp){ value += 5; if (value >= 255) goingUp = false; } else{ value -= 5; if (value <= 0) goingUp = true; } }Or…….. int value = 0; boolean goingUp = true; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseMoved() { value = (goingUp) ? (value + 5) : (value - 5); // what the !??!! if (value > 255) { goingUp = false; } else if (value <= 0) { goingUp = true; } }Loops Sometimes you want to execute code multiple times E.g. draw() is being called in a loop Java provides a number of looping mechanisms They all test some boolean expression (just like an if statement does) and continue to execute code while the expression is truewhile loops while(<boolean exp>) { <code to execute multiple times> } Executes the code within the curly brackets while the boolean expression is truefor loops for(<init statement>; <boolean exp>; <final statement>) { <code to execute in loop> } First executes the initialization statement Then tests the boolean expression – if it's true, executes the code inside the curly brackets once Then repeats the following: execute final statement, test boolean expression, execute code if true This structure is often used to execute a block of code a specific number of times as follows: Init statement -> start counter, e.g. int counter = 0; Boolean exp -> looping condition, e.g. counter < 10; Final statement -> increment counter, e.g. counter++; (same as counter=counter+1;)Converting for to while Seeing how for loops can be converted to while loops
View Full Document
Unlocking...