4. Interaction
-
Upload
joseph-murphy -
Category
Education
-
view
83 -
download
0
Transcript of 4. Interaction
From last time…
• Introduced the Project Proposal – due in 1 week!
• Talked about Design Thinking!
• Office Hours will be before class: MW 4th Period
CAP 3032
Libraries
A Simple Sketch
size(500,500); background(255); ellipse(250,250,50,50);
How does the computer!know what all this is?
The Core Library• The IDE automatically imports the Core Library!
• What is in the Core Library?!
• http://processing.org/reference!
• http://processing.org/reference/libraries/!
• Why not import all libraries, all the time?
Functions
A function is a block of code!
We can “call a function”:!
functionName(argument1, argument2);
But we can also define functions…
Defining a Function
returnType functionName( argumentList ) { // some code goes here }
the arguments we can pass in
the type of value we expect to be ‘returned’
the arguments we can pass inthe type of value we expect to be ‘returned’
1. Function Name: a logical name!
2. Input: the type of values we can pass in!
3. Output: the type of returned (“void” signifies that we do not expect returned value)
returnType functionName( argumentList ) { // some code goes here }
size(500,500);
What is its name?!
What arguments do we pass in?!
What type of arguments are these?!
Does it return anything?!
What is the return type?
size
width & height
nope!
void
integers
size(500,500);
void size(int newWidth, int newHeight) { sketchWindow.width = newWidth; sketchWindow.height = newHeight; }
int x = multiply(3,2);
What is its name?!
What arguments do we pass in?!
What type of arguments are these?!
Does it return anything?!
What is the return type?
multiply
values to multiply
yes!
int
integers
int x = multiply(3,2);
int multiply(int value1, int value2) { int result = value1 * value2; return result; }
OR { return value1 * value2; }
CAP 3032
Dynamic Sketches
Static Mode
size(500,500); background(255); ellipse(250,250,50,50); !
Play
Start
Finish
Active Modevoid setup() { // some code here } !
void draw() { // other code here }
void setup( )• Is called 1 time after you run the sketch!
• First line is always size()
• Other functions:!
! background()
! smooth()
! colorMode() or rectMode()
void draw( )
• Is called 30 times per second after setup()
• This is what was call our “Draw Loop”
CAP 3032
The Sketch “Flow”
your sketch
Import the Core Library
Look for and run: setup()
Execute: draw()…!30 fps, forever!
CAP 3032
Interaction!!Mouse Position!& Event Listeners
1. Mouse Position• Mouse Position Variables: these global variables
are calculated for us by Processing!
• They are updated at 30fps (each draw loop)!
• Current mouse location: mouseX, mouseY!
• Previous mouse location: pmouseX, pmouseY
Demo!Mouse Position
mousePressed()
• Define the event listener function mousePressed()
• Anytime the mouse is clicked, it will run the body of code you defined
keyPressed()
• Define the event listener function keyPressed()
• Anytime a key is clicked, it will run the body of code you defined
Demo!Event Listeners
Active Template
A generic active sketch template would define each of the following functions:!void setup() {} void draw() {} void mousePressed() {} void keyPressed() {}
The Nature of Code!Shiffman, Daniel!!
Generative Art!Pearson, Matt
Visualizing Data!Fry, Ben
For next time…• Read Shiffman, p. 45–58 (Variables)!
• Quiz on Friday!
! - Last 20 minutes of class!
! - Shiffman, p. 3–42 (Pixels, Processing, & Interaction)!
• Continue developing your Project Proposals