Canvas to do a fun little activity. It has become very popular on social media to add edited photos to your “feed”

Learning Goal: I’m working on a computer science multi-part question and need an explanation and answer to help me learn.

INSTRUCTIONS: Use this site to complete assignment

In this lab, we combine our learning of functions and conditional programming with drawing on Processing’s

Canvas to do a fun little activity. It has become very popular on social media to add edited photos to your
“feed”. Think of popular social media apps in which you take a picture, then add some sort of filter or effect
to it. While we won’t be able to write something as complex as a photo filter, we can add very simple effects
to pictures without too much trouble. Review functions and conditional programming before attempting this
lab.
Objective
Create a new program in Processing and save it. In the folder where your .pde file is located, add a photo of
your choosing. Make sure the photo isn’t overly large (something around 500 by 500 pixels is sufficient for
this exercise). You can find pictures online or use your smartphone.
●When the program is opened, display the picture (See code below for an example)
●When the user clicks the left mouse button, add a flower to that spot.
○Your program should create 3 different kinds of flowers. You decide how they’re made.
○Each flower should be randomly colored, too.
○For randomness in Processing, look up the random( ) function
●When the user clicks the right mouse button, the program should save the image with a new file
name
How to Load Images
The loadImage( ) function loads an image into Processing. Note that this only loads the image. It does not
actually display it. You have to do that yourself using the image( ) function, as follows:
PImage backgroundImage;
void setup(){
size( 500, 500 ); // set your canvas size as normal
backgroundImage = loadImage( “name_of_the_file.jpg”);
image( backgroundImage, 0, 0 );
}
void draw(){ } // notice the draw function is left empty for this lab
How to Save Images
Remember, we save the image only when the right mouse button is clicked. Meaning this code goes inside
your mousePressed( ) function!

Follow the instructions for this lab to create a flower adder program, similar to something you might see on social media. A video explaining how to do this lab will be posted in the Modules for week 11.

You can follow along in the video for the instructions, or you can download the starter file (ATTACHED) and use that as a base

if( mouseButton == RIGHT ){

save(“name_of_new_file.jpg”);
} else {
// the rest of your mousePressed code should go in here
}
Deliverables
To submit this lab, upload a .zip file of your program. This should include your .pde file and your picture.

m

1. Functions
2. Conditional programming (if statements)
3. Click actions on the canvas
4. Lab assignment

https://youtu.be/URIbbSzy150Links to an external site.

https://youtu.be/V9lOkvQZFtcLinks to an external site.

https://youtu.be/V3byj4zaSCQLinks to an external site.

https://youtu.be/DqynUW56s8wLinks to an external site.