Image-9 Exercises Custom Bluescreen

< CS101

This page describes how to run Bluescreen or other code with your own images and there are a couple exercises.

1. Create An Image That's Not Too Big

First create a "foreground" image with people or whatever in front of a colored background, and save that image on your computer. Many digital cameras create very large images like 4000 by 3000, 12 megapixels, and such large images will probably cause problems for your browser. Therefore, it's best to create a moderate size image, such as 800 x 600. You also don't want the foreground to be a lot bigger than your background. You can adjust the size of your foreground image by setting your camera to take a small image, or by resizing or cropping the image before loading it into this page. On the Mac, the built-in Preview application can crop and resize and export images, and on Windows I assume there's something similar. Or alternately you can use a free web site to do it such as (opens in a new window).

2. Artistic Composition

Experiment positioning people centered or off to the side to fit in with the 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. Take a few foreground images, so you have different versions to experiment with. Note that the common cheap blue tarps don't work quite right as a background, because they tend to have shiny white areas which lack hue. You might be able to fix this in "post" below.

3. 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. (I did this, for example, a little with the homework-fish eyes, to make them really blue so the result really looked right.) Since the blue gets removed by the bluescreen algorithm, it never gets seen 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.

4. Load Image Into This Page

To load an image into this page, use the Browse button below to select an image file on your computer, for example from your Desktop. This loads the image into this page so your code can refer to it by its file name, such as "myimage.jpg" or whatever. This does not upload the image to some server or anything like that; the image is just sitting on your computer the whole time. You can load any number of images this way.

Load Image:

Files you have loaded

With one or more images loaded above, your code can load them into your own code using the area at the bottom of this page. The code should look like the following, using the actual image name within the quotes.

image = new SimpleImage("myimage.jpg");  // image browsed earlier by name
back = new SimpleImage("moon.jpg");
back.setSameSize(image);   // often useful to do this

// ...
// code to work in image/back images
// ...


To use a background image, download it to your computer and then browse it as above.

When you have code that prints an image that you want to keep, you can right-click the image to save it locally (saving like this works in Firefox, probably not other browsers). Or you can take a screen shot and late crop it down to just your iamge.

Custom Image Exercises

Exercises 1 and 2 here are the last parts of homework3.

We will have class art show of using these images and an art contest. Everyone must turn in two bluescreen images created by their code. It is not recommended to do this homework as a team, but there are instructions at the page bottom if you really want to. For simplicity, you will not turn in the code for these bluescreen images.

The contest categories for the images are:

Verify that your browser is able to "save-as" an from image print() (Firefox can do it). For example, run the code below without changing anything, which should print the abby.jpg image to the right. Can you right-click on that printed image and save it to your computer? (Firefox calls it "canvas.png"). In my testing, only Firefox has this feature. As a work-around, you can take a screen shot that includes your image, and then crop it down later.


The first bluescreen image produced must include yourself in the foreground, and everything else is up to you. When you have your final image, save it as lastname-firstname-1.png (to be uploaded later as part of homework3). The image can be formatted as .png or .jpg, whichever is more convenient for you.

Create a



For the second bluescreen image, you may use a any foreground image you like, but different from the first exercise foreground. The foreground can have you in it or not, and then apply any other effects you like. Save it as lastname-firstname-2.png


Teams of 2: if you want to this one as a team, identify the two people at the top of the text/code part for the image-8 exercises (as usual), and then name the -1 and -2 bluescreen images just using the last/first names of one of the teammates.

Each click of a Run button saves that code to disk on the computer running the browser. The button below retrieves the code exercises listed to the right of the button.

count 2 : image-9-ex1 image-9-ex2

(code appears here)