Difference between revisions of "CSC111 Lab 7 2018"

From dftwiki3
Jump to: navigation, search
(Created page with "~~~~ ---- <br /> <br /> <bluebox> In this lab you will play with a graphics library. A graphic library typically allows the user to draw simple shapes on the screen. You...")
 
 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
----
 
----
 
<br />
 
<br />
 
+
<onlydft>
 
+
[[Image:TAXI.jpg|center|250px]]
 
<br />
 
<br />
 
<bluebox>
 
<bluebox>
In this  lab you will play with a graphics library.  A graphic library typically allows the user to draw simple shapes on the screen.  You will also write some boolean functions that will help you control the dynamic movement of objects on the screen.  When your programs for the challenges work, make sure to demonstrate your solutions to the lab instructor (or the TA).  You must submit your solution program to Moodle before Friday 10/23/15 at 11:55 p.m.
+
In this  lab you will be using a graphics ''library''.  A graphic library typically allows the user to draw simple shapes on the screen.  You will also write some boolean functions that will help you control the dynamic movement of objects on the screen.  When your programs for the challenges work, make sure to demonstrate your solutions to the lab instructor (or the TA).  You must submit your solution program to Moodle before Friday 03/23/18 at 11:55 p.m.
 
<br />
 
<br />
''' ''Note:''  Everything in this lab is new! Don't worry if you don't get everything right.  The important thing is to get the graphics library to work, and for you to start understanding how to define simple graphic shapes.  We will have a chance cover and review all these new functions and concepts in future lectures.'''
+
''' ''Note:''  Working with graphics is new. Don't worry if you don't get everything right away.  The important thing is to get the graphics library to work, and for you to start understanding how to define simple graphic shapes.'''
 
</bluebox>
 
</bluebox>
 
<br />
 
<br />
Line 238: Line 238:
 
         # if the center is outside the right or left boundary,
 
         # if the center is outside the right or left boundary,
 
         # reverse the x direction of movement.
 
         # reverse the x direction of movement.
         if  x > 600 or x < 0:
+
         if  x > 600:
 +
            dx = -dx
 +
        if  x < 0:
 
             dx = -dx
 
             dx = -dx
  
Line 264: Line 266:
 
|-  
 
|-  
 
|   
 
|   
==Challenge 2==  
+
==Challenge #2==  
 
|}  
 
|}  
 
[[Image:QuestionMark1.jpg|right|120px]]  
 
[[Image:QuestionMark1.jpg|right|120px]]  
Line 280: Line 282:
 
|
 
|
  
==Challenge 3==  
+
==Challenge #3==  
 
|}  
 
|}  
 
[[Image:QuestionMark2.jpg|right|120px]]  
 
[[Image:QuestionMark2.jpg|right|120px]]  
Line 292: Line 294:
 
<br />  
 
<br />  
 
<br />  
 
<br />  
<br />
 
 
=Adding an Obstacle=
 
<br />
 
* Add a rectangle in the middle of the graphic window.  You should declare it at the beginning of your main() function, as illustrated here:
 
<br />
 
::<source lang="python">
 
def main():
 
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )
 
 
    # create a green obstacle in the middle of the window
 
    x1 = 200
 
    y1 = 200
 
    x2 = 250
 
    y2 = 250
 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
 
    obstacle1.setFill( "green" )
 
    obstacle1.draw( win )
 
 
    # the remaining part of your code follows below...
 
</source>
 
<br />
 
<br />
 
<!-- ----------------------------------------------------------------------------------------------- -->
 
{| style="width:100%; background:silver"
 
|-
 
 
==Challenge 4==
 
|}
 
[[Image:QuestionMark3.jpg|right|120px]]
 
<br />
 
* Make your ball stop when its center enters the green rectangle.  The image below illustrates this situation.
 
<br />
 
<center>[[Image:ballStoppedOnGreenRect.png|300px]]</center>
 
<br />
 
<br />
 
* Hints: to make an object stop, you can simply set its displacement to 0, so that the while-loop makes it move by 0 pixels every loop. 
 
<br />
 
 
<br />  
 
<br />  
 
<!-- ----------------------------------------------------------------------------------------------- -->  
 
<!-- ----------------------------------------------------------------------------------------------- -->  
Line 336: Line 300:
 
|
 
|
  
==Challenge 5==  
+
==Challenge #4==  
 
|}  
 
|}  
 
[[Image:QuestionMark4.jpg|right|120px]]  
 
[[Image:QuestionMark4.jpg|right|120px]]  
 
