Lab 4: Combining Pictures



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 the swapBack and chromakey functions from the notes on Conditional Statements.

Part 1: Swapping Backgrounds

  1. Try placing yourself somewhere on campus, or somewhere interesting if you have other pictures using both of the functions swapBack and chromakey. You may need to alter the definition of green in the chromakey function to work well with the green background we used. 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 cropPicture or quarter function from earlier mini-labs to generate a picture of the correct size.
    Note: Pictures from Photo Day are in zip files on Moodle.

  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 overlays one picture with another. The overlap amount specifies how many pixels wide the overlap area should be.
    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(width1 - overlapAmt):
        for y in range(newHeight): 
          color = getColor(getPixel(pict1, x, y))
          setColor(getPixel(newCanvas, x, y), color)
      # Copy the blended section
      # 50% pict1 and 50% pict2
      pict2_x = 0
      for pict1_x in range(width1 - overlapAmt, width1):
        for y in range(newHeight):
          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
      for x in range(overlapAmt, width2):
        for y in range(newHeight):
          color = getColor(getPixel(pict2, x, y))
          setColor(getPixel(newCanvas, targetX, y), color)
        targetX = targetX + 1
      # Return the new canvas
      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 (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