Lesson One: The BeginningChapter 3: Interaction

Learning Processing: by Daniel Shiffman

Presentation by Donald W. SmithGraphics from text

Lesson One: The Beginning

3: InteractionThe “flow” of a program

The meaning behind setup() and draw()

Mouse interaction

Your first “dynamic” Processing program

Handling eventsMouse clicks

Key Presses

Learning Processing: Slides by Don Smith 2

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

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

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

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

Code for Zoog as a dynamic sketchAll of your code can go into two ‘blocks’:

The ‘invisible’ line of code…When does processing ‘paint’ the screen?

Learning Processing: Slides by Don Smith 8

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 mouseThese are both ‘key words’ that you can use!

Their values change as the mouse moves

An example:

Learning Processing: Slides by Don Smith 9

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

A scribble application

Learning Processing: Slides by Don Smith 11

Just keep connecting the points where the mouse was and it is now:

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()

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

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

Assignment 2: Lesson 1 Project

Learning Processing: Slides by Don Smith 15

SummaryBlocks of code can be named (aka ‘methods’)methodName {

.. A bunch of ‘statements’;

}

Processing runs in a loopYou write setup() and draw() methods

Processing tracks the mouseCurrent X and Y

Previous X and Y

You can control processing using ‘methods’background(), frameRate(), size(), smooth()..

Learning Processing: Slides by Don Smith 16