lesson one: the beginning chapter 3: interaction learning processing: by daniel shiffman...
TRANSCRIPT
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