Image-10 Exercises Custom Bluescreen

< CS101

For these exercises, you will produce 2 bluescreen images, using your own pictures. This page describes how to run Bluescreen code with your own images and there are a couple exercises at the end.

How to create your own bluescreen:

1. Take Several Foreground Images

First create several "foreground" pictures with people or whatever in front of a colored background, and save those images on your computer. You can take the pictures in class or on your own. Take several 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. Note that the common cheap blue tarps don't work very well as a background, because they tend to have shiny white areas which lack hue. You might be able to fix this in "post" below.

Note about images that are too big: Many digital cameras create very large images like 4000 by 3000, 12 megapixels, and such large images will probably cause problems when you try to process them. Therefore, it's best to create a moderate size image, such as 800 x 600. You can adjust the size of your foreground image by setting your camera to take a small image initially, or by resizing or cropping the image before loading it for processing. 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. 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 looked the way I wanted.) 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.

3. 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 below can load and operate on the images by name. The code should look like the following, using your image name within the quotes.

image = new SimpleImage("myimage.jpg");  // image browsed earlier by name
back = new SimpleImage("moon.jpg");
back.setAsBig(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 on the image to save it as a local .png file. This save-image feature is works in Firefox and Chrome, not sure about any other browser. Alternately, you can take a screen shot and late crop it down to just your image, but that's more work.

Custom Image Exercises

Exercises 1 and 2 here are the last parts of homework-3. For both exercises, you will turn in the code and the final output image. We will have an in class art-show and contest using these images. Everyone must turn in 2 bluescreen images.

The contest categories for the images are:

Verify that your browser is able to save an image as described above: run the code below without changing anything, which should print the monkey.jpg image to the right. Verify that you can right-click on that printed image and save it to your computer as an image file.

Custom Bluescreen #1

The first bluescreen image produced must include yourself in the foreground, must use your bluescreen processing logic in some way, 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 homework-3). The image can be formatted as .png or .jpg, whichever is more convenient for you.



Custom Bluescreen #2

For the second bluescreen image, you may use any foreground image you like processed by your bluescreen code. The foreground should not be a CS101 stock image like monkey.jpg, and not the same image as the first custom bluescreen. The foreground can have you in it or not, and then apply any other effects you like. Save it as lastname-firstname-2.png



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

count 2 : image-10custom-ex1 image-10custom-ex2

(code appears here)