Factor

Calvin (Deutschbein)

W7Mon: 07 Oct

Announcements

  • Not assessing midterm because I'm sleep deprived because my flight was overbooked (fun story for another time).
    • Expect a more comprehensive narrative feedback by next Monday when, in theory, Wordle will have feedback too.
    • In general it looked like most errors were counting errors, which are the errors we want to see.
      • This class is not Intro to Doing Modular Arithmetic.
  • Problem Set 4: Graphics is posted now, for next Monday, and will be "fun" (you get to be creative).

Today

  • Graphics Window
  • Shapes
    • Size
    • Location
    • Fills
    • Colors

Blue Rectangle!

from pgl import *
gw = GWindow(500, 200)
rect = GRect(150,50,200,100)
rect.set_color("Blue")
rect.set_filled(True) 
gw.add(rect)
  • This is too much at once and skips steps.

Graphics

  • Step 1: Have 'pgl.py' in the same directory you are working in.

Boxy Click

  • PS4 Problem 3 is called "Clicky Box".
  • So today... "Boxy Click".
  • Once you have PGL, and are in e.g. Prob3.py or "boxy_click.py"
  • Start with an import: 
    from pgl import *
  • This tells Python to take all the graphics stuff from pgl and let you use it.
  • It's a bit like another way to define functions - it's just that someone else wrote the code that defines these functions.

Boxy Click

  • To see a graphics window pop up, we use "GWindow"
  • But here's the thing - we can't just call GWindow, we have to give it some size.
  • I don't have an intuitive grasp of size, but that white box is exactly 400 by 400 "pixels". 
    from pgl import *
GWindow(400,400)

Upkeep

  • Graphics can be complicated, so let's build up gradually.
  • Projects in this class, like wordle, often place the call to GWindow inside a function. from pgl import * def do_graphics(): # example name GWindow(400,400) # single indent

Upkeep

  • Graphics can be complicated, so let's build up gradually.
  • To get "do_graphics" to run when we run the file, we can't just define the function - we must call it. from pgl import * def do_graphics(): # example name GWindow(400,400) # single indent do_graphics()

Upkeep

  • In projects, this is commonly done with the following "boilerplate" from pgl import * def do_graphics(): # example name GWindow(400,400) # single indent if __name__ == '__main__': do_graphics()
  • I find this style confusing but it is common in this class.
  • It is not exactly the same as calling a function, but we can imagine it is.

Upkeep

  • Now that we know what we are using from pgl, we can specify we want to include "GWindow" rather than using the (potentially confusing) * notation. from pgl import GWindow def do_graphics(): # example name GWindow(400,400) # single indent do_graphics()
  • * includes every function inside pgl, versus including just GWindow.
  • We can add more latter!
  • I literally only ever use *, but the other notation is probably slightly more common.

Upkeep

  • Having those unlabelled '400' can be confusing - or not - so in this class they are usually defined as variables.
  • In this class, and often in Python, names in all caps are treated as both:
    • 'Global' - outside of any one function
    • 'Constant' - never changed by the code from pgl import * GW_WIDTH = 400 # Width of window GW_HEIGHT = 400 # Height of window def do_graphics(): # example name GWindow(GW_WIDTH,GW_HEIGHT) # single indent do_graphics()
    • This is a legacy of languages where 'globals' and 'constants' aren't just another variable.

Upkeep

  • I basically never want to write "GW_WIDTH" so I always add another name to refer to - usually 'w' and 'h' from pgl import * GW_WIDTH = 400 # Width of window GW_HEIGHT = 400 # Height of window w = GW_WIDTH h = GW_HEIGHT def do_graphics(): # example name GWindow(w,h) # single indent do_graphics()
  • My impression: more mistakes are caused by typos than anything else so I try to manage the volume of typing going on.

Upkeep

  • You can also just rename of course. from pgl import * w = 400 # width h = 400 # height def do_graphics(): GWindow(w,h) do_graphics()
  • My impression: more mistakes are caused by typos than anything else so I try to manage the volume of typing going on.
  • You are welcome to use this style, or the project/section leader style.

Boxy Click

  • Also I pretty much only work with squares from pgl import * w = 400 # width def do_graphics(): GWindow(w,w) do_graphics()
  • This is generally how I would make a graphics window for examples, etc.
  • I *really* like 400 because its easy to divide up for me.

