1. Exercises in simple sketches. All use the default 100 x 100 canvas.

Transcription

1 Lab 3 Due: Fri, Oct 2, 9 AM Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2, D3 ), the Processing Language and IDE, and Saving and Submitting. Rules: Do not use the translate(), scale(), or rotate() functions. Important! You must use active mode (i.e. setup and draw ) for all your sketches. 1. Exercises in simple sketches. All use the default 100 x 100 canvas. a. D1 Use draw() to draw lines from the bottom centre of the canvas to the mouse position. Let the lines stack up on each other to make a pattern like the screen capture below. SAVE this sketch as L3_1a b. D1 Draw lines from the bottom centre of the canvas to the mouse position and let the lines stack up on each other like part a. Only now add code to draw red lines while the mouse button is pressed and black lines otherwise. The pattern will look something like the screen capture below. HINT: Use the mousepressed() and mousereleased() event functions. SAVE this sketch as L3_1b CS 105 Lab 3 Page 1 of 8

2 c. D1 Draw an ellipse centred in the canvas with its width equal to the mousex position and its height equal to the mousey position. The shape will look something like the screen captures below (note mouse cursor position). SAVE this sketch as L3_1c d. D1 Draw a 50 pixel circle centred in the canvas. When the mouse is pressed and held down, the circle has a 10 pixel thick red stroke with green fill. When the mouse is not pressed, it has the usual 1 pixel thick black stroke with white fill. SAVE this sketch as L3_1d e. D2 Draw a rect that always has its bottom-right corner exactly at the bottom-right corner of the canvas. The top-left corner of the rect is at the mouse position. SAVE this sketch as L3_1e CS 105 Lab 3 Page 2 of 8

3 f. D2 Draw an ellipse centred in the canvas. Use a variable for the ellipse s width and height. Initially the variable is 5, but each time a key or pressed, it increases in by 1, and each time the mouse is pressed, it increased in by 10. SAVE this sketch as L3_1f g. D2 Animate two lines. A horizontal line moves down the canvas 1 pixel per frame. A vertical line moves across the canvas left to right 2 pixels per frame. SAVE this sketch as L3_1g h. D2 Animate random points that fill the canvas. Each frame, pick a random coordinate between 0 and 99 for x and y using two calls to the random function. Use those random coordinate to draw a point. If you wait long enough, the whole canvas will turn black. HINT: Do not call background, let the points accumulate over multiple frames. CS 105 Lab 3 Page 3 of 8

4 SAVE this sketch as L3_1h 2. Make an interactive cat. a. D1 Convert the cat program from lecture 02a Drawing demo code to work in active mode. Set the canvas size to be 200, 200. Change the coordinates of the head and ears (you can delete the whiskers) so they are drawn relative to the mouse position. The cat s head should be centred on the mouse, like the screen captures below. b. D1 Add a blue 100 by 100 square to the centre of the canvas. Make it so the square has a semi-transparent middle and thick opaque stroke. The cat should go behind the square. SAVE this sketch as L3_cat1 CS 105 Lab 3 Page 4 of 8

5 c. D2 Create a variable for the hue of the square and pick a random hue between 0 and 360 each time the key is pressed. You ll set the hue for the square fill and stroke using the HSB colormode. Use colormode to change to HSB colour when drawing the square, then change back to RGB mode like this: // change to HSB colour mode colormode(hsb, 360, 100, 100, 100); fill(hue, 100, 100, 50); // semi transparent stroke(hue, 100, 100); // opaque draw square here... // change back to normal RGB colour mode colormode(rgb, 255, 255, 255, 255); d. D2 Now animate the square size. Do this by creating a variable for the size of the square and animate it up by 1 starting at 0. It continues to increase until the mouse is pressed and then it starts at 0 again. HINT: You want to draw the square centred in the canvas. You could switch the rectmode to draw squares from the centre, but you should practice your math and use the top-left default rectmode. Think about how to calculate the x and y position based on the canvas height and width and current square size. CS 105 Lab 3 Page 5 of 8

6 SAVE this sketch as L3_cat2 3. OPTIONAL Create an animated bar chart. Do this question only if you have time. It will not count towards your lab mark. a. D1 In a 120 pixel tall canvas, use rect to create 4 horizontal bars that fill 75% of the width the canvas. You can use any four colours you like. Your bars should use the built-in width variable so they work with any canvas width. SAVE this sketch as L3_barchart1 400 x 120 canvas 256 x 120 canvas b. D1 Make bars span the height as well. Assume there are always 4 bars. Each bar must all be exactly ¼ (25%) of the canvas height. Use the built-in height variable to calculate the height of each bar s rect and the y position of each bar s rect. SAVE this sketch as L3_barchart1 CS 105 Lab 3 Page 6 of 8

7 150 x 200 canvas c. D2 Instead of drawing all bars 75% of the width across, define the four float variables below and use these variables for the percentage length of the bars in the canvas. HINT: Make your canvas about 300 or 400 pixels wide to test this out. // the values for each bar float a = 75; float b = 55; float c = 45; float d = 25; SAVE this sketch as L3_barchart2 d. D2 Now you ll make your bars animate in a race across the width of your canvas. Do this by first changing your code to initialize all the bar length variables to 0. Then in draw(), increment each variable by a random number between -1 and 3. SAVE this sketch as L3_barchart3 CS 105 Lab 3 Page 7 of 8

8 Submitting Submit your sketch directories as one ZIP file 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 3 Page 8 of 8