Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2 ), the Processing Language and IDE, and Saving and Submitting.

Transcription

1 Lab 4 Due: Fri, Oct 7, 9 AM Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2 ), the Processing Language and IDE, and Saving and Submitting. Rules: Do not use the translate(), scale(), or rotate() functions. 1. Exercises using conditionals in simple sketches. All use the default 100 x 100 canvas. a. D1 Draw a horizontal line 25 pixels from the top of the canvas. When the mouse is above that line, make the area above the line white. SAVE this sketch as L4_1a b. D1 Draw a horizontal line 33 pixels from the top of the canvas. When the mouse is above that line, make the area above the line white. Otherwise, make the area below the line white. SAVE this sketch as L4_1b CS 105 Lab 4 Page 1 of 7

2 c. D1 Draw an 8 pixel thick horizontal line 65 pixels from the top of the canvas. When the mouse is above that line, make the area above the line white. When the mouse is below the line, make the area below the line white. If the mouse is on the line, make the background red. SAVE this sketch as L4_1c d. D2 Draw a 33 pixel square in the bottom left corner of the canvas. When the mouse is inside that square, make it white. SAVE this sketch as L4_1d e. D2 Draw a horizontal line 22 pixels from the top of the canvas and a vertical line 22 pixels from the right of the canvas. The ends of the two lines meet and do no cross. When the mouse is in the top 22 pixels of the canvas or the right 22 pixels of the canvas, make the area white above to the right of the lines white. CS 105 Lab 4 Page 2 of 7

3 SAVE this sketch as L4_1e f. D2 Draw a 33 pixel square 27 pixels from the left side and 46 pixels from the top. When the mouse is inside that square, make it white. HINT: look at the rect_hittest demo from lecture. SAVE this sketch as L4_1f 2. Create an interactive smiley face using variables and conditionals. a. D1 In a 150 x 150 canvas, draw a simple smiley face with a head, two eyes, and a smiling mouth. The diameter of the face is always 75 pixels, but the centre of the smiley face follows the mouse position. Read about the arc drawing function on the official Processing reference page: The appendix for this lab has a radian and degree circle that is helpful for drawing arcs. You are free to use PI, HALF_PI, QUARTER_PI built-in constants, radians, or degrees. HINT: You will have to draw the ellipse eyes and the arc mouth relative to the mouse position. For example, I drew a small ellipse for my left eye at (x - 15, y - 15). You can assume the smiley face size doesn t change. SAVE this sketch as L4_smiley CS 105 Lab 4 Page 3 of 7

4 b. D1 Edit your code from part a to make the left eye wink when the mouse is in the left 25% of the canvas and the right eye wink when in the right 25% of the canvas. Draw two lines to show where these areas are. SAVE this sketch as L4_smiley c. D1 Increase the canvas size to 150 x 300. Draw a semi transparent rect in the bottom half of the canvas. Pretend the blue rect is water. When the center of smiley goes below the waterline, make the smiley shiver by adding random(-2, 2) to the x position and make their mouth turn into a line (like they re holding their breath). HINT: You can hide the mouse pointer so it doesn t block the face by adding nocursor() to your setup() function. SAVE this sketch as L4_smiley_water CS 105 Lab 4 Page 4 of 7

5 d. D1 Edit your code from part c to also make the smiley turn blue if their head goes completely under water. SAVE this sketch as L4_smiley_water e. D2 In part d, the smiley stops shivering, starts smiling, and turns yellow as soon as they re lifted out of the water. Add a boolean variable to your code in part d to track whether the smiley was dunked all the way in the water. Call your boolean variable dunked and initialize it to false. As soon as the smiley goes completely below the water and turns blue, set dunked to true. Add logical OR conditions to keep the smiley blue, shivering, and not smiling as long as dunked is true. Set dunked to false by pressing the b key. This will stop the smiley from shivering, and turn them yellow and smiling again. CS 105 Lab 4 Page 5 of 7

6 HINT: Look at the toggle demo for tracking state with a boolean variable and the shaper demo for detecting key presses. SAVE this sketch as L5_smiley_dunk Submitting Submit all sketch directories from this lab as one ZIP file called L4.zip to the lab dropbox (under Assessments on Learn). Consult How to Submit: Handing in Code for Labs and Assignments on Learn for more information how to create a ZIP. It is your responsibility to submit to the correct dropbox with the correct files before the deadline. Otherwise you will receive a mark of 0. CS 105 Lab 4 Page 6 of 7

7 Appendix: Arc and Radians Radian and Degree Circle CS 105 Lab 4 Page 7 of 7