Today: Canvas drawing, running in PyCharm from command line

Download draw1 Example Project

draw1.zip

Expand the .zip to get a "draw1" folder with .py files in it. Run PyCharm. Use Open... menu to open the ***folder***

Then use the "Terminal" tab at lower left to run by command line as shown below

Command Line is the - "pro" way to control the compouter.

Drawing on a Canvas

• Have manipulated pixels, each rgb
• Today: draw lines, rectangles, ovals on canvas
• Every computer system has a "canvas" facility
• noun.verb functions on the canvas to draw on it
• canvas.draw_line(...)
• canvas.fill_rect(...)
• canvas upper left is (0, 0)
• Same coords as pixels
• x grows right, y grows down

Draw Canvas

We'll use the CS106A "DrawCanvas" which supports these functions:

    def draw_line(x1, y1, x2, y2):
        """
        Draws a black line between points x1,y1 and x2,y2
        Optional color='red' parameter can specify a color.
        """

    def draw_rect(x, y, width, height):
        """
        Draws a 1 pixel rectangle frame with its upper left at x,y
        and covering width, height pixels.
        Takes optional color='red' parameter.
        """

    def fill_rect( x, y, width, height):
        """
        Draws a solid black rectangle with its upper left at x,y
        and covering width, height pixels.
        Takes optional color='red' parameter.
        """

    def draw_oval(x, y, width, height):
        """
        Draws a 1 pixel oval frame with its upper left bounding rect at x,y
        and covering width, height pixels.
        Takes optional color='red' parameter.
        """

    def fill_oval(x, y, width, height):
        """
        Draws a solid black oval with its upper left bounding rect at x,y
        and covering width, height pixels.
        Takes optional color='red' parameter.
        """

    def draw_string(x, y, text):
        """
        Draws a black text string with its upper left at x,y
        Takes optional color='red' parameter.
        """

These are noun.verb functions on a Canvas like this:

canvas = DrawCanvas(500, 300)   # create with width,height
canvas.draw_line(0, 0, 100, 100, color='red')
...

Example (a) draw_oval_x()

def draw_oval(canvas, x, y, width, height):
    """
    Given a canvas and x,y and width,height
    Draw the "oval" figure inside these bounds.
    (this code is complete)
    """
    canvas.draw_rect(x, y, width, height)
    canvas.fill_oval(x, y, width, height, color='yellow')
    # upper-left to lower-right
    canvas.draw_line(x, y, x + width - 1, y + height - 1, color='red')
    # lower-left to upper-right
    canvas.draw_line(x, y + height - 1, x + width - 1, y, color='red')

• Code in here is complete
• Upper left is x,y
• Drawing should extend to cover width,height
• Draw 3 things:
• 1. Draw rect at boundary
• 2. Draw a yellow oval
• 3. Draw a red "x" - connecting corners

What are the left, right, top, bottom Coordinates?

• Given x,y and width,height...
• leftmost coord is x
• rightmost is x + width - 1
• topmost is y
• bottommost is y + height - 1

Run From Command Line

The main() in this case calls draw_oval() twice, once upper left and once lower right. This tests that the x,y are handled correctly. Open the "terminal" at the lower left of PyCharm. The "$" below is the prompt, the rest you type (on Windows its "python" instead of "python3".)

$ python3 draw1.py -oval 500 200

Use The Up Arrow

In the terminal, hit the up arrow. Edit the old command and run it again easily. This is a very productive and fast way to run and vary your program.

Accessibility Screen Zoom In

• "Accessibility" features: help GUI work for people with reduced vision etc.
• Can use the accessibility feature of OS to zoom in and see the exact pixels
• On the Mac: Preferences > Accessibility > Zoom, default keystroke is cmd-option-8 to turn on/off
• On Windows 10: Windows-key and + turns on. Windows-key esc turns off.

Example (b) draw_lines1()

• Lines1 figure
• Given int n, at least 2
• Draw N lines, proportionately spread out
• All start at upper left
• First line goes to upper right corner
• Last line goes to lower right corner
• Rest of lines spread evenly

How To Spread Points Proportionately

• Range loop i: for i in range(n):
  i ranges over 0..n-1
  n-1 is the max value seen for i
• Think about where lines end on the right side, at y + y_add, y_add varies per line
• Range of y_add:
  At start: 0
  At end: height -1 (call this "max")
