Assignment 5: Stencils and Sprites


This assignment will give you experience working with images. First, you should select an image to display in your processing sketch. I’ll call this the “display image”. Then select a “stencil” image, such as the heart shown below:

You will create an interactive program. When the user clicks on the display image, you should cut out a shape in that image that matches your stencil. The cutout shape should move away from the click location.


For example, this is my displayed image:

After the user clicks on the image, I create a heart cutout centered where the user clicks, and move that cutout away:


And this is a little bit later:

Notice that there is a heart made of the original pixels below the red heart and I filled in the original pixels with red. Please also see the video posted on the assignment page to get a clear idea of how the program should work.


To create this program, you will need at least three images:

1. Display image: this is the image that is initially displayed and that you will cut shapes out of.

2. Stencil image: this defines the shape that you will cut out and move away.

3. Sprite image: this contains the cutout that you will move away. Sprites are a traditional way to animate characters in 2D video games. As with all PImage objects, the sprite will be rectangular. You will create a non-rectangular shape such as the heart by making some pixels in the sprite image transparent and others opaque. The pixels that make up the heart are opaque and the rest are transparent.


You will need to write a program that does the following:

1. When a user clicks on the image, change the pixels in the display image to make a hole the shape of the stencil. The stencil should be centered around the location that the user clicks. Note that the stencil is also a rectangular image. You need to first figure out which pixels in the display image are overlapped by the stencil (draw this out on paper if it is unclear). Then for each pixel in the in the stencil, you need to decide if that pixel is part of the stenciled shape (i.e. the heart that is shown in black) or the background (shown in white). If the pixel is part of the shape, you need to change the corresponding pixel in the display image to be either transparent or whatever color you’d like to fill it with (your choice as to which of these methods you use to implement the cut out).

a. Hint: Whenever you need to iterate over (i.e. visit) every pixel in an image, nested for loops are a good way to do it.

b. Hint: If you change the stencil image, I suggest still using black and white to define foreground and background. Depending on how you create the image, it is good to not rely on the pixels being exactly white or exactly black. They may be a little off. You can use a looser check.

c. Hint: Get this part of the program working first. In my case, I could run the program at this point and anywhere I clicked, I would instantly see a red heart. There is nothing moving at this point

2. You need to build your sprite. This can be done at the same time as you are updating the display image. For the sprite, every pixel that is part of the stencil shape (e.g. the heart) must be set to the color of the corresponding pixel in the display image. All other pixels must have their alpha set to 0.

3. Once you have created the sprite, you need to tell your program to draw it and animate its position over time so that it moves off screen. This is very similar to what you did in A3. The initial location of the sprite must be directly over top of the hole in the display image. By doing this, it will appear as if the pixels of the display image are moving away, rather than the sprite is a totally different image.


Requirements:

• I used a heart for the stencil since it is Valentine’s Day, but you can use any shape you like, as long as it is not too simple. Shapes that are too simple include rectangles, ellipses and triangles. I want you to require the stencil image in order to define your shape.

• I just made the cutout fall straight down, but you can make it move in any direction you like. For example, you might want to have it float up like the balloon in Assignment 3 or move on a diagonal. Try to do something interesting.

• There are a couple of ways that you could make the heart appear in the original image. One is to change the color of all of the pixels that will form the heart. The other is to set these pixels to be transparent so that whatever you put below shows through. Either option is fine. I used the latter.

• Your program should still work if the user clicks near an edge. If you are not careful with these cases, you can get an “array out of bounds” error from using indices that are out of the range of the pixels array. I suggest you first get your program running for clicks in the middle of the screen. Then add a bit of code to handle the cases where the user clicks in a place that would cause the stencil to overlap one of the edges of the image.

• If the user clicks on the screen again before the sprite has moved offscreen, you can simply stop displaying the current sprite and create a new one where the user clicks.


Hints:

• If two images are different sizes, and you want to calculate the pixels array index from x,y coordinates, this must be done separately for each image. This is because the number of the columns in each image is different, so the formula is different.

• When you place the stencil over the image, it will overlap a subgrid of the pixels in the image. The upper left corner of the stencil will be (0, 0), but the coordinates of the pixel this overlaps in the display image will not in general be (0,0) (e.g. the stencil will often be in the middle of the display image).


Challenge:

• This is not required for this assignment, but if you want something a little more challenging, create an array of sprites. Every time someone clicks on the screen, generate a new sprite and animate all sprites while they are still on the screen. This would allow the user to do things like quickly click three times and see three falling hearts at once.


Submission:

To submit your work, attach the zip file to your submission in Canvas. The zip file should include the sketch folder along with the code file and whatever source images are necessary1.

Here are the instructions on how to submit an assignment with Canvas:

https://guides.instructure.com/m/4212/l/54353-how-do-i-upload-a-file-as-an-assignment-submission-in-canvas

                                                                   

1To do this on a PC, go to the folder that contains the sketch folder in File Explorer. Right click on it and select “Send To -> Compressed (zipped) Folder”. This will create a zip file. Rename it A5_YourName.zip.

To do this on a Mac, go to the folder that contains the sketch folder in Finder. Right click on it and select “Compress 3 Items”. This will create a zip file. Rename it A5_YourName.zip.