Keyboard

/**
 * Keyboard. 
 * 
 * Click on the image to give it focus and press the letter keys 
 * to create forms in time and space. Each key has a unique identifying 
 * number. These numbers can be used to position shapes in space. 
 */

int rectWidth;

void setup() {
    size(640, 360);
    noStroke();
    background(0);
    rectWidth = width / 4;
}

void draw() { 
    // keep draw() here to continue looping while waiting for keys
}

void keyPressed() {
    int keyIndex = -1;

    if (key >= 'A' && key <= 'Z') {
        keyIndex = key - 'A';
    } else if (key >= 'a' && key <= 'z') {
        keyIndex = key - 'a';
    }

    if (keyIndex == -1) {
        // If it's not a letter key, clear the screen
        background(0);
    } else { 
        // It's a letter key, fill a rectangle
        fill(millis() % 255);

        float x = map(keyIndex, 0, 25, 0, width - rectWidth);
        rect(x, 0, rectWidth, height);
    }
}