1. Lesson One: The Beginning
Chapter 2: Processing
Learning Processing
Daniel Shiffman
Presentation by Donald W. Smith
Graphics from built-in help reference folder after install

2. Lesson One: The Beginning
1: Pixels
2: Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
3: Interaction
Learning Processing: Slides by Don Smith

3. Installing Finding the files
Website: www. processing.org – click Download
Blackboard: Files, Tools folder
Version is the most current
Download the ‘full’ version (68MB) processing zip
If you already have Java installed:
Install the Windows (Without Java) expert version instead
processing expert.zip - From
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Installs an icon on your desktop
Learning Processing: Slides by Don Smith

4. Processing Source code
Where does Java fit in?
Processing provides a simple ‘front end’ to Java.
Processing requires Java SDK to be installed
Software Development Kit
Processing has it’s own library for graphics
Java’s library (API) can also be used in Processing
Processing Source code
Processing
Library
Processing
Java Compiler
Java
Library
Portable Java Program
Learning Processing: Slides by Don Smith

5. The Java Virtual Machine (JVM)
Java was designed to run on embedded systems, it was designed around a virtual machine
“Write once, run everywhere”
Called the JRE (Java Runtime Environment)
Portable Java Program PC
Mac
Cell Phone
Java VM
Java VM
Java VM
Windows
OS X
Phone OS
JRE
x86
G3/4/5
CPU
Running
Java
Program
Running
Java
Program
Running
Java
Program

6. Sketch Menu Options Processing has an ‘PDE’ called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith

7. PDE To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button Menu
Sketch Tabs
Text Editor
Message Line
Text Area
Current Line#
RUN
Display
Window
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith

8. Toolbar buttons
Learning Processing: Slides by Don Smith

9. Getting Started
Help, Getting Started goes to processing website and explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith

10. Sketch Files and Folders…
The folder where you store your sketches is called your ‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith

11. Where are your files? Choose File, Select new location for default
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith

12. Your First Program Open a new sketch Run it… If no errors,
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith

13. Errors The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith

14. Help, Find In Reference Does not work if word is mis-spelled
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith

15. Lab 5: Zoog Headstand Draw your alien – Upside Down! Save your sketch
Use grayscale
White head
Black eyes
Gray body
Add a comment with your name at the top
Add: print(“Zoog Headstand by <Your name>”);
Save your sketch
To your flash drive
Submit your sketch (pde) via Blackbloard
Learning Processing: Slides by Don Smith

16. Summary Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE
Called PDE
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
Learning Processing: Slides by Don Smith