This page describes how to run Bluescreen or other code with your own images. We'll focus on the bluescreen computation, but really this page will work for any sort of image-code you want to do.
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).
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. 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.
Browse:
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 load your own background, or use the backgrounds we already have: moon.jpg paris.jpg yosemite.jpg. As a special bonus, we have added stanford.jpg so you can picture yourself right here, sitting on the grass, thinking about computers!
When you have code that prints an image you want to keep, you can right-click the image to save it locally (saving works in Firefox, probably not other browsers).
|
|