CS 151: Lab 4

Title image Project 4
Spring 2020

Lab Exercise 4: Zelle Graphics

The purpose of this lab is to get you working with the Zelle graphics objects, which are a somewhat higher level graphics package than the turtle. Using the Zelle graphics primitives you can create basic shapes, move them, and change their color. As with the prior two projects, you can combine basic shapes to make complex shapes, then build a scene from complex shapes.


Tasks

We'll use the graphicsPlus.py package. You probably want to bring up the documentation in a separate tab in the browser.

  1. Setup

    In your personal file space, make a folder called project4. Then download the file graphicsPlus.py. Create a new file called messing.py. Put a comment at the top of the file with your name and the date. Save it in your Project4 folder.

    After the comment line, write the command to tell Python to import the graphics package:

    import graphicsPlus as gr
  2. Write a function to draw some shapes

    Figure out how the Zelle graphics package works

    Define a function called draw_shapes(). We're going to follow the example on the first page of the graphics documentation.

    The first step in the process is to create a window. As shown in the documentation, use the GraphWin constructor function to make a window with the specified title and size.

    win = gr.GraphWin("Messing around", 400, 400)

    + (more detail)

    Remember, because we are importing graphics as gr we will have to add gr. in front of any call to a function in the Graphics library. For example:

    c = Circle(Point(50,50), 10)
    # needs to be
    c = gr.Circle(gr.Point(50,50), 10)

    When you create a graphics object that requires points you need to use the graphics Point object. For example, to create a Circle, use the gr.Point function to create a Point that is passed to the Circle function as above.

    Drawing a Zelle graphics object into the window is a two step process. First, you need to create the object using the object's name as a function: Point(), Circle(), Rectangle(), etc. Each object requires some arguments that determine its position and size. Positions are defined by Point objects. The following line of code creates a Circle at position (100, 150) of radius 20. The documentation specifies what the arguments to each object's constructor function should be.

    mycircle = gr.Circle(gr.Point(100, 150), 20)

    The second step is to tell the object to draw itself into the window. To do that, use the name of the variable holding the object to call its draw method, and give it as an argument the variable referencing the window where you want to draw it.

    mycircle.draw( win )

    The final two lines of code in your draw_shapes() function should tell Python to wait for a mouse click in the window, then close the window. To wait for a mouse click, use the getMouse() method of the window object. To close the window, use the close() method of the window object. In both cases, use the variable referencing the window to call the appropriate function.

    win.getMouse()
    win.close()

    At the end of your messing.py file, and outside the draw_shapes function, put a call to your draw_shapes function behind a conditional that tests the value of the __name__ variable, as we did last week.

    if __name__ == "__main__":
        draw_shapes()
    						

    Once complete, test out your complex_shape program. On the terminal, make sure you are in the correct working directory and then run your program.

    python3 messing.py
  3. Draw multiple shapes

    Add more shapes to the draw_shapes() function.

    Using the graphics documentation, create and draw a rectangle and a polygon. You will need to create gr.Point objects to create them. Make sure your shapes are visible in your window. For the Zelle graphics, position (0,0) is in the upper left of the window, positive X goes right, and positive Y goes down. This is different than the turtle graphics.

    You can also experiment with filling and coloring your shapes. The Graphics Objects section of the documentation shows you the functions that are available: setFill, setOutline, and setWidth. In order to fill your circle with a color, for example, use the following code. The gr.color_rgb function is how you can specify a particular color.

    my_circle.setFill( gr.color_rgb( 200, 30, 210 ) )

    Once complete, test your program.


  4. Draw a spaceship

    Write a program that creates a spaceship using multiple shapes.

    Create a new file rocket.py. Copy and paste the following template.

    # **Your Name**
    # Spring 2020
    # Project 4
    #
    # rocket ship
    
    import graphicsPlus as gr
    
    def init_rocket(x, y, scale):
        # define the rocket shapes here and put them in a list
    
    def main():
        # Create a GraphWin window that is at least 400 x 400
    
        # assign to rocket1 the result of calling init_rocket with arguments 100, 300, 1
    
        # for each shape in rocket1
            # draw the shape into the window
    
        # wait for a mouse click
        # close the window
    
    if __name__ == "__main__":
        main()

    In rocket.py fill in the init_rocket(x, y, scale) function. The function should create the 4 shapes defined below, set their color, and return the shapes in a list.

    #Body: Create a Rectangle using points (x-scale*10, y) and (x+scale*10, y-scale*80). 
    #Set the Rectangle fill color to be a grey color (185, 185, 185).
    
    #Nose: Create a Polygon, with points (x-scale*10, y-scale*80), (x, y-scale*100 ), and (x+scale*10, y-scale*80 ). 
    #Set the Polygon fill color to be a grey-blue color (150, 170, 200 ).
    
    #L Fin: Create a Polygon, with points (x-scale*10, y), (x-scale*10, y-scale*20 ), and (x- scale*25, y+scale*5 ). 
    #Set the Polygon fill color to be a grey-red color (200, 170, 150 ).
    
    #R Fin: Create a Polygon, with points (x+scale*10, y), (x+scale*10, y-scale*20 ), and (x+scale*25, y+scale*5 ). 
    #Set the Polygon fill color to be a grey-red color (200, 170, 150 ).
  5. Test the shapeship function

    Write a function called main() function in rocket.py.

    The function will have a similar structure to draw_shapes(). It should create a graphics window win, call the init_rocket function and assign the returned list to a variable, use a for loop to draw each shape in the list, then wait for a mouse click and close the window.

    For the project, follow the same structure as rocket.py. For each complex object make an init function that returns a list of Zelle graphics objects. Draw them into the window at various locations to create your scene.

    Once complete, test out your rocket.py again. In the terminal, make sure you are in the correct working directory and then run your program.

    Finally, update the main function so it draws three rocket ships at different locations and scales. This will require three calls to rocket_init, and you will need to draw each of the rocket lists into the window. You may want to make a function draw( shapes, win ) that handles the drawing step so you don't have to copy and paste so much code.

When you are done with the lab exercises, you may begin the project.