Complex Graphics

Happy Week 8!

• No group activity today!

Quick Announcements

• Welcome from the long weekend
• Problem Set 4 is due today at 10 pm
• Project Breakout is posted and due next week Monday
• Project Wordle grading is underway.
• Attend your session meeting for more help and tools needed to succeed on the project.
• Answer this short poll here. Use ONLY your initials or an anonymous name.

Review

• Recall the Animation Problem last week Wednesday?

Problem 2: The Setup

• This is a coding problem, work in pairs or trios on a single computer
• In SquareFun.py, I’ve drawn an initial box for you
• Your task is cause the square to move horizontally across the screen such that it takes exactly 5 seconds to cross entirely

Problem 2b: The Growth

• Switch who is typing!
• Now, we want the box to also increase in size as it moves across the screen
• Until it reaches a size of 100 pixels, then it stops growing (but keeps moving)

Problem 2c: Target Time!

• Switch who is typing!
• I’ve provided you a function that “throws a dart” to a specified position
• Add a timeout so that the dart is thrown when it would strike the center of the box

Problem 2d: Moving the Dart

• Switch who is typing!
• Even if the dart hits the box, the box moves out from under it currently, which looks weird
• Add logic so that the dart is moved along with the box once it hits the board
• This will likely require accessing the same dart object in multiple callback functions, one of which assigns it. How can you manage this?

Complex Graphics: GArcs

Fillable Arcs

• The GArc class is a GFillableObject, and so you can call .set_filled() on a GArc object
• Filled like a pie-shaped wedge formed between the center of the bounding box and the starting and end points of the arc

def filled_arc():
    gw = GWindow(400, 400)
    arc = GArc(50, 50, 
               350, 350, 
               90, 135)
    arc.set_color("orange")
    arc.set_filled(True)
    gw.add(arc)

The GPolygon class

• Used to represent graphical objects bounded by line segments
  • Polygons consist of several vertices bounded by edges

• Location not fixed in upper left, but at some convenient reference point
• Often a convenient reference point is near the center of the object, but it doesn’t need to be
• GPolygons are GFillableObjects, so they can be filled

Polygonal Construction

• The GPolygon function creates an empty polygon, to which you then can add vertexes
• Can create a vertex by calling .add_vertex(x,y) on the GPolygon object
  • x and y measured relative to the reference point
• Vertexes past the first can be defined in a few ways:
  • .add_vertex(x,y) adds another new vertex relative to the reference point
  • .add_edge(dx,dy) adds a new vertex relative to the preceding vertex
  • .add_polar_edge(r, theta) adds a new vertex relative to the previous using polar coordinates

Triangle By Vertex

def triangle_by_vertex():
    def create_triangle(b, h):
        tri = GPolygon()
        tri.add_vertex(-b / 2, h / 2)
        tri.add_vertex(b / 2, h / 2)
        tri.add_vertex(0, -h / 2)
        return tri

    gw = GWindow(500, 500)
    triangle = create_triangle(200, 200)
    triangle.set_filled(True)
    triangle.set_color("red")
    gw.add(triangle, 250, 250)

Triangle by Polar Edge

def triangle_by_polar_edge():
    def create_eq_triangle(side):
        tri = GPolygon()
        tri.add_vertex(0, 0)
        for i in range(0, 360, 120):
            tri.add_polar_edge(side, i)
        return tri

    gw = GWindow(500, 500)
    triangle = create_eq_triangle(100)
    triangle.set_filled(True)
    triangle.set_color("green")
    gw.add(triangle, 250, 250)

Compound Objects

• The GCompound class makes it possible to combine several graphical objects so that the entire structure behaves as a single object
• Can be thought of as a combination of GWindow and GObject
  • You can add objects to it, but then you can also add it (and everything in it) to a window as a single unit
• Uses its own coordinate system relative to a reference point
  • When adding objects to the GCompound, you place them relative to the reference point
  • When adding the GCompound to a canvas, you set the location of the reference point

And my Axe!

def my_axe():
    def create_axe():
        axe = GCompound()
        shaft = GRect(-15, 0, 30, 300)
        shaft.set_filled(True)
        shaft.set_color("brown")
        axe.add(shaft)

        blade = GPolygon()
        blade.add_vertex(0, 0)
        blade.add_vertex(200, -50)
        blade.add_vertex(200, 50)
        blade.set_filled(True)
        blade.set_color("gray")
        axe.add(blade, -80, 50)
        return axe

    gw = GWindow(500, 500)
    axe = create_axe()
    gw.add(axe, 250, 100)

Problem 1: Tracing Understanding

Which of the below blocks of code will create the image to the right? The window measures 500 x 200 pixels and the value of d is 150.

x, y = 250 - d / 2, 100 - d / 2
a1 = GArc(x, y, d, d, 90, -180)
gw.add(a1)

x, y = 250 - d, 100 - d
a1 = GArc(x, y, d, d, -180, 90)
gw.add(a1)

x, y = 250 - d / 2, 100 - d / 2
a1 = GArc(x, y, d, d, 90, 180)
gw.add(a1)

x, y = 250 - d / 2, 100 - d / 2
a1 = GArc(x, y, d, 180, -90)
gw.add(a1)

Project 2: Breakout!

Breakout History

• The popular Breakout arcade game was released by Atari in 1976
• Atari founder Nolan Bushnell wanted a new game that would build on the success of the earlier game Pong. He assigned Steve Jobs to develop the game, promising a bonus if the game required a small number of chips.
• As Wikipedia tells the story, “Jobs had little specialized knowledge of circuit board design but knew [his friend Steve] Wozniak was capable of producing designs with a small number of chips. He convinced Wozniak to work with him, promising to split the fee evenly between them.”
• Wozniak completed the game design in four days, but Jobs never told him about the bonus offer. Jobs was paid \(\$5,000\), but Wozniak received only \(\$350\).
• Jobs and Wozniak co-founded Apple Computer the following year, which has grown to be the largest corporation in the world by market capitalization.

Breakout Basics

Breakout Milestones

• Breakout is broken up over 5 milestones
• You have already seen or written pieces of similar code to many of the milestones!
  • Milestone 1: PS4 brick pyramid
  • Milestone 3: Section bouncy ball problem (this week)

Milestones