Lab 8 › ~dvogel › cs105f16 › materials... · a. D1 Add “cow.jpg” to your sketch. Write code to load it into a PImage object. Then draw it positioned in the top left corner

Lab 8 Due: Fri, Nov 18, 9:00 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.

1. Practice loading and displaying images. Download images.zip from the lab folder on LEARN. SAVE each sketch as “L8_1a”, “L8_1b”, etc.

a. D1 Add “cow.jpg” to your sketch. Write code to load it into a PImage object. Then draw it positioned in the top left corner of a 200 by 200 canvas window.

b. D1 Convert the code from the previous step to scale the image while drawing it, so that it perfectly fits inside the 200 by 200 canvas (without preserving the aspect ratio).

Lab 8: Images and Image Processing | Page 1 of 8

c. D1 Convert the code from the previous step to automatically fit the canvas to the image size. HINT: You need to load the image first, then resize the canvas to the image width and height. Remember, you can’t use variables in size, but the lecture slides provide a method to do it. You should use this automatic resizing code is all remaining parts of this lab.


d. D1 Convert the code from the previous step to draw the image with an equal border all the way around. It’s ok if the aspect ratio of the image is off with thick borders. HINT: Use a variable for the size of the border and test different border thicknesses.

20 pixel border 50 pixel border

e. D1 Convert your code from the previous part to load “glasses.png” into a second PImage object. Display the glasses image centred at the mouse position on top of the cow. HINT: Don’t forget to add the “glasses.png” file to your sketch. HINT: To centre the glasses image around the mouse position, you can offset the image draw position relative to the width and height of the image (using the images fields, not hard coded values).


2. Getting Pixels

a. D1 Create a sketch that loads and displays the image “pheasant.jpg” in a canvas the same size as the image.

b. D1 Convert your code from part a to draw an abstract version of the pheasant using ellipses. In lecture, you learned how to “get” the color of any pixel in an image using “dot get” and the color data type. For example, to get the colour of the pixel at position (100, 100) in the image stored in img, you could do the following: color pixelColour = img.get(100, 100); Once you have the colour in the pixelColour variable, you can use it to set the fill colour like this: fill(pixelColour); You’ll use this basic technique to to make an animated abstract pattern. Comment out the function to draw the image in the canvas (we want the canvas to start out blank). Then in each frame, “get” the pixel colour value at a random x and y position in the image and set the fill to that same colour. Make the fill semi-transparent. Draw an ellipse in the canvas at the same random x and y position. I made my ellipse size 30, but you can experiment with different sizes. HINT: Do not clear the background each time draw is called. When you run the sketch for a while, you’ll see the pheasant slowly appear. SAVE this sketch as “L8_pheasant”


c. D1 The pattern in part b looks great, but it’s very slow to appear and a bit too regular looking. Add a loop to your code to draw multiple ellipses at random positions (each filled with the corresponding image pixel). Make the ellipse size and transparency random as well. I draw 50 ellipses each frame, each filled with random transparency between 10 and 50 and a random size between 5 and 20. You can try these values, but experiment with other ones too. What happens if the ellipse sizes can sometimes be very large? SAVE this sketch as “L8_pheasant”


d. D1 Now, make this abstract drawing interactive. Instead of picking random ellipse positions anywhere in the canvas (anywhere in the image), pick random positions near the mouse position. I reduced my loop iterations to 10 and I pick random positions up to 30 pixels away from the mouse in x and y directions. SAVE this sketch as “L8_pheasant_draw”


3. Image Processing For each part, start from the processcanvaspixels lecture demo code. Change the code to load the image file “mandrill.jpg”.

a. D2 Add code to interactively adjust the image contrast. In the lecture, you saw how to adjust image contrast by a constant value. Use this line of code, but adjust it to work on canvas pixels (not img.pixels) and instead of a constant value to adjust, use map to convert the mouseY position to a contrast adjustment value between 0 and 5. HINT: It’s easier to create a local variable to save the adjust value returned by map, and use this local variable three times in the color function. SAVE this sketch as “L8_contrast”


b. D2 Change your code to interactively threshold the red and blue components. In the lecture, you saw how to interactively threshold and image to be black and white based on the brightness. Here, you want to do something similar, but threshold the red and blue components. Use the mouseY position and map to set a threshold for red and mouseX and map to set a threshold for blue. If the red component of the pixel is above the red threshold, set red to 255. If the blue component of the pixel is above the blue threshold, set blue to 255. Always set green to 0.

Submitting Submit all sketch directories from this lab as one ZIP file called L8.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.


Lab 8 › ~dvogel › cs105f16 › materials... · a. D1 Add “cow.jpg” to your sketch. Write code to load it into a PImage object. Then draw it positioned in the top left corner

Documents