CS 107: Pictures and Sounds: Programming with Multimedia

Kalamazoo College

Spring 2008

Mini-Lab: Rotating Pictures

 


Introduction

The objectives of this lab are to become more familiar with JES, to understand and modify more complex programs (which can include if statements, nested loops, functions, etc.), and to do more complicated image manipulations (like reflections and rotations).



Rotation

  1. The following two functions allow us to copy a picture in a counter-clockwise direction, and a clockwise direction. The copyCounterClockwise function works like Recipe #30 in your textbook, but generalizes to take a picture as a parameter, and uses the names targetX and targetY for the values that will be used for the X and Y values in setColor. Copy these functions from a web page version of this lab.
    # This function works like Recipe #30 in the textbook.
    def copyCounterClockwise(picture):
      canvas = makeEmptyPicture(FILL IN THE DIMENSIONS HERE!!!!!)
    # The picture on the canvas will be filled in from bottom # to top, with the left-most column of the picture copied to the bottom # row of the canvas. The upper-left corner of the picture gets copied # to the lower-left corner of the canvas. targetY = getWidth(picture) for sourceX in range(1, getWidth(picture)+1): targetX = 1 for sourceY in range(1, getHeight(picture)+1): color = getColor(getPixel(picture, sourceX, sourceY)) setColor(getPixel(canvas, targetX, targetY), color) targetX = targetX + 1 targetY = targetY - 1 # Display the results and return the canvas show(picture) show(canvas) return canvas

    # This function copies a picture in a clockwise direction.
    def copyClockwise(picture):
      canvas = makeEmptyPicture(FILL IN THE DIMENSIONS HERE!!!!)
    # The picture on the canvas will be filled in from the top # to the bottom, with the left-most column of the picture # copied to the top row of the canvas; the upper-left # corner of the picture gets copied to the upper-right corner # of the canvas. targetY = FILL IN AN APPROPRIATE VALUE HERE!!!! for sourceX in range(1, getWidth(picture)+1): targetX = FILL IN APPROPRIATE VALUE HERE!!!! for sourceY in range(1, getHeight(picture)+1): color = getColor(getPixel(picture, sourceX, sourceY)) setColor(getPixel(canvas, targetX, targetY), color) targetX = CHANGE targetX APPROPRIATELY HERE!!!!! targetY = CHANGE targetY APPROPRIATELY HERE
    # Display the results and return the canvas show(picture) show(canvas) return canvas

  2. You should notice that these functions are not quite fully implemented. In both functions, you need to determine the dimensions of the new canvas on which to put the rotated picture. In the copyClockwise function, you also need to determine the initial values of the targetX and targetY variables, as well as how to increment or decrement them. Fill all of these values in, and then test the functions with several different pictures.

  3. Write a copySideways function that does the same thing as the copyClockwise function, but using only a couple of lines of code. (You should use yourcopyCounterClockwise function from this mini-lab and the verticalReflection
    Analysis Questions: Does it matter in which order you apply the verticalReflection and copyCounterClockwise functions?  Compare the behavior of the copySideways function with the results of rotating a picture three times in the counterclockwise direction.
  4. Make sure you have added appropriate comments for your new functions.
  5. Test your new functions with various pictures. Use the writePictureTo function to save one rotated image, and if necessary, the original image, in your CS107 folder.

Print your results

  1. Print the functions you created in this lab and hand them in.

Post your results

  1. Create a new web page to display your rotated picture, along with its original version.
  2. Copy this new web page and 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 web page from your course page. Bring up your course page in a web browser and test your link.