Homework 2c - Bluescreen

For this last bit of HW2, you will use code and your creativity to create a bluescreen image. We will have a class art-show and some small prizes for all this artistic output.

Bluescreen Contest Categories

We will have an in class art-show and contest using these images.

The contest categories for the images are:

The foreground image for the bluescreen must be one that you yourself take and it should have some blue or green in it to be used by the bluescreen algorithm; not an image you grabbed off the internet. Often you yourself will appear in your foreground image. The Background image can be from anywhere, keeping in mind that a selection of the entries will be projected in front of the whole class.

Bluescreen Code

In the image-grid folder, file bluescreen.py has code set up like the lecture monkey example. The front strategy is implemented in the do_front() function and the back strategy is in do_back(). The code is complete, missing only the pixel-color if-test, replaced by False. To use the function of your choice, replace the False with an if-test that works for your images. You can adjust this code in any way to get the effect you want.

The "front" strategy loops over the front image, and selects pixels by color (e.e. blue) to be replaced by pixels from the back image, as was done in the monkey-moon example in lecture. The output is then the edited version of the front image. This strategy is selected by -front on the command line. You may use either the front or back strategy for your homework, completing just the code you need.

$ python3 bluescreen.py -front monkey-500.jpg moon-600.jpg

To use your own images with bluescreen.py, place them in the image-grid folder, naming your image file something like my-blue1.jpg. A Python program running in a folder can refer to files located in same folder just by their filename, like 'my-blue1.jpg'. You can run bluescreen.py with your image files like this on the command line:

$ python3 bluescreen.py -front my-blue1.jpg stanford-600.jpg 

One limitation of the front strategy is that if the back image is smaller than the front image, an out-of-bounds error may result. The bluescreen.py file also includes a function for the "back" strategy, selected by -back on the command line. The back strategy loops over the front image, selects non-blue (i.e. monkey) pixels, and writes them onto the back image. The writing is shifted over by shift-x and shift-y, and the output is then the back image with the monkey added in. In this way, you can adjust exactly where the monkey appears on the back image. The back strategy does not require that the back image is bigger than the front image. You may use whichever strategy you prefer to produce your bluescreen.

$ python3 bluescreen.py -back monkey-500.jpg moon-600.jpg 150 50 
$ # (150 50 are the shift-x and shift-y numbers)

Art Show

For the grading of this project, you can get full marks from an image that demonstrates creating a real image and processing it with the bluescreen algorithm, and we will not be picky about the level of artistry or creativity. However, if you want to go for the gold on the art show, let your creativity fly!

How to create your own bluescreen:

1. Take Several Foreground Images

First create several "foreground" pictures with people or whatever in front of a blue or green colored background, and save those images on your computer. Bluescreens for you to take pictures are available after hours by Nick's office. Or you can use, say, a blue towel as background. We are not grading on the artistic details of your photography here; we just want an image with some blue in it and some code that does the bluescreen algorithm with it. For the contest however, the sky is the limit.

Take a few different foreground images so you can experiment. For example, take one image with people in the center and another with them off to the side to fit in with interesting parts of the background. You can also try dressing the people in the foreground with blue clothes, so the background will show through those areas. You don't have to use blue, green is also popular, and in any case, you will need to adjust the code to work with your background color.

Image Size

Digital cameras create very large images like 4000 by 3000 pixels, 12 megapixels, and such large images will take too long to process and have far more pixels than the displays we have. Keep your original images, and create smaller versions for processing, say reduced to a width of 600 or 800 pixels with a filename like "myimage-600.jpg".

On the Mac, the built-in Preview application can crop and resize and export images, and on Windows I assume there's something similar. In Preview: open your original, use the Duplicate menu command first to save your original, then crop and resize and save.

2. Fix It In Post (optional)

"Fix It In Post" is a sort of Hollywood joke, referring to fixing some on-camera mistake later on in the computer post-production phase. This is totally optional, but you can do the same sort thing with your bluescreen image. For example, if part of the blue background is not quite big enough, you can edit the image in a paint program, and draw a blue rectangle over the area to just make it be blue the way you want. Since the blue gets removed by the bluescreen algorithm, it never appears in the final image. You are just creating a sort of hole for the background image to show through. On the Mac, the built-in Preview image app has a very limited ability to put colored rectangles and ovals on things, and on Windows the Paint program is similar.

You can fix up your image this way, but we want the actual bluescreen composition to be done by your code in bluescreen.py.

3. Run bluescreen.py

Fill in the if-test line in bluescreen.py to work with your images and the output you want. Iterate to get the look you want.

Optional Brightness Modification

Most images will not need this technique, but we are mentioning it just in case. Sometimes you want the color-detection to vary with brightness — like you want to replace the bright blue sections, but there are some dark shadowy blue pixels you want to leave untouched.

Normally the color detection looks like this:

average = (pixel.red + pixel.green + pixel.blue) / 3
if pixel.blue > average * 1.2:
    ...

It's possible to use and to further narrow the color detection to pixels which are blue and also bright, like this:

average = (pixel.red + pixel.green + pixel.blue) / 3
if pixel.blue > average * 1.2 and average > 127:
    ...

The average number can be interpreted as the brightness of the pixel in the range 0..255, so the above if-test detects pixels which are both blue and bright. The 127 number is just a first guess which can be tuned to get the desired pixels.

4. Saving Your Output

The bluescreen output image files should be the product of your input files and your edits to the bluescreen.py code. You will submit your output image files and your bluescreen.py code. Save your favorite bluescreen output as a .png or .jpg file for upload. Please use your name in your output file name, like "jane-smith1.png" to help us keep the entries organized. You must submit 1 bluescreen image, and you can submit a second if you like.

Ethics Exercise

See the ethics-truth.txt file in the homework folder - write your paragraph below the instructions in that file and submit it as part of HW2.2. We'll have a brief ethics discussion in lecture 7 for this part.

All Done

Turn In

When you have your bluescreen output looking good and your ethics paragraph, please turn in the following on Paperless as HW2.2.