Simple Graphics

Jed Rembold & Fred Agbo

February 10, 2025

Announcements

  • Grades for problem Set 2 is returned.
    • See me if you have any question regarding it. Generally looks good
  • Project #1 will be posted and it is due on Monday next week at 10pm
  • We are starting chapter 4 today Graphics
  • Polling continues https://www.polleverywhere.com/agbofred203

Understanding Check!

Which of the provided formatted string options below would evaluate to appear as:

101,234.98** & 4000

when printed?

  1. f"{101234.984:*<12,.2f} & {3200//8:<4d}"
  2. f"{101234.984:>12,.2f} & {32000//8:0>3d}"
  3. f"{101234.984:<12,f} & {320//8:0>4d}"
  4. f"{101234.984:*<12,.2f} & {32//8:0<4d}"

Nondeterministic Programming

  • For Wordle, the game is only interesting if the secret word is not the same every time!
  • Let’s look at the built-in random library, which lets us simulate random processes
  • Programs that involve random processes that cannot be predicted in advance are said to be nondeterministic
  • Nondeterministic behavior is essential to many applications.
    • Many games would not be enjoyable if they behaved the exact same way every playthrough
    • Important practical uses in simulations, computer security, and algorithm research

Important Functions in random

  • Random Integers
randint(minv, maxv) Returns an integer between minv and maxv, inclusive
randrange(limit) Returns an integer from 0 up to but not including limit
randrange(start,limit) Returns an integer from start up to but not including limit
random() Returns a random float between 0 and 1
uniform(minv, maxv) Returns a random float between minv and maxv
choice(a_list) Returns a random element from a_list
sample(a_list, k) Returns a list of k elements from a_list
shuffle(a_list) Randomly reorders the elements of a_list

Random Examples

import random

def random_redblue():
    if random.random() > 0.5:
        return "red"
    else:
        return "blue"

def random_color():
    color_string = "#"
    for i in range(6):
        color_string += random.choice("0123456789ABCDEF")
    return color

The Worth of a Picture

  • There comes a time when reading and entering text on a terminal doesn’t cut it
    • Maybe you need more complicated input
    • Maybe you need a more complicated interface that pure text can manage
    • Maybe you have output that can not be shown as text
  • Standard Python really only deals with the terminal interface
  • Lots of outside libraries give Python more visual input/output
    • Turtle
    • Matplotlib
    • Tkinter ← PGL
    • PyGame
    • Arcade

The Portable Graphics Library

  • Built atop Tkinter
  • The library (pgl.py) is available on the Canvas website here
    • 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
image/svg+xml
Test
  • 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 and lines 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

image/svg+xml blue_rectangle (0,0) (150,50) 200 px 100 px
PGL Coordinates
  • 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

Introduction to Wordle

  • Our first project will be Wordle
  • Milestone guide will be posted today
  • Not due until February 19
  • Check out Wordle game on this link
The game of Wordle

Your Responsibilities

  • We will provide you with a custom data type that will handle all the graphics and user interaction
    • Don’t worry, you’ll have a chance to implement your own GUIs later in the semester!
  • Your responsibilities will include:
    • Displaying and reading letters from boxes
    • Evaluating whether a word is valid
    • Determining what color each letter of a word should be
    • Determining when victory or defeat occurs

Your Toolbox

  • Special functions provided by the provided graphics data type: WordleGWindow
    • These will be well documented, and include, but are not limited to, things like
      • Getting or setting a letter in a particular box
      • Getting or changing the color of a given box
      • Changing which row is used when characters are entered
  • Variables and functions
  • Control statements
    • Good use of loops and if statements will be very useful
  • Basic string functions

Receiver Syntax

  • So far, all operations between or on objects have used symbols to indicate the operation

    • The + sign, for instance

  • Going forward, we will begin to see more examples of operations on objects that use receiver syntax

  • In receiver syntax, we specify the object to act on, followed by a dot and then a predefined function (called a method here) name

    obj.method_name()
    • This is like you are running this special function on the object, so you need the () at the end
    • Some methods also allow arguments, to influence exactly how the operation will proceed

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
// reveal.js plugins