4. interaction
TRANSCRIPT
![Page 1: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/1.jpg)
From last time…
• Introduced the Project Proposal – due in 1 week!
• Talked about Design Thinking!
• Office Hours will be before class: MW 4th Period
![Page 2: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/2.jpg)
CAP 3032
Libraries
![Page 3: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/3.jpg)
A Simple Sketch
size(500,500); background(255); ellipse(250,250,50,50);
How does the computer!know what all this is?
![Page 4: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/4.jpg)
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?
![Page 5: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/5.jpg)
Functions
A function is a block of code!
We can “call a function”:!
functionName(argument1, argument2);
But we can also define functions…
![Page 6: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/6.jpg)
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’
![Page 7: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/7.jpg)
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 }
![Page 8: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/8.jpg)
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
![Page 9: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/9.jpg)
size(500,500);
void size(int newWidth, int newHeight) { sketchWindow.width = newWidth; sketchWindow.height = newHeight; }
![Page 10: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/10.jpg)
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
![Page 11: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/11.jpg)
int x = multiply(3,2);
int multiply(int value1, int value2) { int result = value1 * value2; return result; }
OR { return value1 * value2; }
![Page 12: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/12.jpg)
CAP 3032
Dynamic Sketches
![Page 13: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/13.jpg)
Static Mode
size(500,500); background(255); ellipse(250,250,50,50); !
Play
Start
Finish
![Page 14: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/14.jpg)
Active Modevoid setup() { // some code here } !
void draw() { // other code here }
![Page 15: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/15.jpg)
void setup( )• Is called 1 time after you run the sketch!
• First line is always size()
• Other functions:!
! background()
! smooth()
! colorMode() or rectMode()
![Page 16: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/16.jpg)
void draw( )
• Is called 30 times per second after setup()
• This is what was call our “Draw Loop”
![Page 17: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/17.jpg)
CAP 3032
The Sketch “Flow”
![Page 18: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/18.jpg)
your sketch
Import the Core Library
Look for and run: setup()
Execute: draw()…!30 fps, forever!
![Page 19: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/19.jpg)
CAP 3032
Interaction!!Mouse Position!& Event Listeners
![Page 20: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/20.jpg)
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
![Page 21: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/21.jpg)
Demo!Mouse Position
![Page 22: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/22.jpg)
mousePressed()
• Define the event listener function mousePressed()
• Anytime the mouse is clicked, it will run the body of code you defined
![Page 23: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/23.jpg)
keyPressed()
• Define the event listener function keyPressed()
• Anytime a key is clicked, it will run the body of code you defined
![Page 24: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/24.jpg)
Demo!Event Listeners
![Page 25: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/25.jpg)
Active Template
A generic active sketch template would define each of the following functions:!void setup() {} void draw() {} void mousePressed() {} void keyPressed() {}
![Page 26: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/26.jpg)
The Nature of Code!Shiffman, Daniel!!
Generative Art!Pearson, Matt
![Page 27: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/27.jpg)
Visualizing Data!Fry, Ben
![Page 28: 4. Interaction](https://reader037.vdocument.in/reader037/viewer/2022103114/55561965d8b42ae0238b4fee/html5/thumbnails/28.jpg)
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