Difference between revisions of "CS110:Lab08"

From IPRE Wiki
Jump to: navigation, search
('''Changing Colors in your Image ''')
 
(44 intermediate revisions by 3 users not shown)
Line 1: Line 1:
='''Lab 08: Graphics Part II: Image Manipulation''' =
+
=='''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 three functions: resize, colorize and paste. At the end of this session,
+
# Your code
you will be able to use this functions 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(pickAFile())
+
    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>
+
myRed = makeColor(254, 0, 0)
+
</pre>
+
 
+
The red pixels in the first butterfly below have been changed to blue and its yellow pixels
+
to red.
+
 
+
[[Image:Butterfly1.JPG]]<--- '''Butterfly1''' [[Image:Butterfly2.JPG]]<--- '''Butterfly2'''
+
 
+
 
+
'''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.
+
 
+
== '''Translating an Image ''' ==
+
 
+
== '''Copying and Pasting an Image ''' ==
+
 
+
= Assignment 08 =
+
 
+
= Links to Course-Related Pages =
+
* Back to [http://wiki.roboteducation.org/CS110_Lab Lab Home Page]
+
* Back to [http://cs.brynmawr.edu/Courses/cs110/fall2009/ 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