Held: Thursday, 6 February 2014

Back to Outline 02 - Math with Images: An Introduction to psaifr. On to Outline 04 - Postscript.

Summary

We start our exploration of the Processing language.

Related Pages

• Link: http://www.processing.org/
• Processing Reference: http://www.processing.org/reference/
• EBoard (Source) (HTML) (PDF)

Overview

• Processing: A bit of background.
• Why Processing?
• Processing basics.
• Examples.
• Lab.

Administrivia

• Yes, there were some interesting Git issues again, mostly because I forgot to give folks permission to access the archive.
• Assignments
  • [Assignment 3: Getting Started with Processing
  • Find and read a little about Postscript.

Background

• Developed at the MIT Media Labs by Casey Reas.
• A language for artists.
• Looks a lot like Java, but friendlier.
• Programs tend to be ugly, from a programmer's perspective.
• Large community, including sharing of (ugly) code.
• Model: Animation
• Both 2D and 3D. We'll focus on 2D.

Why Study Processing?

• Might use for implementation.
• To see a successful model of a language for artists.
  
  • (We'll leave it open as to whether it's successful in naturally teaching computational thought.)
  • We should tink about the community.
• Inspiration?

Basics

• In MathLAN (or at least in 3819) you can find processing in /glimmer/processing/processing
• Two important functions, both called implicitly.
  • setup() sets up the drawing window (and anything else)
    • size(width,height)
  • draw() - draws a frame in an ongoing animation
• Imperative/Stateful: Set state information, make drawings
• Setting state information:
  • Any global variables you want to create.
  • The current line/stroke color
    • stroke(*grey*)
    • stroke(*r*, *g*, *b*) (or maybe HSB)
  • The currentstroke weight
    • strokeWeight(*pixels*)
  • The current fill color
    • fill(*grey*)
    • fill(*r*, *g*, *b*) (or maybe HSB)
  • The color mode:
    • `colorMode(mode)
• Actions:
  • Draw a 2D line: line(*x1*,*y1*,*x2*,*y2*)
  • Draw an ellipse/oval: ellipse(*xcenter*,*ycenter*,*width*,*height*)
  • Draw a rectangle: rect(*left*,*top*,*width*,*height*)

Examples

• Demo basic operations.
• Rotating colors.
• A moving object.
• Student's code.