Keyboard and Events

1
Keyboard and Events

• Fall 2009

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

3
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

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

5
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 pressed void
setup() size(100, 100) smooth()
strokeWeight(4) void draw()
background(204) if (keyPressed true)
line(20, 20, 80, 80)
6
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)

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

9
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 keyCODED

10
In-class exercise

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

11
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.

12
Refresher

• Today we review events for event driven programs.
• First event driven program
• void draw()
• frameRate(4) //fps 4
• println(frameCount)

13
What Happened?

• About 4 times per second, a number (the frame
  count) was printed to the console window.
• Why?
• Theres 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.

14
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.
• Whats the default frame rate?

15
Next Program

• float gray 0
• void setup()
• size(100, 100)
• void draw()
• background(gray)
• void mousePressed()
• gray 20

16
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?

17
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.

18
What Happened?

• About 4 times per second, a number (the frame
  count) was printed to the console window.
• Why?
• Theres 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.

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

20
mouseMoved() mouseDragged()

• Whats the difference between a dragged mouse and
  a moved mouse? If you dont know, run this
  program and find out!
• int dragX, dragY, moveX, moveY
• void setup()
• size(100, 100)
• smooth()
• noStroke()
• //continues on next slide

21
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

22
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.

23
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?

24
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

25
Another keyPressed() Example - testing a value

• void keyPressed()
• if ((key 'T') (key 't'))
• drawT true
• void keyReleased()
• drawT false

26
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

27
Using Strings

• void keyPressed()
• if (key BACKSPACE) // Backspace
• if (letters.length() gt 0)
• letters letters.substring(0,
  letters.length()-1)
• else if (textWidth(letterskey) lt width)
• letters letterskey
• What do you think letters.substring(),
  letters.length and textWidth() do?

28
letters.substring(), letters.length() and
textWidth()

• letters.substring()
• http//processing.org/reference/String_substring_.
  html
• letters.length()
• http//processing.org/reference/String_length_.htm
  l
• textWidth()
• http//processing.org/reference/textWidth_.html

29
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

30

• int frame 0
• void setup()
• size(100, 100)
• frameRate(30)
• void draw()
• if (frame gt 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()

31
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

32
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.