• Write a fraction that ranges 0..1.0
• Multiply fraction * max
• Fraction is: (i / max_value_of_i)
  e.g. i / (n - 1)

for i in range(n):
    y_add = (i / (n - 1)) * (height - 1)

draw_lines1() Solution

def draw_lines1(canvas, x, y, width, height, n):
    """
    Draw the lines1 figure within x,y width,height
    """
    canvas.draw_rect(x, y, width, height)
    # Figure y_add for each i in the loop
    for i in range(n):
        y_add = (i / (n - 1)) * (height - 1)  # formula: 0..1 fraction * max
        canvas.draw_line(x, y, x + width - 1, y + y_add, color='red')

Run from command line

$ python3 draw1.py -lines1 300 200 12

Example (c) draw_lines2()

• (This is either a demo or an exercise)
• An addition to lines1
• See picture below
• Draw N green lines:
  Starting at the upper left and going down
  Ending at the bottom left and going right
• Compute x_add and y_add in the loop
• Draw the green lines - non-trivial, but very applied math here

Run from the command line:

$ python3 draw1.py -lines2 300 200 12

draw_lines2() Solution Code

def draw_lines2(canvas, x, y, width, height, n):
    """
    Draw the lines2 figure within x,y width,height
    The code for lines1 is already here
    """
    canvas.draw_rect(x, y, width, height)

    for i in range(n):
        y_add = (i / (n - 1)) * (height - 1)  # formula: 0..1 fraction * max
        canvas.draw_line(x, y, x + width - 1, y + y_add, color='red')

    # loop to draw green "lines2" lines
    for i in range(n):
        pass
        y_add = (i / (n - 1)) * (height - 1)
        x_add = (i / (n - 1)) * (width - 1)
        canvas.draw_line(x, y + y_add, x + x_add, y + height - 1, color='green')

Example (d) draw_grid1()

• Fill whole canvas with n-by-n grid
• Below for row/col grid
• Using "row" "col", to distinguish from "x" "y" pixel coords
• In this case, draw a black rect for each grid position
• Issue: how wide is each sub rectangle?
• Divide total with by n, round down
• e.g. 500 pixels width, n = 11
• Use int division to figure an int width for all sub rects
• Each sub rect will be 45 pixels wide

>>> 500 / 11
45.45454545454545    # float division with fraction
>>> 500 // 11        # int division - what we want here
45

For each row/col number, what is its x,y coord?

• What is x of upper left of row 0, row 1, ...
• What is y of col 0, col 1, ...
• Works out easily
  x = col * sub_width
  y = row * sub_height

Run from command line:

$ python3 draw1.py -grid1 600 400 12

Solution code

def draw_grid1(width, height, n):
    """
    Creates a canvas.
    Draws a grid1 of n-by-n black rectangles
    (this code is complete)
    """
    canvas = DrawCanvas(width, height, fast_draw=True)

    # Figure sizes for all sub rects
    sub_width = width // n
    sub_height = height // n

    # Loop over row/col
    for row in range(n):
        for col in range(n):
            # Figure upper left of this sub rect
            x = col * sub_width
            y = row * sub_height
            canvas.draw_rect(x, y, sub_width, sub_height)

Revisit draw_lines2()

Here is the draw_lines2() def first line:

def draw_lines2(canvas, x, y, width, height, n):
    """
    Draw the lines2 figure within x,y width,height
    The code for lines1 is already here
    """

• What does this do?
• Passed: canvas and x,y width,height n
• Draws the lines2 figure in there
• So what would the code look like to take grid above
• And fill it with lines2 figures?

Example (e) draw_grid2()

• Write code in draw_grid2()
• For each sub-rect - draw the lines2 figure
• How to make that happen easily?
• Just call the draw_lines2() function!
• Pass it the x,y width,height you want it to draw in

draw_grid2() Solution Code

def draw_grid2(width, height, n):
    """
    Creates a canvas.
    Add code to draw the lines2 figure in each grid sub rect.
    """
    canvas = DrawCanvas(width, height, fast_draw=False)

    sub_width = width // n
    sub_height = height // n

    for row in range(n):
        for col in range(n):
            pass
            # Your code here - draw a lines2 figure in each grid rect
            x = col * sub_width
            y = row * sub_height
            # key line: call the function to draw the figure here
            draw_lines2(canvas, x, y, sub_width, sub_height, n)