keyboard and events l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Keyboard and Events PowerPoint Presentation
Download Presentation
Keyboard and Events

Loading in 2 Seconds...

play fullscreen
1 / 32

Keyboard and Events - PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on

Keyboard and Events. Fall 2009. Simply displaying text. // Step 1: Create the font using the Tool menu option // Step 2: Declare PFont variable PFont f; void setup() { size(200,200); // Step 3: Load Font f = loadFont( "Albany-48.vlw" ); } void draw() { background(255);

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Keyboard and Events' - colby


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
simply displaying text
Simply displaying text

// Step 1: Create the font using the Tool menu option

// Step 2: Declare PFont variable

PFont f;

void setup() {

size(200,200);

// Step 3: Load Font

f = loadFont( "Albany-48.vlw" );

}

void draw() {

background(255);

textFont(f,16); // Step 4: Specify font to be used

fill(0); // Step 5: Specify font color

// Step 6: Display Text

text ( "Mmmmm ... Strings ..." ,10,100);

}

what are strings
What are Strings?
  • String is a data type (like int or char)
  • It stores collections of characters (i.e., chars) that are delineated by quotes.

char letter =‘b’;

String word = “this is more than one word”;

  • Any character on the keyboard (including numbers) can be part of a String
you try it
You try it!

// Step 1: Create the font using the Tool menu option

// Step 2: Declare PFont variable

PFont f;

void setup() {

size(200,200);

// Step 3: Load Font

f = loadFont( “you fill this in" );

}

void draw() {

background(255);

textFont(f, you fill this in); // Step 4: Specify font

fill(0); // Step 5: Specify font color

// Step 6: Display Text

String message = “you fill this in" ;

text (message,10,100);

}

what about the keyboard
What about the keyboard?

// Draw a line when any key

// is pressed

void setup() {

size(100, 100);

smooth();

strokeWeight(4);

}

void draw() {

background(204);

if (keyPressed == true) {

line(20, 20, 80, 80);

}

}

  • 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
another example with keypressed
Another example with keyPressed

// Move a line while any key is pressed

int 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
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
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 - 32;

rect(x, -1, 20, 101);

}

}

coded keys
Coded Keys

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

}

  • 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
in class exercise
In-class exercise
  • Use the arrow keys to change the position of a shape within the canvas.
flow of control
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
Refresher…
  • Today we review events for event driven programs.
  • First event driven program

void draw() {

frameRate(4); //fps = 4

println(frameCount);

}

what happened
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
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
Next Program

float gray = 0;

void setup() {

size(100, 100);

}

void draw() {

background(gray);

}

void mousePressed() {

gray += 20;

}

change it
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?
  • Add a background() call inside draw()
    • What happens? Why?
slide17
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.
what happened18
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.
for something different
For Something Different

void setup() {

size(100, 100);

fill(0, 102);

}

void draw() { } // Empty draw() keeps the program running

void mousePressed() {

rect(mouseX, mouseY, 33, 33);

}

mousemoved mousedragged
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
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;

}

built in variables
Built-in Variables
  • mouseX
  • mouseY
  • Do you remember what these are? Look at the code you just ran? If you need to print them out to help figure out what they are.
key events
Key Events
  • keyPressed()
  • keyReleased()
  • Look for the built-in or predefined variable key. What is it?
  • A character value is depicted in single quotes like ‘a’. But an ‘a’ also has a numeric representation which is the value 97. You can look at an ascii table to see all character values. The character value ‘A’ is equal to 65. What is the character ‘Q’ equal to?
another keypressed example testing a value
Another keyPressed() Example - testing a value

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

}

} //contined on next slide

another keypressed example testing a value25
Another keyPressed() Example - testing a value

void keyPressed() {

if ((key == 'T') || (key == 't')) {

drawT = true;

}

}

void keyReleased() {

drawT = false;

}

using strings
Using Strings

// An extremely minimal text editor, it can only insert

// and remove characters from a single line

PFont 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 strings27
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(), 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
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
slide30
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
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

}

your turn
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.