Keyboard Functions.

Keyboard Functions. Modified from code by Martin. Original ‘Color Typewriter’ concept by John Maeda.

Click on the window to give it focus and press the letter keys to type colors. The keyboard function keyPressed() is called whenever a key is pressed. keyReleased() is another keyboard function that is called when a key is released.

int maxHeight = 40;
int minHeight = 20;
int letterHeight = maxHeight; // Height of the letters
int letterWidth = 20;          // Width of the letter

int x = -letterWidth;          // X position of the letters
int y = 0;                      // Y position of the letters

boolean newletter;              

int numChars = 26;      // There are 26 characters in the alphabet
color[] colors = new color[numChars];

void setup() {
  size(640, 360);
  colorMode(HSB, numChars);
  // Set a hue value for each key
  for(int i = 0; i < numChars; i++) {
    colors[i] = color(i, numChars, numChars);    

void draw() {
  if(newletter == true) {
    // Draw the "letter"
    int y_pos;
    if (letterHeight == maxHeight) {
      y_pos = y;
      rect( x, y_pos, letterWidth, letterHeight );
    } else {
      y_pos = y + minHeight;
      rect( x, y_pos, letterWidth, letterHeight );
      rect( x, y_pos-minHeight, letterWidth, letterHeight );
    newletter = false;

void keyPressed()
  // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122)
  if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
    int keyIndex;
    if(key <= 'Z') {
      keyIndex = key-'A';
      letterHeight = maxHeight;
    } else {
      keyIndex = key-'a';
      letterHeight = minHeight;
  } else {
    letterHeight = 10;

  newletter = true;

  // Update the "letter" position
  x = ( x + letterWidth ); 

  // Wrap horizontally
  if (x > width - letterWidth) {
    x = 0;
    y+= maxHeight;

  // Wrap vertically
  if( y > height - letterHeight) {
    y = 0;      // reset y to 0

Functions Used


Sets the color used to fill shapes

Learn More

Defines the dimension of the display window width and height in units of pixels

Learn More

Allows the program to make a decision about which code to execute

Learn More

Draws a rectangle to the screen

Learn More

The setup() function is run once, when the program starts

Learn More

Creates colors for storing in variables of the color datatype

Learn More

The keyPressed() function is called once every time a key is pressed

Learn More

Changes the way Processing interprets color data

Learn More

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More

Controls a sequence of repetitions

Learn More

Disables drawing the stroke (outline)

Learn More

The background() function sets the color used for the background of the Processing window

Learn More