This page describes how to run Bluescreen or other code with your own images and there are a couple exercises.
First create a "foreground" image with people or whatever in front of a colored background, and save that image on your computer. Note: you don't want to create an image that is too large to work with. Many digital cameras create very large images like 4000 by 3000. Such large images will probably cause problems for your browser. Therefore, it's best to create a moderate size image, such as 640 x 480, or 800 x 600. You can do this either 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 picresize.com (opens in a new window).
Foreground image tips: small images, take at least 3, don't be in the center for all of them, you could wear something the same color as the background .. use artistically, Get close enough to fill the image with background color (or crop it down later)
You can try taking a variety of foreground images with people centered or otherwise placed 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 color. You might be able to fix this in "post" below.
"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 coming out the way you like, 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.
To load an image into this page, use the Browse button 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.
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 // ... print(image);
You can grab any image to use as a background -- 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).
Exercises 1 and 2 here are the last parts of homework3, due Wed April 24th
We will have class art show of all these and a contest of some sort with all the images. 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 blue screens.
The contest categories for the images will be:
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.
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
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.
This button will retrieve the code that has been run/saved from this page. Generally you retrieve your code all at once from a "homework" page, but this button is an alternative to retrieve your code for a particular exercise.
count 2 : image-custom-ex1 image-custom-ex2