Lesson One The Beginning Processing Installing Processing Menu

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

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 2

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 3

PDE RUN Display Window Menu Toolbar Sketch Tabs Text Editor Message Line Text Area Current Line# 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 4

Toolbar buttons Learning Processing: Slides by Don Smith 5

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

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 7

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

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

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

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 11

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, 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 12

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 13

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); line. Weight (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 14

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); • point(60, 30); • etc function name = “background”, arguments/ parameters are held inside (parenthesis) ends with a semi colon. 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. Learning Processing: Slides by Don Smith 15

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); • no. Fill(); • no. Stroke(); • point(250, 250); • line(0, 0, 100, 160); • rect. Mode(CENTER); • rect(0, 0, 50, 100); • ellipse. Mode(CORNERS); • ellipse(50, 200, 100); A full list of functions available are found at the processing. org/reference Learning Processing: Slides by Don Smith 16

Coding in Processing There 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 17

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); // 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); // This will draw a rectangle rect (0, 0, 50, 75); Learning Processing: Slides by Don Smith 18

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, 30, 40); Example Size(500, 300); Example print. Ln(height); Example: println(Height); 19

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 500 px x 500 px 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. 20

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 21

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 22