Keyboard and Events

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);}

In-class exercise

• Use the arrow keys to change the position of a shape within the canvas.

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}

Eventful review

• Classes of events– Mouse– Key– Timer (alarm)

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()

Your Turn

• Create a shape that has events defined for mousePressed(), mouseDragged(), mouseReleased() and keyPressed() where key equals some particular value. For example an ‘L’ draws a line.