Boxy Click

  • One last wrinkle: Set a variable equal to the return value of 'GWindow'. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) do_graphics()
  • In this class, this will always be 'gw' to my knowledge, but you can choose other names.
  • I often use 'g' or 'win'.

Boxy Click

  • The notion of a capturing a return value in a variable is not novel.
  • If you perceive it as novel, check out older slides and problems like 'Vegas'. >>> x = 3 >>> z = Vegas(x) >>> print("Mine: x = ", x, "| z = ", z) Mine: x = 3 | z = 9
  • Emphasis this line: >>> z = Vegas(x)

Boxy Click

  • Anyways, we need 'gw' to have a way to refer to the graphics window latter
  • We need to tell Python where to show something, like a box. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) do_graphics()
  • In this class, this will always be 'gw' to my knowledge, but you can choose other names.
  • I often use 'g' or 'win'.

Today

  • Graphics, Again
    • ✓ Graphics Window
    • Shapes
      • Size
      • Location
      • Fills
      • Colors

Boxy Click

  • Let's look back at Blue Rectangle. rect = GRect(150,50,200,100) rect.set_color("Blue") rect.set_filled(True) gw.add(rect)
  • Wow - 4 different lines to add a blue rectangle?
  • Let's break it down.

Boxy Click

  • GRect takes four integers - which is a lot of integers.
  • They are:
    • How wide
    • How tall
    • How far from the left
    • How far from the top.
    rect = GRect(150,50,200,100) # rect.set_color("Blue") # rect.set_filled(True) gw.add(rect)
  • Let's just work with that for now.

Boxy Click

  • This is code for the graphics window.
  • The graphics window is defined inside of "do_graphics"
  • So we write out graphics window code directly beneath it. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) gw.add(rect) do_graphics()
  • When we write, e.g., an essay, we write evidence for a statement right after a thesis.

Boxy Click

  • Let's see all four at once... from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) gw.add(rect) do_graphics()

Boxy Click

  • Let's only do rectangle size. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(0,0,200,100) gw.add(rect) do_graphics()

Boxy Click

  • We can tell whether tall or wide is first by testing! from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(0,0,100,200) # was 200,100 gw.add(rect) do_graphics()

Boxy Click

  • We can increase one of the locations without the other to see if the rectangle moves down or right. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,0,200,100) gw.add(rect) do_graphics()

Boxy Click

  • Ah - so rightward first. Then down. from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) gw.add(rect) do_graphics()

Boxy Click

GRect(x,y,w,h) ;
    x = y =
    w = h =

Today

  • ✓ Graphics Window
  • Shapes
    • ✓ Size
    • ✓ Location
    • Fills
    • Colors

Boxy Click

  • Let's look back at Blue Rectangle. rect = GRect(150,50,200,100) rect.set_color("Blue") rect.set_filled(True) gw.add(rect)
  • We know what the first and last do.
  • The others change something about the rectangle we add...

Boxy Click

  • What does each part do? from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) rect.set_filled(True) gw.add(rect) do_graphics()

Boxy Click

  • What does each part do? from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) rect.set_color("Blue") gw.add(rect) do_graphics()

Boxy Click

  • What does each part do? from pgl import * w = 400 # width def do_graphics(): gw = GWindow(w,w) rect = GRect(150,50,200,100) rect.set_filled(True) rect.set_color("Blue") gw.add(rect) do_graphics()

Factor

  • Why don't we just make a "rectangle" function... def do_graphics(): def my_rect(x,y,w,h,color): rect = GRect(x,y,w,h) rect.set_filled(True) rect.set_color(color) gw.add(rect) gw = GWindow(400,400) my_rect(000,000,200,200, "Blue") my_rect(100,100,200,200, "Red") do_graphics()

Today

  • Graphics Window
  • Shapes
    • Size
    • Location
    • Fills
    • Colors

Announcements

  • Not assessing midterm because I'm sleep deprived because my flight was overbooked.
    • Expect a more comprehensive narrative feedback by next Monday.
  • Problem Set 4: Graphics is posted now, for next Monday, and will be "fun" (you get to be creative).