Keyboard and Events. What about the keyboard? Keyboard inputs can be used in many ways---not just...
-
Upload
frank-reynolds -
Category
Documents
-
view
239 -
download
0
Transcript of Keyboard and Events. What about the keyboard? Keyboard inputs can be used in many ways---not just...
What about the keyboard?
• Keyboard inputs can be used in many ways---not just for text
• The boolean variable keyPressed is true if a key is pressed and false if not.
• keyPressed is true as long as a key is held down
// Draw a line when any key // is pressedvoid setup() { size(100, 100); smooth(); strokeWeight(4);}
void draw() { background(204); if (keyPressed == true) { line(20, 20, 80, 80); } }
Another example with keyPressed// Move a line while any key is pressedint x = 20;
void setup() { size(100, 100); smooth(); strokeWeight(4);}
void draw() { background(204); if (keyPressed == true) { // If the key is pressed x++; // add 1 to x } line(x, 20, x-60, 80);}
You can also display text
• The key variable is of type char and stores the most recently pressed key
PFont font;
void setup() { size(100, 100); font = loadFont("Tahoma-Bold-18.vlw"); textFont(font);}
void draw() { background(0); text(key, 28, 75);}
But characters are really numbers
• Each character has a numerical value defined by the ASCII code
int x = 0;
void setup() { size(100, 100);}
void draw() { if (keyPressed == true) { x = key - 48; rect(x, -1, 20, 101); }}
Coded Keys
• Processing can also read the value from other keys such as the arrow keys, Alt, Shift, Backspace, Tab and others (see page 227)
• Check that the key is coded first: key==CODED
color y = 35;void setup() { size(100, 100);}void draw() { background(204); line(10, 50, 90, 50); if (key == CODED) { if (keyCode == UP) { y = 20; } else if (keyCode == DOWN) { y = 50; } } else { y = 35; } rect(25, y, 50, 30);}
Flow of Control
• Programs can broadly be classified as being – Procedural
• Programs are executed once in the order specified by the code varied only by loops and function calls.
– Event Driven• Programs run continuously responding to input
events such as key strokes or mouse clicks.
Refresher…
• Today we will review events for event driven programs.
• First event driven programvoid draw() {
frameRate(4); //fps = 4
println(frameCount);
}
What Happened?
• About 4 times per second, a number (the frame count) was printed to the console window.
• Why? – There’s no for loop or while loop?
• The draw() function is processed continuously by the event handler until another event is triggered or you press the STOP button.
More on Why
• Specifically the draw() function is called 4 times per second since we set the frameRate to 4.
• Remove the frameRate() line and see what happens.
• What’s the default frame rate?
Next Program
float gray = 0;
void setup() { size(100, 100);}
void draw() { background(gray);}
void mousePressed() { gray += 20;}
Change It
• Change the mousePressed() to mouseReleased() .– What happens differently?
• Move the background() call to mouseReleased(). Now draw() is empty? Can we remove it?– Why or why not?
draw()
• Event Driven Programs– Programs run continuously responding to
input events such as key strokes or mouse clicks.
• Without the draw() function, our program is no longer listening for events.
For Something Different
void setup() { size(100, 100); fill(0, 102);}
void draw() { } //Empty draw() keeps program running
void mousePressed() { rect(mouseX, mouseY, 33, 33);}
mouseMoved() & mouseDragged()
• What’s the difference between a dragged mouse and a moved mouse? If you don’t know, run this program and find out!
int dragX, dragY, moveX, moveY;
void setup() {
size(100, 100);
smooth();
noStroke();
} //continues on next slide
mouseMoved() & mouseDragged()[continued]
void draw() { background(204); fill(0); ellipse(dragX, dragY, 33, 33); // Black circle fill(153); ellipse(moveX, moveY, 33, 33); // Gray circle}void mouseMoved() { // Move gray circle moveX = mouseX; moveY = mouseY;}void mouseDragged() { // Move black circle dragX = mouseX; dragY = mouseY;}
keyPressed() & keyReleased()
boolean drawT = false;
void setup() { size(100, 100); noStroke();}
void draw() { background(204); if (drawT == true) { rect(20, 20, 60, 20); rect(39, 40, 22, 45); }} //continued on next slide
keyPressed() & keyReleased()
void keyPressed() {
if ((key == 'T') || (key == 't')) {
drawT = true;
}
}
void keyReleased() {
drawT = false;
}
Using Strings// An extremely minimal text editor, it can only insert// and remove characters from a single linePFont font;String letters = "";
void setup() { size(100, 100); font = loadFont("Eureka-24.vlw"); textFont(font); stroke(255); fill(0);}
void draw() { background(204); float cursorPosition = textWidth(letters); line(cursorPosition, 0, cursorPosition, 100); text(letters, 0, 50);} // continued on next slide
Using Strings
void keyPressed() { if (key == BACKSPACE) { // Backspace if (letters.length() > 0) { letters = letters.substring(0, letters.length()-1); } } else if (textWidth(letters+key) < width){ letters = letters+key; }}
• What do you think letters.substring(), letters.length and textWidth() do?
letters.substring(), letters.length() and textWidth()
• letters.substring()– http://processing.org/reference/String_substring_.html
• letters.length()– http://processing.org/reference/String_length_.html
• textWidth()– http://processing.org/reference/textWidth_.html
Flow Control
• frameRate()– Sets a limit as to how many frames are displayed per
second• loop()
– Resumes continuous draw() calls• noLoop()
– Stops draw() from repeated being called• redraw()
– Calls draw() once
int frame = 0;
void setup() { size(100, 100); frameRate(30);}void draw() { if (frame > 60) { // If 60 frames since the mouse noLoop(); // was pressed, stop the program background(0); // and turn the background black. } else { // Otherwise, set the background background(204); // to light gray and draw lines line(mouseX, 0, mouseX, 100); // at the mouse position line(0, mouseY, 100, mouseY); frame++; }}void mousePressed() { loop(); frame = 0;}
Run This and Then Remove Comments in setup()
void setup() { size(100, 100); //noLoop(); // what happens when noLoop is uncommented}
void draw() { background(204); line(mouseX, 0, mouseX, 100);}
void mousePressed() { redraw(); // Run the code in draw one time}
Mouse event handlers
• mousePressed()– Called once when any mouse button is pressed
• mouseReleased()– Called once when any mouse button is released
• mouseMoved()– Called often while mouse is moved
• mouseDragged()– Called often while mouse is moved with button pressed
An example to try out
Key event handlers
• keyPressed()– Called once when any key is pressed– Be careful about keys that are held down!
• keyReleased()– Called once when any key is released
Timer events and their controls• draw()
– Called at regular intervals• frameRate(freq)
– Sets the interval to 1/freq seconds• noloop()
– Turns off the regular calls to draw()• loop()
– Turns on the regular calls to draw()• redraw()
– Makes a single call to draw()