Skip to content

Keyboard Input#

The keyboard does not have a position, at least not in coordinates on your screen. The way it works is very similar to how the mouse works. You also get two different ways to read a variable or to get notified via functions, just like we did with the mouse.

Keys - As a Variable#

keyPressed works much like the variable mousePressed - it is just a boolean variable telling you if any button is currently pressed down.

key (for most "normal" keys) and keyCode (for special keys like direction keys, modifier keys, etc.) are two variables that you can read at any time. They will contain information about the last key that was pressed or released. This is convenient for simple things, but also comes with three downsides:

  1. it is limited to a single key at a time
  2. you don't know when the key has been released

  3. if you hold down one key (and keep holding it down) and then press and release some other key, that other key is still "the last key that was pressed or released". So you're still holding down the first key, but you have no information about it any more.

  4. key is a char, so to compare it, you will need those single quotes we mentioned earlier.

  5. keyCode is an int. These codes will be hard to remember, please add comments to them, whenever you use them. There are also pre-defined constants (LEFT, RIGHT …) that are even better. There is also this website called https://keycode.info that just prints out keyCodes all day long.

Run Me!

You should absolutely copy and paste this to Processing and play around with it! Change a few things about the code. Add a few more keys, for example.

Also try breaking it by pressing left and right keys at the same time.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
int counter = 0;

void draw() {
    if (keyPressed) {
        if (keyCode == LEFT) {
            counter--;
        } else if (keyCode == RIGHT) {
            counter++;
        }
    }
    background(0, 0, 0);
    text(counter, 50, 20);
    rect(counter, 30, 10, 10);
}

Lots of Stuff going on!

These 14 lines of code have at least three things that are notable. Let's unpack them!

  • We're using nested if statements in lines 4 and 5. The "outer" if statement just tells us if any key is currently held down, while the "inner" if statement figures out which key is pressed. This is where indentation starts to become really important!
  • We're comparing the integer keyCode with the variable LEFT (and RIGHT) in lines 5 and 7. This is more readable (but effectively the same as) comparing keyCode == 37. Please use readable names like these when they are available to you.
  • Here's a great real-world use of else if in line 7. You could add as many else ifs as you need.

Keys - As a Function#

A keyboard button can be keyPressed() and keyReleased() — just like a mouse button. As a third option, you get keyTyped() which also fires for the automatically reeeeeeeeeeepeating events of your keyboard. If you have any of these functions in your code, processing will automatically run them for you, just like it does with the mouse counterparts or with setup() and draw().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
boolean marioJumps = false;
boolean princessPeachJumps = false;
int cloudPosition = 200;

void setup() {
    size(100, 100);
    noStroke();
}

void draw() {
    int marioY = 70;
    if (marioJumps) {
        marioY -= 10;
    }

    int princessPeachY = 60;
    if (princessPeachJumps) {
        princessPeachY -= 15;
    }

    cloudPosition--;
    if (cloudPosition < -10) {
        cloudPosition = 200;
    }

    background(50, 50, 170);
    fill(0, 120, 0);
    rect(0, 90, 100, 10);

    fill(200, 0, 0);
    rect(20, marioY, 10, 20);

    fill(255, 153, 187);
    rect(70, princessPeachY, 10, 30);

    fill(255, 255, 255);
    ellipse(cloudPosition, 10, 30, 10);
}

void keyPressed() {
    if (key == 'm' || key == 'M') {
        marioJumps = true;
    }
    if (key == 'p' || key == 'P') {
        princessPeachJumps = true;
    }
}

void keyReleased() {
    if (key == 'm' || key == 'M') {
        marioJumps = false;
    }
    if (key == 'p' || key == 'P') {
        princessPeachJumps = false;
    }
}

Please marvel at this absolute piece of art. No I didn't really need to be 56 lines of code, but somehow it was more fun that way. Anyway: here we have two keys (M and P) that control one of the two squares on the screen. They each have control over one boolean variable, and set and reset it accordingly in keyPressed() (line 40) and keyReleased() (line 49).

Within our draw() function (lines 10-38) we don't actually look at the keyboard at all. We're just looking at the boolean variables marioJumps (line 12) and princessPeachJumps (line 17). Lines 26 to 37 are just there for drawing a bunch of shapes. That's all.

Also, we keep a tiny little cloud updated, but that's just decoration.

Keep Track of Your Keys

Using keyPressed() and keyReleased() just to update some internal variable is a very common way of dealing with the keyboard, especially if you have more complex controls where you would need multiple keys at the same time.