2 - Processing Processing

Goals

To learn Processing
To download and install Processing
To learn the directory structure for Processing projects
To type code and learn what happens in the event of an error
To study the online Processing reference
To write your first "static" Processing program
To publish applets on the web

Processing

Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.
Developed by Ben Fry and Casey Reas at the MIT Media Lab
Free, open source
Employs all the same principles, structures, and concepts of other, perhaps more advanced languages (such as Java)

How to Get Processing

http://processing.org/

The Processing App

The Processing IDE is a simplified environment for developing "sketches "

Test Processing

Open any example, File -> Sketchbook -> Examples -> (pick an example)
Click the "Run" button
If a new window pops open running the example, you're all set!
If this does not occur, visit the online FAQ "Processing won't start!" for possible solutions: http://www.processing.org/faq/bugs.html#wontstart

The Sketchbook

Create a sketch
- Select File -> New
- Select File -> Save As...
- Name the sketch MyFirstProgram
Folder "My Documents\Processing" contains folders for all sketches you create
Each sketch consists of a folder (with the same name as your sketch) and a file with the extension "pde"
Exercise: Explore the folder for sketch MyFirstProgram
Exercise: Type some instructions from Chapter 1 into MyFirstProgram. Examine how certain words are different colors. Run the sketch.

Coding: Syntax

Sequence of statements
3 kinds of statements:
- function call
- assignment operation
- control structure
Function call has a name and a parameter list (may be empty)
Each statement must be terminated by a semi-colon
Single-line comment begins with //
Mult-line comment begins with /*, ends with */

Coding: Style

Style: naming convention, layout (indentation, white space), comments
Write code with a consistent, conventional style
- Easier for you and other programmers to read and understand the code
- Easier to change the code
- Less likely to make programming errors
Name of a sketch begins with a capital letter; e.g. MyFirstProgram
Comment the beginning of a sketch with the purpose of the sketch and the author's name
Only one statement per line, at the beginning of the line
Separate significant sequences of statements by blank lines
For a significant sequence of statements, write a comment line at the beginning of the sequence explaining what the sequence does

`MyFirstProgram`

`MyFirstProgram` Notes

Processing colours "known" words:
- names of Processing library functions
- constants and String literals
- comments
- Java keywords
println() function displays text in the Text Area of the Processing window
- single parameter
- useful for "debugging": trace a run, display data values
The number in the bottom left hand corner indicates what line number in the Text Editor contains the cursor

Errors

Make a syntax error: change ellipse to elipse and click "Run"

Error Notes

Read the error message
- area (line number) of the error
- kind of error
- suggested fix
Processing reports only the first syntax error => incremental development

Exercise

Fix the errors in the following code:

size(200,200;
background();
stroke 255;
fill(150)
rectMode(center);
rect(100,100,50);

The Processing Reference

Crucial that we learn how to read and use the online reference
http://processing.org/reference/index.html or
Select "Help -> Reference"
Exercise: Using the Processing reference, try using two functions that we have no yet covered in this book. Stay within the "Shape" and "Color (setting)" categories
Exercise: Using the reference, find a function that allows you to alter the thickness of a line. What arguments does the function take? Write example code that draws a line 1 pixel wide, then 5 pixels wide, then 10 pixels wide

"Run" - What Really Happens

Processing programs start out as text, they are translated into byte code, and then executed to run.

Translate to Java
Compile into Java byte code
- produces a JAR (Java ARchive) file containing compiled Java code (class files), images, fonts, and other data files
Execute JAR file using JVM (Java Virtual Machine)

Publishing

Goal: Publish your sketch on the web
1. Once the sketch works, select "File -> Export"
  - A new folder named "applet" is created in the sketch folder
2. Copy the "applet" folder to a web server
3. Open and test applet in a browser
How to publish your sketch on an Acadia web server

Exercise

Exercise: Using what you designed in Chapter one, implement your own sketch, using only 2D primitive shapes - arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() - and basic color functions - background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use size() to specify the dimensions of your window.

2 - Processing Processing

Goals

Processing

How to Get Processing

The Processing App

Test Processing

The Sketchbook

Coding: Syntax

Coding: Style

MyFirstProgram

MyFirstProgram Notes

Errors

Error Notes

Exercise

The Processing Reference

"Run" - What Really Happens

Publishing

Exercise

`MyFirstProgram`

`MyFirstProgram` Notes