Lab 1: Dynamic Pictures
Bard College – Computer Science – Object-Oriented Programming

Use Processing to create a Dynamic Picture, ala Bret Victor.

Part 0 (before lab)

Write in a comment about what you hope to accomplish with your dynamic picture: what are you trying to explain (e.g., a scientific idea, a political ideology), express (e.g., an emotion, passage of time, season of the year) or explore (e.g., economics simulation, poker). If you are having a hard time thinking of an idea, I suggest you create a clock, but be creative! Specifically, think about how the static, static animation, dynamic & interactive aspects of the sketch help you make your point. Be sure to chat with your instructor or tutor about your dynamic picture plan (during the lab period) before you start implementing it.

Warm-up (in pairs)

def setup():
    size(600, 600)
 
def draw():
    fill(random(255), random(255), random(255))
    ellipse(random(width), random(height), random(40), random(40))
 
 Improve the above sketch in the following ways:
 
  1. Clear the screen when a key is pressed.
  1. Remove the black outline from the ellipses.
  1. Generate randomly sized circles instead of ellipses.
  1. Draw one randomly moving circle rather than a series of randomly placed circles.
  1. Have the circle change color based on its position.
  1. Have the circle change location based on the position of the mouse when pressed.
  1. Use colors from one particular shade rather than the entire RGB cube; consider HSB.

After each objective, swap between driver & navigator.

Pair Programming

The point of pair programming is not to (necessarily) finish the lab faster by divide and conquer. For example in this week’s lab warm-up, you should not have one person dedicated to figuring out how to clear the screen when a key is pressed, and the other person working on removing the black outline in parallel. Instead you should actively work together on the same task at the same time, each person taking a slightly different role (e.g., driver/navigator). All teams members must have a full understanding of the entire project, as if each member wrote the entire thing alone.

Driver/Navigator
Decide on the initial driver (types) and the navigator (guide); if you have three members, one of the two navigators can take notes and be in charge of reading the documentation Importantly: rotate roles. You can read more about the ‘driver/navigator’ style of pair programming in the essay by Böckeler & Siessegger, an important point they raise:

  • “Apply the ‘5 seconds rule’: When the navigator sees the driver do something "wrong" and wants to comment, wait at least 5 seconds before you say something - the driver might already have it in mind, then you are needlessly interrupting their flow. As Navigator, don't immediately point out any error or upcoming obstacle: Wait a bit for the driver to correct or write a sticky note to remember later. If you intervene immediately, this can be disruptive to the driver's thinking process.”

Part 1: Dynamic Picture (not in pairs)

Realize your dynamic picture as a processing sketch in Python. Be sure to indicate using comments the pieces of your program that realize the static, static animation, dynamic & interactive aspects of your dynamic picture plan (part 0). Consider using date, time, timers or the simple physics movement from class for the static animation part, and randomness for the dynamic bits. BONUS: put the four different pieces in individual functions!

Learning Objectives

  • Employ randomness for variability.
  • Employ animation techniques like easing and timers.
  • Use event handlers.
  • Use variables to remember things
  • Create a Dynamic Picture with code.
  • Pair Program

Submission (due September 16th, 2021)

  • Your sketch should start with a comment that includes your name, emails, date, assignment description & collaboration statement.
  • Bring a hardcopy of your programs (the source code, not the graphics) to your next lab period.