Lesson One: The Beginning

Chapter 3: Interaction
Learning Processing
Daniel Shiffman

Presentation by Donald W. Smith

Graphics from text
Lesson One: The Beginning
1: Pixels
2: Processing
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

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
Conditional
Iterative

Learning Processing: Slides by Don Smith 3

Using your first ‘methods’!
setup()and draw()are ‘methods’
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

A ‘block’ of code
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

Learning Processing: Slides by Don Smith 5

setup()and draw()methods
When your program starts, Program Starts
Processing:
Call setup()
Calls setup() once
Continues to call draw() unti
the program ends Call draw()

No
Done
yet?

Yes

Program ends

Learning Processing: Slides by Don Smith 6

Code for Zoog as a dynamic sketch
All of your code should be inside these 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 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

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
 Just keep connecting the points where the
mouse was and it is now:

Learning Processing: Slides by Don Smith 11

Mouse clicks and Key presses
 Two ‘methods’ that you can
write to handle events that
might happen:
 Processing ‘calls’ your
method when events occur:
 mousePressed()

 keyPressed()

Learning Processing: Slides by Don Smith 12

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)
 Try these void setup() {
size(200,200);
background(255);
}
void draw() {
line(mouseX, mouseY, 100,100);
}

void setup() {
size(200,200);
}
void draw() {
background(255);
line(mouseX, mouseY, 100,100);
}

Learning Processing: Slides by Don Smith 14

Assignment: Lesson 1 Project

Learning Processing: Slides by Don Smith 15

Summary
Blocks of code can be named (aka ‘methods’)
methodName {
.. A bunch of ‘statements’;
}
Processing runs in a loop
Your 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