Difference between revisions of "CS110:Lab08"

From IPRE Wiki
Jump to: navigation, search
(Assignment 08: Adding More Functions to your Photoshop Library)
 
Line 1: Line 1:
='''Lab 08: Graphics Part I: Making Photoshop Functions''' =
+
=='''Lab 08: Interactive Graphics'''==
  
 +
You may, like last week, want to refer to the following on Calico Graphics:
  
=='''Objective'''==
+
* [[Calico Graphics]]
* Create functions to manipulate images
+
  
== '''Image Transformations ''' ==
+
Again, you have your choice this week between two assignments:
  
You've probably used a variety of graphics editors such as ''Paint, Adobe Photoshop, GIMP'',
+
# Create an animation
etc. to manipulate or enhance your pictures. In this lab session, you will be exploring and
+
# Create an interactive graphic using graphics and human interaction (mouse, keyboard, gamepad)
creating functions to transform your images in the same way these image editors are able to. <br>
+
  
''Image transformations'' are operations that change the appearance of an image or its spatial location.
+
Turn it:
Common image transformations include '''resize (shrink''' or '''enlarge)''', '''rotate''', '''crop''',
+
'''translate (i.e''' '''move'''), and '''flip'''. There are also functions to change the color or brightness
+
of an image. <br>
+
  
In this lab, we will explore four functions: resize, colorize, translate and paste. At the end of this session,
+
# Your code
you will be able to use this functions (and create your own) to transform your images into beautiful mosaics. Once again, you are
+
# A video demonstrating your creation
only limited by your imagination and creativity.
+
# A short paragraph describing what is is, or your ideas
  
== '''Resizing an Image: Shrinking and Enlarging ''' ==
+
You will be graded at least partially on your artistic creation and its aesthetics.
  
Below is a program that takes an image and shrink it by a specified factor, F.
+
'''BONUS:''' do both of these options
For instance, if the original image is 1000x1000 pixels and you wanted to shrink
+
it by a factor of 5, you would end up with an image of size 200x200.
+
 
+
<pre>
+
def main():
+
    # read an image and display it
+
    oldPic = makePicture("http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif")
+
    show(oldPic, "Before")
+
    X = getWidth(oldPic)
+
    Y = getHeight(oldPic)
+
    # Input the shrink factor and computer size of new image
+
    F = int(ask("Enter the shrink factor."))
+
    newx = X/F
+
    newy = Y/F
+
    # create the new image
+
    newPic = makePicture(newx, newy)
+
    for x in range(newx):
+
        for y in range(newy):
+
            setPixel(newPic, x, y, getPixel(oldPic, x*F, y*F))
+
    show(newPic, "After")
+
</pre>
+
 
+
The image below on the right is 425x400 pixels in dimension. After shrinking it by a factor of 2,
+
the result is the image on the right with dimensions 212x200. <br>
+
 
+
[[image:Asimo2.GIF|Original Image (425x400)]] [[Image:Asimo3.GIF|After Shrinking (212x200, F=2)]]
+
 
+
'''Exercise 1: ''' Write a function ('''resize''') that gives the user the option to '''enlarge'''
+
or '''shrink''' an image by some factor. The user should have the option to choose this factor as well.
+
Your function should display the new image after it has been resized.
+
 
+
== '''Changing Colors in your Image ''' ==
+
 
+
In the previous labs, you've manipulated the pixels in the pictures your robot take
+
to identify various objects such as the orange pyramid. In this section you will
+
experiment with changing colors in other images (these do not have to be pictures your robots take).
+
Recall that you can define your own colors using the makeColor function. For instance,
+
to define a color called awesomeness with RGB values 156,120,47 you would use the following code:
+
 
+
<pre>
+
awesomeness = makeColor(156,120,47)
+
</pre>
+
 
+
Also, you can load pictures from your computer with the makePicture() function:
+
 
+
mySavedPicture = makePicture("robots.jpg")
+
show(mySavedPicture)
+
 
+
To navigate and then select the image to load, use the following combination:
+
 
+
mySavedPicture = makePicture("http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif")
+
show(mySavedPicture)
+
 
+
You can also use '''makePicture(pickAFile())''' to select and load a picture from your computer. When you call the pickAFile command, a navigational dialog box is displayed. You can
+
use this to navigate to any folder and select a file to open most any image.
+
 
+
The red pixels in the first butterfly below have been changed to blue and its yellow pixels
+
to red.
+
 
+
[[Image:Butterfly1.gif]]<--- '''Butterfly1''' [[Image:Butterfly2.gif]]<--- '''Butterfly2'''
+
 
+
You can get the original butterfly (on the left) with this command:
+
 
+
>>> butterfly = makePicture("http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif")
+
 
+
'''Exercise 2: ''' Write a program that takes butterfly1 and changes two or more of the colors in the image
+
to produce an output like butterfly2. To use image butterfly1, use the URL string "http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif", or right-click on the image and select ''Save Image As'' and use the file name or pickAFile().
+
 
