Workshop Outline

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)
  • Go to LAB: Immediate Feedback

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)
  • Intro to variables
  • Move a circle with variables - EX: Move Circle
  • Store a color in a variable - EX: Color Circle
• 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)

  • show how it works
  • EX: Basic If-Statement Demo - if (x > 200) // color change
  • try to fix the animation demo (flying off the screen)
  • LAB: Bouncing Animation - use if to change direction

Miscellaneous Extras

• Processing functions as gateway drug (more functions)
• LAB: Processing functions
• Telling your computer what to do. EXAMPLE: Draw a bear head.
• LAB: SimplerVariables - Rectangle
• LAB: Variables - Concentric Circles