Latest revision as of 14:00, 1 June 2018

D. Thiebaut (talk) 11:30, 8 April 2018 (EDT)

...

Solution Program

# lab10sol.py
# D. Thiebaut
# A collection of functions for manipulating an image
# using nested for loops.  Each function corresponds to a 
# transformation that was introduced in the lab.

from graphics import *

# We measured the image dimensions to be 243x207
# We make the window the same size
WIDTH  = 243
HEIGHT = 207


def sideways( img ):
    global WIDTH, HEIGHT
    for x in range( WIDTH ):
       for y in range(  x  ):
           # make sure y does not get larger than height of image
           if y < HEIGHT:
                # modify color of pixel at x, y...
                red, green, blue = img.getPixel( x, y )
                grey  = int( 0.3 * red +0.6 * green +0.11 * blue )
                color = color_rgb( grey, grey, grey )
                img.setPixel( x, y, color )
                
def blackAndWhite( img, win ):
    """sets the red component of the pixels of the image
    to their maximal value"""
    global WIDTH, HEIGHT
    for x in range( WIDTH ):
        win.update()
        for y in range( HEIGHT ):
            red, green, blue = img.getPixel( x, y )
            grey  = int( 0.3 * red +0.6 * green +0.11 * blue )
            color = color_rgb( grey, grey, grey )
            img.setPixel( x, y, color )


def saturate( component ):
    """transforms component into min or max value depending
    on its intensity."""
    if component < 125:
       return 0
    return 255


def AndyWarhol( img ):
    """saturates the image by saturating the 
    RGB components.  If the R component is less than 125, then
    set it to 0, otherwise set it to 255.   Same for blue and green."""

    global WIDTH, HEIGHT
    for x in range( WIDTH ):
        for y in range( HEIGHT ):
            red, green, blue = img.getPixel( x, y )
      
            # the line below replaces the pixel with its original color.  Change
            # the amount of red, green and blue to see some change in the colors
            newColor = color_rgb( saturate(red), saturate(green), saturate(blue) )
            img.setPixel( x, y, newColor )

def makeRed( img ):
    """sets the red component of the pixels of the image
    to their maximal value"""
    global WIDTH, HEIGHT
    for x in range( WIDTH ):
        for y in range( HEIGHT ):
            red, green, blue = img.getPixel( x, y )
            img.setPixel( x, y, color_rgb(255, green, blue ) )

def pixelate( img, win ):
    global WIDTH, HEIGHT
    img.undraw(  )
    for x in range( 0, WIDTH, 10 ):
        for y in range( 0, HEIGHT, 10 ):
            red, green, blue = img.getPixel( x, y )
            circ = Circle( Point( x, y ), 5 )
            circ.setFill( color_rgb( red, green, blue ) )
            circ.draw( win )
                      
def addBorder( img ):
    """add a red border around the image"""
    global WIDTH, HEIGHT
    for x in range( WIDTH ):
        for y in range( 6 ):
            img.setPixel( x, y, color_rgb(255, 0, 0 ) )
        for y in range( HEIGHT-5, HEIGHT ):
            img.setPixel( x, y, color_rgb(255, 0, 0 ) )

    for y in range( HEIGHT ):
        for x in range( 6 ):
            img.setPixel( x, y, color_rgb(255, 0, 0 ) )
        for x in range( WIDTH-5, WIDTH ):
            img.setPixel( x, y, color_rgb(255, 0, 0 ) )

def addRedDiagonal( img ):
    """draws a red diagonal going from the top-left corner
    of the image down."""
    global WIDTH, HEIGHT
    for x in range( 0, WIDTH ):
        y = x
        if y < HEIGHT:
            red, green, blue = img.getPixel( x, y )
            img.setPixel( x, y, color_rgb( 255, 0, 0 ) )

def addRedCross( img ):
    """draws a red cross going from the top-left corner
    of the image down, and from top-right corner down to
    lower left side of the image."""
    global WIDTH, HEIGHT
    for x in range( 0, WIDTH ):
        y = x
        if y < HEIGHT:
            red, green, blue = img.getPixel( x, y )
            img.setPixel( x, y, color_rgb( 255, 0, 0 ) )

    for x in range( WIDTH-1, -1, -1 ):
        y = WIDTH-1-x
        if y < HEIGHT:
            red, green, blue = img.getPixel( x, y )
            img.setPixel( x, y, color_rgb( 255, 0, 0 ) )
    
