Intro to Processing for Visual Artists
From Interactivity
Contents |
Goals
- Inspiration: Why use Processing, or even programming, to make art?
- Exposure to the basic syntax of Java programming, in Processing (e.g. what all of the brackets and symbols mean)
- How to write and recognize a line of code
- Blocks of code, nested code
- Logical statements (if/then/else)
- Loops (optional: depends on length of workshop)
- Understand how to create a basic Processing sketch
- Built in functions: setup(), draw()
- Learn the basic drawing methods, such as shape and color
- Making sketches interactive
- Using the mouse: built-in mouse methods and variables
- Using the keyboard: built-in keyboard methods and variables
Where To Find Inspiration
- http://www.davebollinger.com/works/
- Neiman Marcus - Jeff Han's multitouch screen
- BMW advertisement
- Proposal for Museum of Sexuality in London (Fabrica) - of particular note, the "Sillouettes" shadow-based interactive game has some interesting features and simple but effective interactivity
- InteractiveArchitecture.org - resource for interactive architectural projects
- SuperUber
- Processing Blogs (automatically updated for all major sites using/tagging with Processing): http://www.processingblogs.org/
- Collection of sketches: http://www.openprocessing.org/
- Nokia friends by toxi
- drawn by Zach Lieberman
- Anthony McCall's Line Describing a Cone
- Golan Levin's work - especially Yellowtail and others: http://www.youtube.com/watch?v=n5auMejRiys
- Projection Art
- Art and Technology
- Interesting Flash Links
- Soda play build and run wire frame animations [1]
- Cubing by Artificiel
- Danny Rozin's Wooden Mirror and others
- Gestalten is a book company and their site has videos and books based on data visualization, art, and design, many of which use software in the design process
- Dan Shiffman's Voronoi project (mirror that draws images as voronoi diagrams)
- John Maeda's Maeda@Media and Simplicity
- also John Maeda's TED talk
- This is sand: http://thisissand.com/
What is it used for??
- Music videos: http://benfry.com/writing/archives/142
- performing: Reactable musical instrument
- Visualizing data:
- http://aaronkoblin.com/work/flightpatterns/
- http://toxi.co.uk ( especially his examples: http://toxi.co.uk/p5/ )
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.
Syntax
Or, "What exactly do all those funky symbols mean?"
Processing is written in a programming language called Java. It is different from Javascript and Actionscript, but looks and works very similarly.
Symbols to Know and Love
- the semi-colon: ; all lines must end with a semi-colon.
- { } : curly braces (or "curly brackets") contain blocks of code. Think of them as containers. Blocks of code may be nested inside other blocks.
- comments: lines starting with // or surrounded by /* and */
Example:
void draw()
{
//this is a block of code - note the { above
doSomethingCool();
makeSomethingElseHappen();
finishUp();
} // end of block of code
Another example:
void draw()
{
doSomethingCool();
/* nested block of code : */
if (someThingIsTrue)
{
makeSomethingElseHappen();
}
finishUp();
}
- ( ) : parenthesis contain arguments to methods, separated by commas.
Example:
void draw()
{
int i = 10;
String s = "The number is ";
finishUp(s, i);
}
Now, lets draw on the screen!
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
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
}
Now try changing the draw() section to:
void draw() {
background(0); // clear the screen to solid black
rect(0,0, 100,150); // draw a rectangle at (0,0) 100px wide by 150px tall
rect(200,250, 100,150); // draw a rectangle at (200,250) 100px wide by 150px tall
}
Let's take a look at some of that sketch in more detail:
- 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.
- 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.
- 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.
- line(10,10, 500,500);
-
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)?
-
Exercises
{Now change color}
{Now fill screen with rects}
{draw lines from corners of screen to mouseX, mouseY}
Drawing Stuff
Shape Attributes
- ellipseMode()
- rectMode()
- strokeWeight()
Shape 2D Primitives
- arc()
- ellipse()
- line()
- point()
- quad()
- rect()
- triangle()
Color Setting
- background()
- colorMode()
- fill()
- noFill()
- noStroke()
- stroke()
Loops
Loops allow you to do thing many times, without having to type in all that redundant code.
{ draw 10 rectangles }
{ fill screen with lines }
Briefly: What Is Programming?
Inspired by and adapted for Processing from the online textbook for programming, the [2] Structure and Interpretation of Programs]
Programming in general can be broken down into 3 basic mechanisms:
- primitive expressions (ints, floats, Objects, symbols): the simplest, most basic entities which our software is concerned with
- means of combining those to make compound expressions (in Processing: classes, objects, and methods)
- means of abstracting and manipulating compound expressions (making compound expressions of compound expressions, such as objects containing objects)
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 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, or data from a distance sensor.
An object is a way of representing something, such as a dog, or a shopping list. A Dog object could have the self-explanatory methods Bark() and Poop(), and the property name for representing the dog's name.
A method (also called a function, or procedure) is a way of dealing with this data. Methods are like verbs, they repersent action. The method called Bark(Person SomePerson) would have the dog send a "bark" message to a Person object called SomePerson. Another Bark method, Bark(Person SomePerson, int times) would make the dog send times number of bark commands to SomePerson.
Objects may (and usually do) contain other Objects, which themselves might contain Objects.
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.
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.
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.
Bonus
- Strings and getting output (println, + " ")
Examples from class 2
Where To Find Help
- Learning Processing, by Daniel Shiffman
- Processing website: http://processing.org
- http://openprocessing.org
