a port of the Processing Visualization Language

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 called it's ASCII value. These numbers can be used to position shapes in space.

Original Processing.org Example: Keyboard

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

int numChars = 26;

color[] colors = new color[numChars];

int keyIndex;

float keyScale;

int rectWidth;



    

void setup()

{

  size(200, 200);

  noStroke();

  background(0);

  keyScale = 200/numChars-1.0;

  rectWidth = width/4;

}



void draw()

{ 

  if(keyPressed) {

    if(key >= 'A' && key <= 'z') {

      if(key <= 'Z') {

        keyIndex = key-'A';

      } else {

        keyIndex = key-'a';

      }

      fill(millis()%255);

      float beginRect = rectWidth/2 + keyIndex*keyScale-rectWidth/2;

      rect(beginRect, 0.0, rectWidth, height);

    }

  }

}
Fork me on GitHub