For these exercises, you will produce two green screen images, using your own pictures. This page describes how to upload and create your own images with exercises at the end.
How to create your own green screen 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 can use whatever color you have on hand if you weren't in class.
Note about images that are too big: Many digital cameras create very large images (around 12 megapixels), and these 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. Alternatively, you can use a free web site to do it such as picresize.com (opens in a new window).
"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 green screen 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. You can use Preview on Mac or Paint on Windows to achieve this effect.
To load an image into this page, use the Browse button below to select an image file on your computer. 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 our server; the image is just sitting on your computer the whole time. You can load any number of images this way.
Load Image:
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);
// ...
// code to work in image/back images
// ...
print(image);
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 file. Alternatively, you can take a screen shot and late crop it down to just your image.
Next Tuesday, we will have an in class art-show and contest using these images. Everyone must turn in two 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.
The first green screen image produced must include yourself in the foreground, must use your green screen 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 the fourth homework). The image can be formatted as .png or .jpg, whichever is more convenient for you.
For the second green screen image, you may use any foreground image you like processed by your green screen code. The foreground should not be a CS101 stock image like monkey.jpg and not the same image as the first custom green screen. The foreground can have you in it or not, and then apply any other effects you like. You should apply at least one other effect that we discussed in CS101 over the past three lectures (for example: grayscale, negative filters, blur, faded images, multiple passes, edge detection) or an effect of your own creation. Save it as lastname-firstname-2.png
Choose one (or more) non-CS101 images, and edit them either using the techniques we've learned in class or a filter you create. The sky's the limit - we just want to see your creativity.
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 3 : image-10custom-ex1 image-10custom-ex2 image-10customex3
(code appears here)