Interaction Function Definition Events Built-in Variables CS105 03a Interaction 1 Which image is drawn by this code? strokeweight(10); stroke(0, 255, 0); // green line(99, 0, 0, 99); stroke(200, 0, 200); // purple A B C D CS105 03a Interaction 2
(demo) active mode CS105 03a Interaction 3 Functions Code that is packaged so it can be run by name Often performs some computation and returns a value (but not always) We use functions all the time in Processing nofill(); ellipse(75, 50, 23, 52); CS105 03a Interaction 4
Active Mode vs. Static Mode We have been writing code in static mode: - our drawing is only shown when the program finishes - there is no user input - we can t define any functions From now on, we re using active mode: - people can interact with our program - drawings can be updated to make animation - we can define functions - with setup() and draw() functions also called dynamic mode CS105 03a Interaction 5 Function Definition function return type function name function parameters code block CS105 03a Interaction 6
red_dot void setup() { mousex, mousey background in draw() CS105 03a Interaction 7 Static Mode Active Mode CS105 03a Interaction 8
(demos) mixing modes wrong function definitions CS105 03a Interaction 9 Trace of setup and draw see: 03a Interaction (trace).pdf CS105 03a Interaction 10
Sequential Control Flow runs 1st, runs once runs 2nd, runs continuously CS105 03a Interaction 11 (demo flow) println to trace program flow (using framecount, framerate too) void setup() { size(200, 200); framerate(1); // 1 frame per second println("setup"); background(230); // almost white fill(255, 0, 0); // red ellipse(mousex, mousey, 30, 30); println("draw frame " + framecount); CS105 03a Interaction 12
Which image is drawn by this code? void setup() { strokeweight(10); stroke(0, 255, 0); // green line(99, 0, 0, 99); stroke(200, 0, 200); // purple A B C D CS105 03a Interaction 13 CS105 03a Interaction 14 Event CREDIT: http://thenextweb.com/
Event CREDIT: http://wikimedia.org CS105 03a Interaction 15 Event CREDIT: http://www.opusa.org/ CS105 03a Interaction 16
Event 1. An observable occurrence, phenomenon, or an extraordinary occurrence. 2. A message to notify an application that something happened. Examples: Keyboard (key press, key release) Mouse Events (button press, button release, moved) CS105 03a Interaction 17 Setup and Draw are Events The setup event happens when the program is first run - setup() is a built-in function that represents this event - Processing calls setup() when the setup event occurs The draw event happens 60 times per second (by default) draw() is a built-in function that represents this event - Processing calls draw() when the draw event occurs We customize setup() and draw() function to do something when these events occur CS105 03a Interaction 18
Trace Through: setup() and draw() 1 2 3 4 5 6 7 8 9 // red dot void setup() { size(200, 200); nostroke(); fill(255, 0, 0); // red background(240); // almost white ellipse(mousex, mousey, 30, 30); CS105 03a Interaction 19 Trace Through: setup() and draw() 1 2 3 4 5 6 7 8 9 // red dot void setup() { size(200, 200); nostroke(); fill(255, 0, 0); // red background(240); // almost white ellipse(mousex, mousey, 30, 30); wait for 16ms CS105 03a Interaction 20
Trace Through: setup() and draw() 1 2 3 4 5 6 7 8 9 // red dot void setup() { size(200, 200); nostroke(); fill(255, 0, 0); // red background(240); // almost white ellipse(mousex, mousey, 30, 30); CS105 03a Interaction 21 mousepressed Event A mousepressed event happens when a mouse button is pressed (or a touch pad tapped) - mousepressed() is a built-in function that represents this event - Processing calls mousepressed() when the event occurs We customize the mousepressed() function to do something when this event occurs (there s also a mousereleased event) void mousepressed() { CS105 03a Interaction 22
keypressed Event A keypressed event happens when a key is pressed - keypressed() is a built-in function that represents this event - Processing calls keypressed() when the event occurs We customize the keypressed() function to do something when this event occurs (there s also a keyreleased even) void keypressed() { CS105 03a Interaction 23 paint keypressed() mousepressed() mousereleased(); CS105 03a Interaction 24
Which image is drawn by this code one second after the mouse button was pressed? rect(25, 25, 50, 50); void mousepressed() { fill(0); // black ellipse(50, 50, 25, 25); Nothing: the program crashes A B C D CS105 03a Interaction 25 Variables A symbolic name used to reference an unknown value. The value may change, but the symbolic name doesn t. Kinds of Variables - built-in variables (e.g. mousex, width) - constants (CENTER, BEVEL) - user defined variables CS105 03a Interaction 26
Useful Processing Built-in Variables mousex, mousey pmousex, pmousey width, height framecount, framerate displaywidth, displayheight key, keycode mousebutton keypressed, mousepressed (NOTE: different than the event functions with same names!) CS105 03a Interaction 27 (demos) background(255); line(mousex - 25, mousey - 25, mousex + 25, mousey + 25); background(255); line(width / 2, height / 2, mousex, mousey); CS105 03a Interaction 28
two using built-in variables in expressions exercises: move number up and down too extend demo to move other numbers CS105 03a Interaction 29