<br />  
 
<br />  
* Modify your program one more time, and this time the ball will bounce off the obstacleWhen you detect that the center of the ball is inside the green rectangle, change <tt>dx</tt> and <tt>dy</tt> to their opposite.  Note that this will make the ball bounce back on the same path it came from.  It is quite challenging to make the ball bounce in a realistic way, and you are welcome to try to make it happen, but it's trickier.  Bouncing off in the opposite direction is fine for this lab!
+
* Modify your program and make it move around a square and a circleBoth will have different directions, different speeds, and will bounce off the edges of the window.
<br />
 
::<source lang="python">
 
if  ... :
 
    dx = -dx
 
    dy = -dy
 
</source>
 
<br />
 
<br />
 
<br />
 
<br />
 
<br />
 
<br />
 
  
=Adding a Second Obstacle=
 
<br />
 
* Add a second rectangle in the graphic window.  Make it magenta in color.  You should declare it at the beginning of your main() function, as illustrated here:
 
<br />
 
::<source lang="python">
 
def main():
 
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )
 
 
    # create a green obstacle in the middle of the window
 
    x1 = 200
 
    y1 = 200
 
    x2 = 250
 
    y2 = 250
 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
 
    obstacle1.setFill( "green" )
 
    obstacle1.draw( win )
 
 
    # create another green rectangle on the right of the first one
 
    x3 = 350
 
    y3 = 200
 
    x4 = 400
 
    y4 = 250
 
    obstacle2 = Rectangle( Point( x3, y3 ), Point( x4, y4 ) )
 
    obstacle2.setFill( "magenta" )
 
    obstacle2.draw( win )
 
 
 
    # the remaining part of your code follows below...
 
</source>
 
<br />
 
* Feel freel to position it at a different location than the one used above.
 
 
<br />  
 
<br />  
<!-- ----------------------------------------------------------------------------------------------- -->
 
{| style="width:100%; background:silver"
 
|-
 
 
==Challenge 6==
 
|}
 
[[Image:QuestionMark5.jpg|right|120px]]
 
 
<br />  
 
<br />  
* Make your ball stop when its center is fully inside the first green obstacle, and bounce off the magenta obstacle.  For this challenge, simply make the ball bounce off the second obstacle when its center enters the obstacle.
 
* If you find that the ball never gets to hit both boxes, you may want to change the initial direction and add decimal digits to the dx and dy to create an angle that yields a path that eventually will hit the obstacles.  For example:
 
<br />
 
::<source lang="python">
 
    dx = 5.111
 
    dy = -2.51
 
</source>
 
<br />
 
 
 
  
<br />
 
  
 
<br />
 
<center>[[Image:ballWithGreenAndMagentaRects.png|300px]]</center>
 
<br />
 
 
<br />
 
<br />
 
<br />
 
<br />
 
=Moodle Submission=
 
=Moodle Submission=
 
<br />
 
<br />
* Take a screen capture of the graphics window showing the ball and the two obstacles, and submit the jpg or png file to Moodle, in the Lab 7 section.
+
* Take a screen capture of the graphics window showing the ball and the square, and submit the jpg or png file to Moodle, in the Lab 7 section.
 
