From last time…
•

Introduced the Project Proposal – due in 1 week!

•

Talked about Design Thinking!

•

Office Hours will...
Libraries

CAP
A Simple Sketch
How does the computer!
know what all this is?

size(500,500);
background(255);
ellipse(250,250,50,50);
The Core Library
•

The IDE automatically imports the Core Library!

•

What is in the Core Library?!

•

http://processin...
Functions
A function is a block of code!
We can “call a function”:!

functionName(argument1, argument2);
But we can also d...
Defining a Function
the type of value we expect to be ‘returned’
the arguments we can pass in

returnType functionName( arg...
the type of value we expect to be ‘returned’
the arguments we can pass in

returnType functionName( argumentList )
{
// so...
size(500,500);
What is its name?!
What arguments do we pass in?!
What type of arguments are these?!

size
width & height
i...
size(500,500);
void size(int newWidth, int newHeight)
{
sketchWindow.width = newWidth;
sketchWindow.height = newHeight;
}
int x = multiply(3,2);
What is its name?!

multiply

What arguments do we pass in?! values to multiply
What type of argume...
int x = multiply(3,2);
int multiply(int value1, int value2)
{
int result = value1 * value2;
return result;
}
OR
{
return v...
Dynamic
Sketches

CAP
Static Mode
Start

size(500,500);
background(255);
ellipse(250,250,50,50);
!

Play
Finish
Active Mode
void 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:!

! backg...
void draw( )
•

Is called 30 times per second after setup()

•

This is what was call our “Draw Loop”
The Sketch
“Flow”

CAP
Import the Core Library

your
sketch

Look for and run: setup()

Execute: draw()…!
30 fps, forever!
Interaction!
!

Mouse Position!
& Event Listeners

CAP
1. Mouse Position
•

Mouse Position Variables: these global variables
are calculated for us by Processing!

•

They are up...
Demo!
Mouse Position
mousePressed()
•

Define the event listener function mousePressed()

•

Anytime the mouse is clicked, it will run the body
...
keyPressed()
•

Define the event listener function keyPressed()

•

Anytime a key is clicked, it will run the body of
code ...
Demo!
Event Listeners
Active Template
A generic active sketch template would define each
of the following functions:!

void
void
void
void

setup...
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....
Upcoming SlideShare
Loading in …5
×

4. Interaction

142 views
118 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
142
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

4. Interaction

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

×