1. Lesson One: The Beginning Chapter 3: Interaction Learning Processing: by Daniel Shiffman Presentation by Donald W. Smith Graphics from text

2. Lesson One: The Beginning 3: Interaction The flow of a program The meaning behind setup() and draw() Mouse interaction Your first dynamic Processing program Handling events Mouse clicks Key Presses Learning Processing: Slides by Don Smith 2

3. Program flow Games are written with loops Like running a race Prepare (put on shoes…) Loop putting feet forward over and over Run until the race is over Remember that programs are made of parts: Sequential parts Conditional parts Iterative parts Learning Processing: Slides by Don Smith 3

4. Using your first methods! setup() and draw() are methods ( a.k.a functions) Think of them as named blocks of code You get to write the code inside the block New symbols and words! (just look for now) void () // { } Learning Processing: Slides by Don Smith 4

5. Parts of a program are separated into blocks In Java, C, C++, PHP and many other languages: Blocks are surrounded by curly braces: { ….. } Think of blocks like an outline set of sub-steps: 1 1a 1b 2 Programmers (and editors) line up code in blocks Usually indent the statements inside the block Make sure to keep track of the open and closed braces for each block of code. Do not have unclosed blocks or you will get errors which can be hard to trouble shoot A block of code Learning Processing: Slides by Don Smith 5

6. setup() and draw() methods When your program starts, Processing… Calls the setup() once Continues to call draw() until the program ends Learning Processing: Slides by Don Smith 6 Program Starts Call setup() Call draw() Program ends Done yet? Yes No

7. Code for Zoog as a dynamic sketch All of your code can go into two blocks:

8. The invisible line of code… When does processing paint the screen? Learning Processing: Slides by Don Smith 8

9. Tracking the Mouse Processing keeps track of where the mouse is: mouseX : The current X coordinate of the mouse mouseY : The current Y coordinate of the mouse These are both key words that you can use! Their values change as the mouse moves An example: Learning Processing: Slides by Don Smith 9

10. More Mouse tracks… Processing also keeps track of where the mouse WAS the last time you left draw() : pmouseX : The previous X coordinate of the mouse pmouseY : The previous Y coordinate of the mouse Learning Processing: Slides by Don Smith 10

11. A scribble application Learning Processing: Slides by Don Smith 11 Just keep connecting the points where the mouse was and it is now:

12. Mouse clicks and Key presses Learning Processing: Slides by Don Smith 12 Two methods that you can write to handle events that might happen: Processing calls your method when events occur: mousePressed() keyPressed()

13. Processing setup() method Things that you may use during setup() : size(200,200); smooth(); frameRate(30); // defaults to 60 frames/sec background(255); // clear the screen Each may be used for their own purposes Some may also be used in draw() methods What would this do to your drawing if the background(255) call was in draw()? Learning Processing: Slides by Don Smith 13

14. Using background(255) void setup() { size(200,200); background(255); } void draw() { line(mouseX, mouseY, 100,100); } Learning Processing: Slides by Don Smith 14 void setup() { size(200,200); } void draw() { background(255); line(mouseX, mouseY, 100,100); } Try these

15. Assignment 2: Lesson 1 Project Learning Processing: Slides by Don Smith 15

16. Summary Blocks of code can be named (aka methods) methodName {.. A bunch of statements; } Processing runs in a loop You write setup() and draw() methods Processing tracks the mouse Current X and Y Previous X and Y You can control processing using methods background(), frameRate(), size(), smooth().. Learning Processing: Slides by Don Smith 16