:* Information on how to capture a portion of the screen on Macs can be found [https://support.apple.com/en-us/HT201361 here].
 
:* Information on how to capture a portion of the screen on Macs can be found [https://support.apple.com/en-us/HT201361 here].
 
:* Information on how to capture a portion of the screen on Windows can be found [http://windows.microsoft.com/en-us/windows/take-screen-capture-print-screen#take-screen-capture-print-screen=windows-8 here].
 
:* Information on how to capture a portion of the screen on Windows can be found [http://windows.microsoft.com/en-us/windows/take-screen-capture-print-screen#take-screen-capture-print-screen=windows-8 here].
Line 515: Line 414:
 
<br />
 
<br />
 
<br />
 
<br />
 +
</onlydft>
 
<showafterdate after="20180324 00:06" before "20180601 00:00">
 
<showafterdate after="20180324 00:06" before "20180601 00:00">
 
=Solution Programs=
 
=Solution Programs=

Latest revision as of 12:58, 1 June 2018

D. Thiebaut (talk) 15:13, 18 March 2018 (EDT)




...

<showafterdate after="20180324 00:06" before "20180601 00:00">

Solution Programs


The programs below show the evolution of the initial program through many transformations, solving the various challenges contained in this lab.

Mondrian.py


# Lab7_Mondrian.py
from graphics import *
from random import *

def main():
    win = GraphWin("Lab 7", 600,600)

    for i in range( 100 ):
        x1 = randint(0, 600 )
        y1 = randint(0, 600 )
        x2 = randint(0, 600 )
        y2 = randint(0, 600 )

        r = Rectangle( Point(x1,y1), Point(x2, y2) )
        
        red   = randint( 0, 255 )
        green = randint( 0, 255 )
        blue  = randint( 0, 255 )
        
        color = color_rgb( red, green, blue )
        r.setFill( color )
        r.draw( win )

    win.getMouse()
    win.close()
    
main()


demo0.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin("Demo #0", 400, 300)
    c = Circle(Point(50,50), 10)
    c.draw(win)
    win.getMouse() # Pause to view result
    win.close()    # Close window when done

main()


demo1.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin("Demo #0", 600, 400)
    
    c1 = Circle( Point(50,150), 20 )
    c1.draw( win )
    c2 = Circle( Point( 100, 150 ), 20 )
    c2.draw( win )

    r1 = Rectangle( Point( 10, 100 ), Point( 150, 150 ) )
    r1.draw( win )
    
    win.getMouse() # Pause to view result
    win.close()    # Close window when done

main()


demo2.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin( "Lab 7 Demo", 600, 400 )

    # create and draw a red circle
    center = Point( 100, 100 )
    circ = Circle( center, 30 )
    circ.setFill( 'red' )
    circ.draw( win )

    # add a label inside the circle
    label = Text( center, "red circle" )
    label.draw( win )

    # create and draw a rectangle
    rect = Rectangle( Point( 30, 30 ), Point( 70, 70 ) )
    rect.draw( win )

    
    win.getMouse() # Pause to view result
    win.close()    # Close window when done

main()


demo3.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create and draw a red circle
    center = Point( 100, 100 )
    circ = Circle( center, 30 )
    circ.setFill( 'red' )
    circ.draw( win )

    
    dx = 5
    dy = 0.25
    
    while win.checkMouse() == None:
        circ.move( dx, dy )
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()
        if ( x > 600 ):
            dx = -dx
        if ( x < 0 ):
            dx = -dx


    

    win.close()    # Close window when done

main()


demo4.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create a green obstacle in the middle of the window
    x1 = 200
    y1 = 200
    x2 = 250
    y2 = 250 
    obstacle = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
    obstacle.setFill( "green" )
    obstacle.draw( win )
    
    # create and draw a red circle
    radius = 30
    center = Point( 100, 100 )
    circ = Circle( center, radius )
    circ.setFill( 'red' )
    circ.draw( win )

    # define the direction the circle will start moving in.
    # 5 pixels to the right every move, and 0.25 pixels down
    # every move.
    dx = 5
    dy = 2.5

    # as long as the mouse hasn't been clicked on the window
    # keep on looping.
    while win.checkMouse() == None:

        # move the circle in the current direction.
        circ.move( dx, dy )

        # get the x and y of the center of the circle.
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()

        # if the center of the ball is outside the right or left boundary,
        # reverse the x direction of movement.
        if  x > 600 - radius or  x < radius: 
            dx = -dx
        if  y > 400 - radius or y < radius:
            dy = -dy

        # if the center of the ball is inside the obstacle, stop
        # the ball.
        if  x1 < x < x2 and y1 < y < y2 :
            dx = 0
            dy = 0

    
    # if we're here, it's because the the user clicked on the graphic window.
    # we can close everything and quit.
    win.close()    

main()


demo5.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create a green obstacle in the middle of the window
    x1 = 200
    y1 = 200
    x2 = 250
    y2 = 250 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
    obstacle1.setFill( "green" )
    obstacle1.draw( win )

    # create another green rectangle on the right of the first one
    x3 = 350
    y3 = 200
    x4 = 400
    y4 = 250 
    obstacle2 = Rectangle( Point( x3, y3 ), Point( x4, y4 ) )
    obstacle2.setFill( "magenta" )
    obstacle2.draw( win )
    
    # create and draw a red circle
    radius = 30
    center = Point( 100, 100 )
    circ = Circle( center, radius )
    circ.setFill( 'red' )
    circ.draw( win )

    # define the direction the circle will start moving in.
    # 5 pixels to the right every move, and 0.25 pixels down
    # every move.
    dx = 5.1
    dy = 2.51

    # as long as the mouse hasn't been clicked on the window
    # keep on looping.
    while win.checkMouse() == None:

        # move the circle in the current direction.
        circ.move( dx, dy )

        # get the x and y of the center of the circle.
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()

        # if the center of the ball is outside the right or left boundary,
        # reverse the x direction of movement.
        if  x > 600 - radius or  x < radius: 
            dx = -dx
        if  y > 400 - radius or y < radius:
            dy = -dy

        # if the center of the ball is inside the first obstacle, stop
        # the ball.
        if  x1 < x < x2 and y1 < y < y2 :
            dx = 0
            dy = 0

        # if the center of the ball is inside the second obstacle, bounce
        # off
        if  x3 < x < x4 and y3 < y < y4 :
            dx = -dx
            dy = -dy

    
    # if we're here, it's because the the user clicked on the graphic window.
    # we can close everything and quit.
    win.close()    

main()


demo6.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

# ifInside: returns true of the coordinates of a point defined by 
# its coordinates ballX and ballY, are inside the rectangle defined by a top
# left point of coordinates obsX1, obsY1, and a bottom-right point
# with coordinates obsX2, obsY2.   Returns false if the point is outside
# the rectangle.
def isInside( ballX, ballY, obsX1, obsY1, obsX2, obsY2 ):
    if obsX1 < ballX < obsX2 and obsY1 < ballY < obsY2:
        return True
    else:
        return False

    
def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create a green obstacle in the middle of the window
    x1 = 200
    y1 = 200
    x2 = 250
    y2 = 250 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
    obstacle1.setFill( "green" )
    obstacle1.draw( win )

    # create another green rectangle on the right of the first one
    x3 = 350
    y3 = 200
    x4 = 400
    y4 = 250 
    obstacle2 = Rectangle( Point( x3, y3 ), Point( x4, y4 ) )
    obstacle2.setFill( "magenta" )
    obstacle2.draw( win )
    
    # create and draw a red circle
    radius = 30
    center = Point( 100, 100 )
    circ = Circle( center, radius )
    circ.setFill( 'red' )
    circ.draw( win )

    # define the direction the circle will start moving in.
    # 5 pixels to the right every move, and 0.25 pixels down
    # every move.
    dx = 5.111
    dy = -2.51

    # as long as the mouse hasn't been clicked on the window
    # keep on looping.
    while win.checkMouse() == None:

        # move the circle in the current direction.
        circ.move( dx, dy )

        # get the x and y of the center of the circle.
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()

        # if the center of the ball is outside the right or left boundary,
        # reverse the x direction of movement.
        if  x > 600 - radius or  x < radius: 
            dx = -dx
        if  y > 400 - radius or y < radius:
            dy = -dy

        # if the center of the ball is inside the first obstacle, stop
        # the ball.
        if  isInside( x, y, x1, y1, x2, y2 ):
            dx = 0
            dy = 0

        # if the center of the ball is inside the second obstacle, bounce
        # off
        if  isInside( x, y, x3, y3, x4, y4 ):
            dx = -dx
            dy = -dy

    
    # if we're here, it's because the the user clicked on the graphic window.
    # we can close everything and quit.
    win.close()    

main()


demo7.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

# ifInside: returns true of the coordinates of a point defined by 
# its coordinates ballX and ballY, are inside the rectangle defined by a top
# left point of coordinates obsX1, obsY1, and a bottom-right point
# with coordinates obsX2, obsY2.   Returns false if the point is outside
# the rectangle.
def isInside( ballX, ballY, obsX1, obsY1, obsX2, obsY2 ):
    if obsX1 < ballX < obsX2 and obsY1 < ballY < obsY2:
        return True
    else:
        return False

def isLeftSide( x, y, width ):
    if x < width//2:
        return True
    else:
        return False
    
def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create a green obstacle in the middle of the window
    x1 = 200
    y1 = 200
    x2 = 250
    y2 = 250 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
    obstacle1.setFill( "green" )
    obstacle1.draw( win )

    # create another green rectangle on the right of the first one
    x3 = 350
    y3 = 200
    x4 = 400
    y4 = 250 
    obstacle2 = Rectangle( Point( x3, y3 ), Point( x4, y4 ) )
    obstacle2.setFill( "magenta" )
    obstacle2.draw( win )
    
    # create and draw a red circle
    radius = 30
    center = Point( 100, 100 )
    circ = Circle( center, radius )
    circ.setFill( 'red' )
    circ.draw( win )

    # define the direction the circle will start moving in.
    # 5 pixels to the right every move, and 0.25 pixels down
    # every move.
    dx = 5.111
    dy = -2.51

    # as long as the mouse hasn't been clicked on the window
    # keep on looping.
    while win.checkMouse() == None:

        # move the circle in the current direction.
        circ.move( dx, dy )

        # get the x and y of the center of the circle.
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()

        # if the center of the ball is outside the right or left boundary,
        # reverse the x direction of movement.
        if  x > 600 - radius or  x < radius: 
            dx = -dx
        if  y > 400 - radius or y < radius:
            dy = -dy

        # if the center of the ball is inside the first obstacle, stop
        # the ball.
        if  isInside( x, y, x1, y1, x2, y2 ):
            dx = 0
            dy = 0

        # if the center of the ball is inside the second obstacle, bounce
        # off
        if  isInside( x, y, x3, y3, x4, y4 ):
            dx = -dx
            dy = -dy

        # if the ball is on the left side of the window, its color is
        # red, else its color is yellow.
        if isLeftSide( x, y, win.getWidth() )==True:
            circ.setFill( 'red' )
        else:
            circ.setFill( 'yellow' )
            
    
    # if we're here, it's because the the user clicked on the graphic window.
    # we can close everything and quit.
    win.close()    

main()



demo8.py


# Uses graphics.py from Zelle
#
# This program displays the basic elements of a program
#
from graphics import *

# ifInside: returns true of the coordinates of a point defined by 
# its coordinates ballX and ballY, are inside the rectangle defined by a top
# left point of coordinates obsX1, obsY1, and a bottom-right point
# with coordinates obsX2, obsY2.   Returns false if the point is outside
# the rectangle.
def isInside( ballX, ballY, obsX1, obsY1, obsX2, obsY2 ):
    if obsX1 < ballX < obsX2 and obsY1 < ballY < obsY2:
        return True
    else:
        return False

def isLeftSide( x, y, width ):
    if x < width//2:
        return True
    else:
        return False

def getColor( x, y, w, h ):
    if x < w/2 and y < h/2:
        return 'yellow'
    elif x < w/2 and y > h/2:
        return 'blue'
    elif x > w/2 and y < h/2:
        return 'red'
    else:
        return 'brown'
        
def main():
    win = GraphWin( "Lab 7 Moving ball", 600, 400 )

    # create a green obstacle in the middle of the window
    x1 = 200
    y1 = 200
    x2 = 250
    y2 = 250 
    obstacle1 = Rectangle( Point( x1, y1 ), Point( x2, y2 ) )
    obstacle1.setFill( "green" )
    obstacle1.draw( win )

    # create another green rectangle on the right of the first one
    x3 = 350
    y3 = 200
    x4 = 400
    y4 = 250 
    obstacle2 = Rectangle( Point( x3, y3 ), Point( x4, y4 ) )
    obstacle2.setFill( "magenta" )
    obstacle2.draw( win )
    
    # create and draw a red circle
    radius = 30
    center = Point( 100, 100 )
    circ = Circle( center, radius )
    circ.setFill( 'red' )
    circ.draw( win )

    # define the direction the circle will start moving in.
    # 5 pixels to the right every move, and 0.25 pixels down
    # every move.
    dx = 5.111
    dy = -2.51

    # as long as the mouse hasn't been clicked on the window
    # keep on looping.
    while win.checkMouse() == None:

        # move the circle in the current direction.
        circ.move( dx, dy )

        # get the x and y of the center of the circle.
        x = circ.getCenter().getX()
        y = circ.getCenter().getY()

        circ.setFill( getColor( x, y, win.getWidth(), win.getHeight() ) )
                   
        # if the center of the ball is outside the right or left boundary,
        # reverse the x direction of movement.
        if  x > 600 - radius or  x < radius: 
            dx = -dx
        if  y > 400 - radius or y < radius:
            dy = -dy

        # if the center of the ball is inside the first obstacle, stop
        # the ball.
        if  isInside( x, y, x1, y1, x2, y2 ):
            dx = 0
            dy = 0

        # if the center of the ball is inside the second obstacle, bounce
        # off
        if  isInside( x, y, x3, y3, x4, y4 ):
            dx = -dx
            dy = -dy

        # if the ball is on the left side of the window, its color is
        # red, else its color is yellow.
        """
        if isLeftSide( x, y, win.getWidth() )==True:
            circ.setFill( 'red' )
        else:
            circ.setFill( 'yellow' )
        """ 
    
    # if we're here, it's because the the user clicked on the graphic window.
    # we can close everything and quit.
    win.close()    

main()



</showafterdate>