CN Week2 Fall 2008

From Interactivity

Week 2 Class notes for Fall 2008


This Week is an Introduction to Processing.

Contents

[edit]

What is it used for??

  1. Music videos: http://benfry.com/writing/archives/142
  2. performing: Reactable musical instrument
  3. Visualizing data:


[edit]

More about it

I have a general wiki page dedicated to Processing, where you can find download links, tutorial links, etc.

There is a Processing website with a very nice reference page.

Briefly, Processing is an open source IDE (Interactive Development Environment). It is designed to assist creative people in developing software. Why would creative people want to develop software? Because drawing 10,000 lines or even 2,000,000 lines is something that the computer can do much more quickly than we can, and without complaining.

It is important to note that Processing is not a step down the road of replacing the artist with a computer. As you can probably tell by the examples on this page, it is more of a way of making the computer serve the artist creatively. Designs created on a computer can be printed, drawn on, sculpted, and even woven into blankets. They can be the starting point for inspiring a creative work, or take raw data about our world (daily temperature readings, word counts in politician's speeches, casualties of war) and present it in a more meaningful, audio-visual and possibly interactive, way.


[edit]

Basic Elements of Programming

Inspired by and adapted for MaxMSPJitter & Processing from the online textbook for programming, the [1] Structure and Interpretation of Programs]

Programming in general can be broken down into 3 basic mechanisms:

  1. primitive expressions (ints, floats, Objects, symbols): the simplest, most basic entities which our software is concerned with
  2. means of combining those to make compound expressions (in Max: lists, messages; in Processing: classes and methods or functions)
  3. means of abstracting and manipulating compound expressions (making compound expressions of compound expressions)

This hints at the most basic of things that any decent programming language can deal with: data (stuff) and procedures (ways of dealing with stuff). Sometimes, these two can be even be interchangeable!

In Max or Processing, data, or stuff, or "primitive expressions" may be midi note numbers coming into the computer from an attached midi keyboard, or screen coordinates from your mouse pointer.

A procedure, or way of dealing with this data, might be to turn them into sounds. In doing so, it may combine note data with velocity data (how hard the key was hit, how far the mouse was moved).

Abstraction comes in where we have a group of a few procedures that are each separately responsible for helping us generate the sound. One may select the proper instrument, based on the note data, then forward that instrument on to another which creates a representation of the sound using numbers, then forwards that on to a procedure that actually synthesizes the sound using your computer speakers. In Max, this is accomplished by an object, a patch, or a group of objects/patches/subpatches in a subpatch [p] object. In Processing (which is Java), this is an Object. Objects may (and usually do) contain other Objects, which themselves might contain Objects.

We will get to this in more detail next lecture. For now, lets draw on the screen!



[edit]

Lesson 1: Drawing To The Screen

Let's start with a very minimal sketch that draws two lines on the screen, and deconstruct it. 


void setup() {

  size(512,512);        // make our drawing 512 pixels wide by 512 tall
  colorMode(HSB);       // tell Processing to use hue, saturation, brightness as color values
  stroke(255,255,200);  // set the color of lines (and outlines) a bright, fully saturated red 
  strokeWeight(4);      // set the width of lines (and outlines) to be 4 pixels wide

}

void draw() {
  
  background(0);  // clear the screen to solid black
  
  line(10,10, 500,500);  // draw a diagonal line from top left to bottom right

  line(500,10, 10,500);  // draw a diagonal line from top right to bottom left

}


Let's take a look at some of that sketch in more detail:

  1. void setup() {
    • This is a method or function called setup. You can tell it is a method because of the () after its name. In a method, the () will contain any arguments that the method will use. For example, size(512,512) is a method with 2 arguments, each of which is an int. The void is the type of data returned - as you can guess, void means nothing is returned.
    • the { after setup() marks the start of its definition - the actual code of the method. There is a complimentary } at the end. Leaving one or both of these out, or putting in too many (or too few) is probably the most common typing error in software development.
    • setup() is the first method in your Processing sketch. It is required in every sketch. It is executed exactly once at the start of the sketch to set up the basics of your program, such as the screen size and any default data you'll need for later.
  2. size(512,512);
    • This tells Processing to make a sketch 512 pixels wide by 512 pixels tall. Each argument must be an int or you will get errors - which is good, because you can't physically draw on half of a pixel on your monitor.
    • note the ; at the end - every statement must end with a ;. It's like the period at the end of a sentence, in English.
  3. void draw() {
    • Like setup(), draw() is a method. It is run once every frame (unless you tell it to stop). You don't have to draw anything on the screen in draw(), but, as the name implies, you probably will.
  4. line(10,10, 500,500);
    • coordinates.gif
      Processing uses Cartesian Coordinates where the origin, e.g. the point (0,0) is in the upper left corner.
    • What does this mean for the function line() which takes 4 arguments: (start x, start y, end x, end y)?


[edit]

Data Types In Detail

Processing sketches are a series of sentences called statements. These statements are a lot like English - they contain nouns (things), verbs (actions), and adjectives (descriptions). In Java, you have two types of nouns - your basic data types which directly represent number, and more complex collections of primitive data types called Objects, which may also contain other Objects.


[edit]

Primitive Data Types

At a base level are primitive data types which are as simple as Java gets - they represent numbers, characters, or truth (true or false):

int
Integer value, which is a whole number (no fractions or decimal points)
float
A decimal, or floating point number
boolean
Either true or false
char
A single unicode character (the letter 'A', for example). A char is really a number that represents a character, which is why it is a primitive data type.
void
Every method must have some type - if it doesn't need a type, it can be of type void, which I like to think refers to the great void out there in space. In other words, nada. Nothing.

There are a few others, but we will concentrate on these main types.


[edit]

Essential Methods

There are a variety of built-in methods just waiting for your sketch can define - the two most important ones are setup() and draw(), as shown above.

Others have to with receiving data or events, such as mouse coordinates or keyboard presses:

  • mouseDragged()
  • mouseMoved()
  • mousePressed()
  • keyPressed()
  • keyReleased()

We'll look at these soon - for now, we need to understand scope.


[edit]

Bonus

  • Strings and getting output (println, + " ")


[edit]

Drawing Stuff

[edit]

Shape Attributes

ellipseMode() rectMode() strokeWeight()

[edit]

Shape 2D Primitives

arc() ellipse() line() point() quad() rect() triangle()

[edit]

Color Setting

background() colorMode() fill() noFill() noStroke() stroke()


[edit]

Examples from class 2

[edit]

Where To Find Help


  1. Books in the library
  2. Processing website: http://processing.org
Retrieved from "http://lowfrequency.org/interactivity/wiki/index.php?title=CN_Week2_Fall_2008"