CS 115 Lab 5, Part B: Draw a graph

[Back to lab instructions]


Introduction

In this part of the lab, you'll draw a line graph connecting the points that you read in. To draw the graph, you will first draw a line segment between the first two points. Then, you'll draw a line between the second and third, the third and fourth, etc.

To draw a line segment using the graphics library, you need to provide its two endpoints. Then, you can color and draw the line just like you did with rectangles and circles. For example:

line = Line(Point(0, 0), Point(50, 50))  # Line from (0, 0) to (50, 50)
line.setOutline('orange')  # Color the line orange
line.draw(window)  # Draw it in the window

There are two issues to be aware of:

Answer Question 6 in your writeup. You will need to look back at your output from Part A or look at points-test.txt to to answer this question.


Instructions

  1. Create a new Python source code file named lab05b.py:
    """
    Program: CS 115 Lab 5b
    Author: Your name
    Description: This program draws a line graph.
    """
    from graphics import *
    
    
    def main():
        window_height = 600
        window = GraphWin('Graph', 800, window_height)
    
        # Open the input file and read the number of points
        pointsfile = open("points-test.txt", "r")
        num_points = int(pointsfile.readline())
    
        # ---- Draw a line between the first and second points
        x = 20  # see note above
        first_y = int(pointsfile.readline())   # get the first y-coordinate
        first_point = Point(x, window_height - first_y)  # see note above
    
        second_y = int(pointsfile.readline())  # get the second y-coordinate
        x = x + 10
        second_point = Point(x, window_height - second_y)
    
        # Draw a line between the first two points
        line = Line(first_point, second_point)
        line.setOutline('orange')
        line.draw(window)
    
        # Draw a circle centered at the first point
        circle = Circle(first_point, 1)
        circle.draw(window)
    
        #### Line A (for writeup)
    
        # ---- Draw a line between the second and third points
        first_point = second_point    # the first point of the second line
        second_y = int(pointsfile.readline())  # read the third point
        x = x + 10
        second_point = Point(x, window_height - second_y)
    
        # Draw the next line
        line = Line(first_point, second_point)
        line.setOutline('orange')
        line.draw(window)
    
        # Draw the second point
        circle = Circle(first_point, 1)
        circle.draw(window)
    
        #### Line B (for writeup)
    
        # ---- Draw a line between the third and fourth points
        first_point = second_point
        second_y = int(pointsfile.readline())  # read the third point
        x = x + 10
        second_point = Point(x, window_height - second_y)
    
        line = Line(first_point, second_point)
        line.setOutline('orange')
        line.draw(window)
    
        # Draw the third point
        circle = Circle(first_point, 1)
        circle.draw(window)
    
        # Draw the fourth point
        circle = Circle(second_point, 1)
        circle.draw(window)
    
        #### Line C (for writeup)
    
        window.getMouse()
        window.close()
    
    main()
    
  2. Read through the code very carefully. Notice that the endpoints of each of the lines that we have drawn are called first_point and second_point. In addition, the second point of the first line becomes the first point of the second line. The second point of the second line becomes the first point of the third line. That is why after having drawn the first line, we do the following in preparation for drawing the second line:
    first_point = second_point
    We do the same after having drawn the second line in preparation for drawing the third line.
  3. Answer Question 7 in your writeup. You will need to look back at your output from Part A or look at points-test.txt to to answer this question.
  4. We know that we have many lines of this type to draw. Therefore, we will use a loop for this purpose. The question is how do we set up this loop? Here is an incomplete main function for it:
    def main():
        window_height = 600
        window = GraphWin('Graph', 800, window_height)
    
        # Open the input file and read the number of points
        pointsfile = open("points-test.txt", "r")
        num_points = int(pointsfile.readline())
    
        x = 20
        first_y = int(pointsfile.readline())   # get the first y-coordinate
        first_point = Point(x, window_height - first_y)
    
        # We already have the first point, so start with 1.
        for i in range(1, num_points):
            # Read the next point and update x
            second_y = int(pointsfile.readline())
            x += 10
            second_point = Point(x, window_height - second_y)
            
            ######## COMPLETE THE CODE
            # draw the line between first_point and second_point.
            # draw a circle centered at first_point
    
            # use the second point of this line for the first point of the next line
            first_point = second_point  
    
        ######## COMPLETE THE CODE
        # again, draw a circle centered at first_point  # Why? for the last point.
    
        window.getMouse()
        window.close()
    
  5. Complete the code to draw the graph that is represented by all the points. The graph should be similar to the following image:
    Line graph of points
  6. Demo your code for a lab instructor, and then continue to Part C.