Workshop Outline - PasDeChocolat/PNMProcessingWorkshop GitHub Wiki

Here's what we'll cover. Consider this a roadmap.

Core concepts are in italics. Labs and examples link to their respective sketch examples.

Each section (bullet point) listed below should take about 15 minutes to cover.

  • Inspiration (Why are we here?) (BOTH)
  • Introductions
    • Kevin (KEVIN)
    • Kyle (KYLE)
  • Immediate feedback - Draw a square and break it! (KYLE)

BREAK (15 minutes)

  • What is programming? (KEVIN)
  • Demo of paper instructions lab (KYLE)
  • Paper Lab 1: (KYLE)
    • write instructions to draw a thing (ex: flower, car, building, other)
    • try to be as explicit as possible
    • one programmer, 2 or 3 computers
    • goal: each "computer" will produce the same result
  • Coordinates overview (KEVIN)
  • Paper Lab 2 w/ Manipulatives: (KYLE)
    • strict instructions with physical paper instructions
    • ellipse, line, rect
    • with semicolons on the end (exact replica of real syntax) so they've seen it
    • If you'd like to print some out for yourself. Use this template.

BREAK (15 minutes)

  • First Processing Lab (KEVIN)
    • introduce the semicolon, it's like a period at the end of the sentence
    • enter the same program into the Processing editor
    • run it
  • Checkpoint, everyone is running (KYLE)
    • add extra credit: another drawing, Processing Help/Reference for 2D primitives

LUNCH (1 hour)

  • What is Processing? (KEVIN)
  • Color (KEVIN)
    • introduce/review RGB
    • color picker
    • demo: stroke and fill
    • LAB: add color to your program from manipulatives (first processing lab)
  • Variables (KYLE)
  • Variables LAB: colors with variables (KYLE)
    • draw simple shapes
    • change the colors manually
    • add color variables
    • change colors with variables
    • demonstrate naming of colors
    • adjust multiple shapes' colors at once
    • Go to LAB: Variables Simple Shapes

BREAK (15 minutes)

Checkpoint here, to see when to short-circuit to mouseX/Y interaction + bouncing animation
  • Animation Movie
    • setup and draw (KEVIN)
    • setup one time
    • animation via flipbook
    • explain what a frame is
    • motion picture frame rate is 24 fps
  • Animation in Processing (KYLE)
    • looping in draw
    • code in draw runs once per frame
    • this is a loop
    • processing default frameRate is 60
    • EX: Animate Circle
Checkpoint here, to see when to short-circuit to mouseX/Y interaction + bouncing animation

  • Interactivity (KEVIN)

    • Using mouseX and mouseY - ties into variables
    • LAB: circle we can move with the mouse: ellipse(mouseX, mouseY, 10, 10) in draw() loop

  • Animating with Velocity (KEVIN)

    • increment variables
    • variable for velocity: v = 1;
    • x postion x = x + v;
    • position change, increase and flies off screen
    • problem statement: how do we keep it from flying off the screen

  • if statement (KYLE)

Miscellaneous Extras