Lesson One: The Beginning

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 • You will need to have processing downloaded to your USB and not the lab machines. • Finding the files • Website: www. processing.org – click Download • Version 1.5.1 is the most stable • Download the ‘standard’ version to USB • 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 Learning Processing: Slides by Don Smith

4. Where does Java fit in? Processing Source code • 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 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 JRE Windows OS X Phone OS CPU x86 G3/4/5 Running Java Program Running Java Program Running Java Program

6. Sketch Menu Options • Processing has an ‘PDE’ “Processing Development Environment” 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 Menu Toolbar Sketch Tabs Text Editor Message Line Text Area Current Line# RUN • 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 Display Window Learning Processing: Slides by Don Smith

8. Toolbar buttons Learning Processing: Slides by Don Smith

9. Getting Started • Help menu, 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, • 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 • 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 • 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. Summary • Processing requires (runs on) Java • You can download both at the same time and install easily • Processing provides a simple IDE(Integrated Development Environment) • Called PDE (Processing development Environment) • 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 • It only takes a little practice to get the hang of Processing. Make sure to understand these basics and it will avoid confusion down the road. Learning Processing: Slides by Don Smith

16. Assignment • Take some time now to review some of the ways Processing is being used by looking at the Processing website Feed: • Under File in the main PDE menu click on “example” and a huge assortment of example code will be given to you to run. Check them all out. It’s fascinating. • From those examples, choose three examples that you really like and be ready to share with the class. Learning Processing: Slides by Don Smith