if / if else statements December 1 2 3 4 5 Go over if notes and samples 8 9 10 11 12 Conditionals Quiz Conditionals TEST 15 16 17 18 19 1 7:30 8:21 2 8:27 9:18 3 9:24 10:14 1 CLASS 7:30 8:18 1 FINAL 8:24 10:14 2 CLASS 7:30 8:18 2 FINAL 8:24 10:14 4 CLASS 7:30 7:37 4 FINAL 7:37 9:27 4 10:20 11:01 5 11:37 12:18 7 CLASS 12:24 12:45 4 10:20 11:01 5 11:37 12:18 6 CLASS 12:24 12:45 4 10:20 11:01 5 11:37 12:18 3 CLASS 12:24 12:45 5 CLASS 9:37 9:45 5 FINAL 9:45-11:35 7 EXAM 12:45 2:35 6 FINAL 12:45-2:35 3 FINAL 12:45-2:35 EOS: ED 1
if / if else statements Sometimes your code is to be executed based on a certain condition, not for every situation. For example, you want a red background IF r is pressed. A circle changes direction IF it hits the edge. Thus, we introduce a need for conditional statements. There are six relational operators in Processing. These are a lot like operators used in your math classes. greater than > greater than or equal to >= less than < less than or equal to <= equal to (IS IT equal to?) == not equal to (IS IT not equal to?)!= There are also three logical operators: and && or not! Note: There is no semicolon after an if statement. Placing a semicolon there, means if true do nothing. It basically negates the if statement. The else is optional. VERY IMPORTANT: The compiler will execute just ONE STATEMENT following the if statement if the condition is true. Sometimes, you want to do more than one thing for a true or false statement. To execute more than one statement for a condition, you simply put the statements you would like executed inside curly brackets {}. This forces the compiler to treat the block of statements as if it were one statement. Examples: if (key == 'r') fill(255,0,0); else if (key == 'g') fill(0,255,0); else if (key == 'b') fill(0,0,255); else fill(255,255,0); if (key == 'r') { stroke(255,0,0); fill(255,0,0); } else if (key == 'g') { stroke(0,255,0); fill(0,255,0); } else if (key == 'b') { stroke(0,0,255); fill(0,0,255); } else { fill(255,255,0); stroke(255,255,0); } 2
Compound if statements: Compound conditions are used when 2 or more conditions are checked. Now open logicaloperators. In this program a rectangle is drawn based on the quadrant of the mouse location. To verify the quadrant, you must compare mousex to the width and mousey to the height. Open the following program samples: 1. ifkey: If a key is pressed, the fill command is executed. 2. ifkeymultiplelines: If a key is pressed, the stroke and fill commands are executed. 3. growshrinkcircle The diameter increases until it hits 400, then it decreases. 4. ifmouselocation A rectangle is drawn based on mouse location. 5. logicaloperators A rectangle is drawn in the quadrant of the mouse location 6. constrainrgb The color changes based on mouse location. The constrain command puts limits on RGB. PRACTICE: boolean right = false; boolean fast = false; int x = width / 2; int y = height / 2; //Write an if statement to move increment x by 2 if right is true, otherwise decrement x by 2. //Write an if statement to change right to false if x is within 50 of the width of the screen. //Write an if statement to change right to true if x is zero or less. //Write an if statement to change the fill color to yellow and the stroke to red if the key r is pressed. //Write an if statement for the following: If right is true and fast is true increment x by 5. If right is true and fast is false, //increment by 2. Do the same for if right is false, except decrement the x values. 3
Using keypressed Think about setup(). It runs only one time at the beginning of program execution. On the other hand, draw() runs continuously during execution. The keypressed method only runs when a key is pressed. You need to set a mode in keypressed and access it in draw. See the student sample for creating a boolean variable (true or false) that is set based on a key stroke and accessed in draw. Note, the draw method is necessary when using keypressed. Since setup() is only run at the moment you click run and never again, keypressed will not be detected without the draw() method; draw() forces your program to continuously run. Using Key Strokes and boolean variables: Daily Grade Edit mountainman to draw based on a key stroke. You should use the following key commands and draw accordingly. 1. g ground with road 2. c clouds (at least 3) 3. m 2 mountains 1 green-tone and 1 brown-tone that is snow capped 4. t tree use multiple ellipses to create full foliage 5. s stickman g was pressed to produce the image on the left. Now, c was pressed to add clouds. 4
m was pressed to add the mountains. t was pressed to add the tree. s was pressed to add the stickman. Coding your Program: READ THIS! You will need boolean variables for tree, mountain, clouds, stickman and ground In keypressed(): if (key == m ) mountain = true; if (key == s ) stickman == true; // and so on In draw(): if (mountain == true) mountains(); if (stickman == true) man(); so on. 5
Using Key Strokes and boolean variables continued You need to make your stickman move back and forth across your screen except he never goes off the screen. Make him move to and from 100 pixels from each side of your screen. You will need to add another boolean variable, movingleft, that is set to false in setup. You will also need to check the following in your code: Coding your Program: 1. Initialize his x location and movingleft in setup. 2. If movingleft is true, you will decrement your man s x value in man(). (He is moving left.) If movingleft is false, you will increment your man s value in man(). (He is moving right.) 3. If your stickman has an x value of 100 or less, you will change movingleft to false in man(). You want him to move right. 4. If your stickman has an x value within 100 of the width, you will change movingleft to true in man(). You want him to move left. Rubric: Keystrokes draw images: 50 Man stays on screen and changes directions: 50 6
Conditionals: Major Grade Coding your Program: 1. Open your movingcar from the previous unit. 2. You will need to add a boolean variable called day. You will also need to add 3 float variables, red, green and blue. Create an int value called speed. In setup(): 3. Set each of the colors to a random number up to 255 in setup. 4. Set day to true; 5. Set speed to 3. In car(): 6. Before you draw the car, change fill to draw in red, green blue. 7. Every time the car is off the screen (car s X value is greater than width plus length of car, plus more if you like), change the car s X value to a negative (so it is off the left side) and you need to generate new random values for red, green and blue, so it looks like a different car coming into view. 8. Increment the car s X value by speed, so it can fluctuate. In sky(): 9. If day is true, you do a light blue background and fill in yellow for the sun, else do a dark background and fill in white for the moon. 10. Every time the sun s X value is greater than the width, you will change the sun s X value to a negative, (so it off off the left side) and you need to change from day to night or night to day. To do this, use the following statement: day =!day; //Opposite of what it was In keypressed(): 11. Add code for the following: If f is pressed, set speed to 10. If s is pressed set speed to 3. If m is pressed, set speed to 5. 7
Adding a police car: The police car is in the other lane, going the opposite direction. 12. Add 3 int variables: px, py (the police car s x and y location), and policelightduration (the amount of time each of the red and blue lights is on). Add a boolean variable, redlight which is used to determine whether you are drawing the light in red (true) or blue (false). Lastly, add a PFont variable that is used for the font for the text on the police car. In setup(): 13. Initialize redlight to true. 14. Initialize the values for px and py. Be sure the police car is driving in one lane and your car in the other. 15. Initialize policelightduration to zero. 16. Create and set your font. Write policecar(): 17. Copy the code from car to policecar(); 18. The police car always goes fast. Speed is 10. Increment px by 10. 19. The light should be drawn before the body of the car. If redlight is true, fill with red, otherwise fill with blue. 20. If policelightduration is 20, set it back to zero and change redlight to opposite of its current state. (like #10) 21. Write POLICE on the side of the police car. 22. When the police car is off the screen on the left, change the police car s X value to a positive off the screen on the right. You may want the car to be ways off the screen so it is not constantly speeding down the road. 23. Increment policelightduration by 1. In draw(): 24. Call your policecar(). Set the color to white instead of a random color. RUBRIC: POINTS Cars continue to drive across screen with random colors: 25 Night changes to day and back again: 25 Car can go slow, medium or fast based on key stroke: 10 Police car s light changes from red to blue and back again: 20 Both cars drive in their own lane, but in opposite directions. 10 Police car drawn appropriately with POLICE on side: 10 8
Throwing Dice: Quiz Grade Directions: Write a program that will throw dice every time you click your mouse. In this program you must have a setup method, mousepressed method, and drawdice method. You need 5 global variables, one for each dice value. setup: Sets the screen size, set the rectmode and draws the background. mousepressed: Gets a new random value for each dice and calls drawdice for each one. Example: drawdice (d4, 500); //d4 is number of dots on dice and 500 is x location Since you know the x location of each dice, you can pass the exact location to drawdice. Add println so you can see the dice throws: println(d1 + " " + d2 + " " + d3 + " " + d4 + " " + d5); drawdice: Receives two parameters, dots and x draw: Does nothing, but keeps the program running. All dice will be drawn at the same y value. Your screen should be long and narrow with each dice equal-distant apart. drawdice will draw a dice based on the dots received. The location of the dice is based on the x received. Rubric Points Task trivial Setup Method 30 mousepressed Method 70 drawdice Method trivial draw 9