Introduction to Processing Workshop


What is Processing?

Processing is an "open source programming environment for teaching computational design and sketching interactive media software" developed by Ben Fry (data visualization) and Casey Reas (installation artist).

Speaking on the development of Processing, Reas says: "For us, the big idea of Processing is the tight integration of a programming environment, a programming language, a community-minded and open-source mentality, and a focus on learning -- created by artists and designers, for their own community."

Processing has a really great community around it, starting with a vast and diverse supply of tutorials on how to get started with Processing, including the publicly-available book Getting Started with Processing, around which this introduction is based, an in-depth and friendly programming reference, and very active forums and development community (creating add-ons called "Tools" to the vanilla Processing language which help make certain kinds of projects (e.g. highly interactive, physics-based programs, audio-focused), easier).

How this Workshop Will Run

  1. Explanation of templates (powerful, well-documented, adaptable code) to see what Processing is capable of
  2. Brief intro. to Processing fundamentals
  3. Working on your own, with my help

First Steps

Get access to Processing! You can download Processing here. Once you've installed, open up the program so you see something like this:

The Processing Integrated Development Environment (IDE)

Hello, World!

ellipse(50, 50, 80, 80);

First Interaction

void setup() {
     size(480, 120);
     smooth();
}
void draw() {
     if (mousePressed) {
         fill(0);
     } else {
         fill(255);
     }
     ellipse(mouseX, mouseY, 80, 80);
}

Note that you always want to format your text to be as readable by humans as possible, but that there is room for style: the tabs and such (in this language) do not effective the meaning of the code, just how it looks, so keep your code as readable as possible but format it how you like. Functionality is a mixture of creativity and utilitarianism.

  • Functions of IDE (start, stop, save, open, etc.)
  • Examples and Reference - Access via Processing itself and the online reference

Nano-Assignment 1: Find reference and documentation for ellipse

Drawing

  • Idea of Grid and Pixels (the Cartesian plane)
  • Window, Point, Shapes
  • Controlling Draw Order (back front, front back) via linearity of code compilation
  • Shape properties
  • Color
  • Transparency
  • Custom Shapes (with vertex())
  • Comments

Micro-Assignment 1: Make a Doodle/Creature/Architexture to show class!

Variables

  • Why we use Variables
  • Data Types
  • Declaration and Instantiation
  • Using operators (+, -, *, /)
  • Increment, decrement
  • Repetition (control structures): for loop,
  • Relational operators (<, data-preserve-html-node="true" >, <=, data-preserve-html-node="true" >=, ==, !=)
  • Nested for loops

Micro-Assignment 2: Use nested for loops (at least 2) to construct a pattern that fills the sketch window

Interactivity

  • draw() function
  • setup() function
  • Tracking the mouse
  • Erasing/not erasing
  • Using first derivative (distance) to change parameters on the fly
  • Smoothing (feedback, easing)
  • Mapping X-Y of mouse to different scale with map()
  • mousePressed variable (testing boolean with if)
  • Determining location (if-else structure to determine mouse left and right)
  • Bounds of shapes (circle (with dist(), rectangle)

Micro-Assignment 3: Change different color on click when mouse inside and outside rectangle

  • char variable
  • Key Presses
  • Simple Typography
  • Moving objects with Arrow keys

Media

You can download a folder of media here:

media.zip

  • Special data folder and how to use it
  • Loading an image
  • Working with fonts (loading, drawing)
  • Drawing shapes

Motion

  • Frame rate
  • Moving shapes, wrapping (one-dimensinal)
  • Bouncing (changing direction)
  • Tweening
  • Randomness
  • Draw randomly, move randomly
  • Timer
  • Polar coordinate space using sin() and cos()
  • Translate, rotate
  • pushMatrix(), popMatrix()
  • Scaling

Functions

  • Creating functions
  • Importance of code re-use (and connection to variable re-use)
  • Return values

Objects

  • Defining classes
  • Constructors, methods, data (and getters/setters)
  • Instantiating objects, making multiple objects
  • Separate files

Micro-Assignment 4: Create your own object, with data and behavior, and make two instantiations of it

Arrays

  • Importance of using arrays (abstracting data types)
  • Declare and assign arrays
  • Arrays storing history
  • Object arrays

Go to 3D land if we have extra time...


Templates

You can download templates here:

processing_templates.zip

  1. Working with Sound (Analyzing Frequency Bands of File or Mic)
  2. Working with Video (Processing and Analyzing Live Video)
  3. Shaders (High Performative Animation Generation and Image Processing)
  4. Communicating with other programs using OSC (Max, Pure Data, Ableton Live, etc.)
  5. Defining Objects That Use Other Objects (Multiple Interacting Classes)

Use(r)s of Processing