+
== '''Translating an Image ''' ==
+
 
+
In this section you will apply what you already know about Graphics to another type of image
+
transformation, translation. A ''translation'' is simply a movement in the x,y plane of your window.
+
When you were introduced to graphics, you created a variety of polygons as well as points and lines,
+
drew these objects in a graphics window and then manipulated them
+
in various ways. You can also treat an image like an object and move it around in your canvas in the same way
+
you did with rectangles, circles etc. To convert a picture your robot takes into an ''image'', use the following:
+
 
+
<pre>
+
picture = takePicture()
+
pixmap  = makePixmap(picture)
+
image = Image(Point(x, y), pixmap)
+
</pre>
+
 
+
If the picture was taken by your camera or downloaded from the web, you will need to use the
+
makePicture command first so that the Myro commands will work on it. The code below creates two pixmap
+
images, draws these images on a canvas and then translates them within the canvas using the move command.
+
 
+
 
+
myCanvas = GraphWin("My BigCanvas", 400, 400)
+
oldPic = makePicture("http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif")
+
#show(oldPic)
+
pixmap  = makePixmap(oldPic)
+
butterfly1 = Image(Point(50, 50), pixmap)
+
butterfly2 = Image(Point(300, 300), pixmap)
+
butterfly1.draw(myCanvas)
+
butterfly2.draw(myCanvas)
+
butterfly1.move(50,50)
+
butterfly2.move(-50,-50)
+
 
+
The picture you choose must be smaller than your canvas. An ideal size is 100x100.
+
The images below show the translation of two butterflies. As specified by the code above,
+
butterfly1 starts out in the upper left corner and is translated 50 pixels along the x axis and the y axis.
+
Butterfly2 starts out near the lower right corner and is translated -50 pixels along the x axis and the y axis.
+
 
+
[[Image:Translate1.JPG]] <--- Before Translation [[Image:Translate2.JPG]] <--- After Translation
+
 
+
== '''Copying and Pasting an Image ''' ==
+
 
+
Copying an image can prove useful in image transformations and other applications. Below you will find functions for copying and pasting an image onto a canvas.
+
 
+
<pre>
+
from myro import *
+
 
+
def createCanvas():
+
    canvas = GraphWin("My BigCanvas", 200, 200)
+
    pic = makePicture(pickAFile())
+
    return [pic, canvas]
+
 
+
def makeGray(pic):
+
    pic2 = copyPicture(pic)
+
    for pix in getPixels(pic2):
+
        r, g, b = getRGB(pix)
+
        gray = (r + g + b) / 3
+
        setRGB(pix, [gray, gray, gray])
+
    return pic2
+
 
+
def paste(pic1, x, y, pic2):
+
    newpic = copyPicture(pic1)
+
    for col in range(getWidth(pic2)):
+
        for row in range(getHeight(pic2)):
+
            setPixel(newpic, col + x, row + y,
+
                    getColor(getPixel(pic2, col, row)))
+
    return newpic
+
 
+
 
+
def main():
+
  butterfly = makePicture("http://wiki.roboteducation.org/wiki/images/4/4d/Butterfly1.gif")
+
  bigpic = makePicture(500, 500)
+
  bigpic = paste(bigpic, 10, 10, butterfly)
+
  bigpic = paste(bigpic, 200, 200, makeGray(butterfly))
+
  show(bigpic)
+
</pre>
+
 
+
[[Image:CopyPaste.JPG]]
+
 
+
= Assignment 08: Adding More Functions to your Photoshop Library =
+
 
+
'''Part I '''<br>
+
Exercises 1 and 2 of Lab 8 <br>
+
 
+
'''Part II'''<br>
+
'''1. Horizontal Flip: ''' Write a function that will flip an image horizontally as displayed below: <br>
+
[[Image:HorizonFlip.jpg]] <br>
+
 
+
'''2. Collage: ''' Write a program to create a mosaic of images on your canvas. Your functions should utilize the translate, horizontal flip and the colorize function you create in class. Edit (2/22/10): PLEASE Include your collage with your program (do not worry about printing it in color, greyscale is acceptable). ''The colorize function can be found on the link to [http://cs.brynmawr.edu/cs110/photoshop.py photoshop.py] on the main course page.''
+
 
+
= Links to Course-Related Pages =
+
* Back to [http://wiki.roboteducation.org/CS110_Lab Lab Home Page]
+
* Back to [http://cs.brynmawr.edu/Courses/cs110/spring2010/ Course Home Page]
+

Latest revision as of 18:15, 7 November 2011

Lab 08: Interactive Graphics

You may, like last week, want to refer to the following on Calico Graphics:

Again, you have your choice this week between two assignments:

  1. Create an animation
  2. Create an interactive graphic using graphics and human interaction (mouse, keyboard, gamepad)

Turn it:

  1. Your code
  2. A video demonstrating your creation
  3. A short paragraph describing what is is, or your ideas

You will be graded at least partially on your artistic creation and its aesthetics.

BONUS: do both of these options