def symmetry( img ):
    """draws the image horizontally symmetrical around the
    vertical middle of the image"""
    global WIDTH, HEIGHT
    for x in range( 0, WIDTH//2 ):
        x2 = WIDTH-1-x
        for y in range( 0, HEIGHT ):
            red, green, blue = img.getPixel( x, y )
            img.setPixel( x2, y, color_rgb(red, green, blue ) )

def fog( img ):
    """creates a fog effect, making the pixels more and more
    white as we get closer to the bottom of the window."""
    global WIDTH, HEIGHT
    for x in range( 0, WIDTH ):
        for y in range( 0, HEIGHT ):
            red, green, blue = img.getPixel( x, y )
            percent = 1.0 * y / HEIGHT
            red   = int( red + (255-red)*percent )
            green = int( green + (255-green)*percent )
            blue  = int( blue + (255-blue)*percent )
            img.setPixel( x, y, color_rgb(red, green, blue ) )
    
def waitForClick( win, message ):
    """ waitForClick: stops the GUI and displays a message.  
    Returns when the user clicks the window. The message is erased."""

    # wait for user to click mouse to start
    startMsg = Text( Point( win.getWidth()/2, win.getHeight()-15 ), message )
    startMsg.draw( win )    # display message
    win.getMouse()          # wait
    startMsg.undraw()       # erase



def main():
    # open the graphic window
    win = GraphWin( "Your name here", WIDTH, HEIGHT )

    # create an image with its center corresponding to the center
    # of the window.  
    img = Image( Point(WIDTH//2, HEIGHT//2), "catHat.gif", )

    # make the image appear in the window
    img.draw( win )

    # transform the pixels of the image
    #makeRed( img )

    # create Andy Warhl image
    #AndyWarhol( img )

    # make the image black and white
    #blackAndWhite( img, win )

    # apply a sideways transformation
    #sideways( img )

    # add a border
    #addBorder( img )

    # add a red diagonal to the image
    #addRedDiagonal( img )

    # add a red cross to the image
    #addRedCross( img )

    
    # pixelate the image
    pixelate( img, win )

    # symmetrical cat in fog
    #symmetry( img )
    #fog( img )
    
    # close the window when the user clicks on it
    waitForClick( win, "click to close" )
    win.close()

main()

</showafterdate>

@@ Line 2: / Line 2: @@
 ----
+<onlydft>
 <br />
@@ Line 249: / Line 249: @@
 * Make your main program call ''blackAndWhite( img, win )'' instead of the previous function it was calling.
 * Run your program.
-* Notice how it "sweeps" through the image as it processes it.  The '''win.update()''' line forces the graphics window to refresh the image and show the state of all the pixels.  Normally the graphic window will show the changes only after the for-loops are done with the pixel modification.   Now we can better see how the '''for x''' and '''for y''' loop operate.
+* Notice how it "sweeps" through the image as it processes it.  The '''win.update()''' line forces the graphics window to refresh the image and show the state of all the pixels.  Normally the graphic window will show the changes only after the for-loops are done with the pixel modification.   Now we can better see how the '''for x''' and '''for y''' loops operate.
 <br />
 <br />
@@ Line 294: / Line 294: @@
 =Problem 4: Sideways=
-Pick one of the functions you have written for the problems above and make a new copy of it under a different name, say, '''sideways( img )'''.
+* Add the function '''sideways( img, win )''' show below to your program.  Make your main program call this new function.
+* Before running your program, analyze the code of the new function.  See if you can accurately predict the way the image is going to be transformed by these nested for-loops.  Do you and your partner agree on what will happen to the image?
+* Run the program!   Does what you observe make sense?   Look at your loop again, and at the resulting image.  Make sure the logic of the code explains the resulting image transformation.
-Replace the nested for-loop with this loop:
 <br />
-<source lang="python">
+::<source lang="python">
-for x in range( WIDTH ):
+def sideways( img, win ):
-     for y in range(  x  ):
+    """transforms the image in a (currently) mysterious way"""
-           # make sure y does not get larger than height of image
+    global WIDTH, HEIGHT
-           if y < HEIGHT:
+    for x in range( WIDTH ):
-                # modify color of pixel at x, y...
+        win.update()
-                # keep your pixel color-modification code here
+        for y in range( x ):
+            if y < HEIGHT:
+                 red, green, blue = img.getPixel( x, y )
+                 grey  = int( 0.3 * red +0.6 * green +0.11 * blue )
+                 color = color_rgb( grey, grey, grey )
+                 img.setPixel( x, y, color )
 </source>
 <br />
-* Look at the code.  See if you can accurately predict the way the image is going to be transformed by these nested for-loops.
-* Run the program!   Does it make sense?   Look at your loop again, and at the resulting image.  Make sure the logic of the code explains the resulting image transformation.
 * Modify your new function so that the transformation affects another side of the image.
 <br />
@@ Line 431: / Line 434: @@
 Note that Moodle cannot run and display graphics program.  This is why you are submitting a copy of the image you generated.  This is also why you won't be able to run or evaluate the program on Moodle.
 <br />
+</onlydft>
 <br />
 <!-- ================================================================= -->

Difference between revisions of "CSC111 Lab 10 2018"

Latest revision as of 14:00, 1 June 2018

Solution Program

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Tools