Drawing Functions

Announcements

• Problem Set 3 due on Friday night!
  • Remember you can contact your section leader if you have questions as well
  • You’ll absolutely have everything to complete it after today
• Project guide for Wordle posted!
• Polling: rembold-class.ddns.net

Receiver Syntax

An Approach to Success

• Each project is accompanied by a highly detailed guide: read it!
  • Explains background ideas so that you can understand the big picture of what you are needing to do
  • Also included a breakdown of individual milestones
    • A milestone is a discrete checkpoint that you should ensure is working (and that you understand!) before moving on
• Projects are all about managing complexity. If you start trying to implement milestones out of order, you are asking for disaster
• Don’t let yourself get overwhelmed by scale. Focus on one particular milestone at a time, which should involve focusing only on a small part of your overall code

The Worth of a Picture

The Portable Graphics Library

• Built atop Tkinter
• The library (pgl.py) is available on the website
  • Put it in the same folder as your code, and then you can import it
• Operates on the idea of a collage or cork-board

• Note that newer objects can obscure older objects. This layering arrangement is called the stacking order.

The Pieces

• At its simplest then, we have two main parts:
  • The window (or felt-board/cork-board)
    • Created with the GWindow function
    • Takes two arguments: a width and a height in pixels
  • The contents
    • A wide assortment of shapes that can be added to the scene
    • Control over where they are placed, how large they are, what color they are, etc

Blue Rectangle!

from pgl import GWindow, GRect

GW_WIDTH = 500
GW_HEIGHT = 200

gw = GWindow(GW_WIDTH, GW_HEIGHT)
rect = GRect(150, 50 ,200, 100)
rect.set_color("Blue")
rect.set_filled(True)
gw.add(rect)

The Coordinate System

• Positions and distances on the screen are measured in terms of pixels
• The location of the origin and orientation of the y-axis are different from math!
  • Origin is in the upper left instead of lower left
  • Y-values increase as you move downwards

Other Simple Objects

Functions to create simple geometric objects:

• Rectangles!
  • GRect( x, y, width, height )
  • Creates a rectangle whose upper left corner is at (x,y) of the specified size
• Circles/Ovals!
  • GOval( x, y, width, height )
  • Creates an oval that fits inside the rectangle with the same dimensions
• Lines!
  • GLine( x1, y1, x2, y2 )
  • Creates a line extending from (x1,y1) to (x2,y2)

The GObject Hierarchy

• The types of graphical objects form a hierarchy:

• The GObject type represents the collection of all graphical objects
• The GFillableObject type represents those that have a fillable interior

Interacting with the GWindow

• We’ve already shown creation:

  gw = GWindow(width, height)

• You have several more operations that you can apply to the GWindow object:

Interacting with GObjects

• The following operations apply to all GObjects, where object is the name of any specific instance.

• All coordinates and distances are measured in pixels

Interacting with GFillableObjects

• Fillable GObjects have a smaller subset of commands that also apply to them.
• Initially the only fillable objects available to you are rectangles and ovals

Smile!

gw = GWindow(400, 400)

head = GOval(20, 20, 360, 360)
head.set_fill_color("yellow")
head.set_filled(True)
gw.add(head)

reye = GOval(110, 100, 40, 40)
reye.set_filled(True)
gw.add(reye)

leye = GOval(250, 100, 40, 40)
leye.set_filled(True)
gw.add(leye)

mouth = GLine(150, 250, 250, 250)
mouth.set_line_width(5)
gw.add(mouth)

Review Question

Which of the below images would be produced by the following code?

gw = GWindow(200,200)
for c in range(0,10):
    for r in range(0,10):
        rect = GRect(20*c,20*r,20,20)
        if (r+c) % 2 != 0:
            rect.set_filled(True)
    gw.add(rect)

Label It!

• Sometimes you need to add some text to the window

• Can display any string using GLabel using the following format:

  msg = GLabel(string_to_add, x_location, y_location)

• Here string_to_add is the text you want to display, and x_location and y_location are the (x,y) coordinates of where you want to place the origin of the label.

Label Geometry

Interacting with Labels

Label Example

gw = GWindow(500, 200)
msg = GLabel("hello world!", 50, 100)
msg.set_font("italic bold 80px 'times new roman'")
gw.add(msg)

Centering a GLabel

Centering Example

gw = GWindow(500, 200)
msg = GLabel("hello world!")
msg.set_font("italic bold 20px 'times new roman'")
x = gw.get_width()  / 2 - msg.get_width()  / 2
y = gw.get_height() / 2 + msg.get_ascent() / 2
gw.add(msg, x, y)