Introduction

The objectives of this lab are to become more familiar with techniques for blending images and swapping the background of an image.

Lab Entrance Assignment

Type in and run Recipes 42 (swapbg), and 43 (chromakey). Run them with the same images that they used in the text - these can be found in the MediaSources folder. Do you get the same results?

Part 1: Swapping Backgrounds

1. In the lab entrance assignment, you placed the author of your text on the moon. Now try placing yourself on the moon using both of the functions swapbg and chromakey. Try placing yourself in the jungle. You may need to alter the definition of blue in the chromakey function, since we used a green background. You can use MediaTools in JES to help you figure out what our green is. You also need to have both pictures the same size. If you need to change the size of a picture you may use the crop function given to you on your JES shortcut sheet or write your own function to generate a picture of the correct size.

   Note: The swapbg and chromakey functions modify the picture passed in as the first parameter. To experiment repeatedly with the same picture, you will have to use a new copy of the source picture each time. You could do this by creating a variable to contain a duplicate of the source picture, and then making your alterations to the duplicate picture. So, you might add a line such as pict = duplicatePicture(source) as the first line in these functions, and then instead of using source in the function, use the variable pict. You should then remember to return your new picture at the end of the function. The duplicatePicture function is in the modified version of JES.

2. Play around with different images and backgrounds. Do you want to be near the arch? The Eiffel Tower? There are numerous backgrounds and pictures on blue backgrounds in the MediaSources folder. Save something you find creatively pleasing to post on your web page. (Use the Help menu to bring up an explanation of writePictureTo if you have forgotten how to use it.)

Part 2: Blending Images

1. Copy and run the following function for blending two images. This function is more general than Recipe 41 in your text.

   def blendPictures(pict1, pict2, overlapAmt):
     width1 = getWidth(pict1)
     height1 = getHeight(pict1)
     width2 = getWidth(pict2)
     height2 = getHeight(pict2)
   
     # Set up width and height for new canvas
     newWidth = width1 + width2 - overlapAmt
     
     newHeight = min(height1, height2)
   
     # Create the canvas to hold the blended pictures
     newCanvas = makeEmptyPicture(newWidth, newHeight)
   
     # Copy the first picture up to the overlap section
     for x in range(1, width1 - overlapAmt + 1):
       for y in range(1, newHeight + 1): 
         color = getColor(getPixel(pict1, x, y))
         setColor(getPixel(newCanvas, x, y), color)
   
     # Copy the blended section
     # 50% pict1 and 50% pict2
     pict2_x = 1
     for pict1_x in range(width1 - overlapAmt + 1, width1 + 1):
       for y in range(1, newHeight + 1):
         pixel1 = getPixel(pict1, pict1_x, y)
         pixel2 = getPixel(pict2, pict2_x, y)
         newRed = 0.50 * getRed(pixel1) + 0.50 * getRed(pixel2)
         newGreen = 0.50 * getGreen(pixel1) + 0.50 * getGreen(pixel2)
         newBlue = 0.50 * getBlue(pixel1) + 0.50 * getBlue(pixel2)
         color = makeColor(newRed, newGreen, newBlue)
         setColor(getPixel(newCanvas, pict1_x, y), color)
       pict2_x = pict2_x + 1
   
     # Copy the remaining section of pict2
     targetX = width1 + 1
     for x in range(overlapAmt + 1, width2 + 1):
       for y in range(1, newHeight + 1):
         color = getColor(getPixel(pict2, x, y))
         setColor(getPixel(newCanvas, targetX, y), color)
       targetX = targetX + 1
   
     # Show the result and return the new canvas
     show(newCanvas)
     return newCanvas
   

   Run this function with several different images and overlap amounts. Are the results what you expected? Save one set of blended images to post on your web page.

Post your results

1. Create a new Lab 4 web page to display at least one blended image, and one image with a new background. Remember to include the original image and some text to describe what transformations you used.
2. Copy your web page and all the images that should be on it to your personal web space on kzoo.edu. (You may want to review the instructions in Lab 1 if you've forgotten how to do this.)
3. Include a link to your new Lab 4 web page from your course page. Bring up your course page in a web browser and test your link.

4. Show your pictures to your lab instructor or your TA