Lesson One: The Beginning

1. Processing • Installing Processing • Menu Options • Writing Code • Errors • The Processing Reference (and website) • The “Play” button • Your first sketch Lesson One: The Beginning

2. 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

3. 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

4. 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

5. Toolbar buttons Learning Processing: Slides by Don Smith

6. 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

7. Sketch Files and Folders… • Processing programs are called “Sketches” • 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

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

9. 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

10. 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

11. 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

12. Saving options You can save sketch as a .pde file: by using save or save as //My first program print (“Hello world by Me"); rect (10,10, 50,50); You can save the sketch as an applet by using export This will create a folder containing .html file .pde file .js java script file Learning Processing: Slides by Don Smith

13. Why Processing • The focus of this class is to learn computer programming not to focus on a specific application, so why processing? • Processing allows for immediate feedback through visual and graphical means • Processing is real programming. It has all the fundamentals and core concepts that all languages have. • Everything you learn here can be transferred to other languages: Java, C++, MEL etc • Processing is great for both Learning and Producing. • Processing is super fun! Learning Processing: Slides by Don Smith

14. Coding in Processing • In Processing there are three kinds of statements we can write 1.) Function Calls: Our first sketches will basically be a series of function calls. The functions will take arguments that allow the function to create the shapes or complete the commands we ask it to do. Some functions do not take arguments. Example: background(150); smooth(); // no argument fill (0); lineWeight (3); line (50, 100, 300, 400) 2.) Assignment Operations: Assign values to variables 3.) Control Structures: loops (aka. Iterations) Learning Processing: Slides by Don Smith

15. Coding in Processing • What have we seen so far? • So far we have been writing a series of function calls that draw shapes, points, or lines to the screen. • Some examples are: • background (255); • rect(200, 100, 50,100); • ellipse (50, 100, 30, 30); • point(60, 30); • etc What processing is actually doing with the parameters is hidden from us. All we see is the final visual element drawn on the screen. No worries, we will write our own functions soon enough. • function name = “background”, • arguments/ parameters are held inside (parenthesis) • ends with a semi colon. Learning Processing: Slides by Don Smith

16. Coding in Processing • Here are some of the common functions calls we have used so far. Let’s review what they do. • background (150): • stroke(3); • fill(0); • noFill(); • noStroke(); • point(250,250); • line(0,0, 100,160); • rectMode(CENTER); • rect(0, 0, 50, 100); • ellipseMode(CORNERS); • ellipse(50, 50, 200, 100); • A full list of functions available are found at the processing.org/reference Learning Processing: Slides by Don Smith

17. Coding in Processing • There are also some reserved words or “keywords” that processing will color in its editor. • You can display text information to the message window by using these functions: • println(); This will print a string to the message window or can also print values in a variable. This is very helpful for trouble shooting. • example: size (300, 500); println ("what's up Doc?"); println ("The width of this window is " + width + " pixels"); println ("The height of this window is " + height + " pixels"); Learning Processing: Slides by Don Smith

18. Commenting in Processing Commenting code is also a very important habit to get into. Comments can be added by using the “//” two forward slashes for a single line of comments Example: // This will draw a circle ellipse(80, 50, 30, 30); // This will draw a rectangle rect (0, 0, 50, 75); For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk Example: /* This sketch will draw two basic shapes side by side on the canvas */ // This will draw a circle ellipse(80, 50, 30, 30); // This will draw a rectangle rect (0, 0, 50, 75); Learning Processing: Slides by Don Smith

19. Processing is case sensitive Processing is case sensitive One of the early frustrations in learning computer programming is syntax. Capitalization will make a word acceptable or unacceptable. Example: Ellipse (50, 50, 30, 40); Example Size(500, 300); Example printLn(height); Example: println(Height);

20. Processing practice • Now let’s put all the things we have learned into practice. • Write the code to create the following image: • define canvas size of 500px x 500px • draw a snowman with the following attributes • Head, middle and base spheres • Buttons down front • 2 eyes • Top hat • Right and left arms • add any additional elements to the scene you want. • Use comments to separate out parts of the snowman code. • For example: // this is the head, // this is the right arm etc. • Also, consider making the parts of the snowman based off of a common reference point. For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of the base sphere. The Hat height is two heads tall and one head wide. • This kind of thinking will make things easier later, when we work with variables.

21. 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

22. 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