Tactile Keyboard / Game Controller With Arduino and Processing

This instructable describes a quick and simple way to create a tactile keyboard or game controller using
- cardboard,
- aluminium foil,
- and an Arduino.

It also provides the Arduino and Processing codes to immediately start playing !

Ideal for quick prototyping of games and electronic setup, as well as for educational purposes

Step 1: Prepare the Tactile Keyboard

Cut pieces of aluminum foil to make the keys. Simply tape them to a piece of cardboard.

Shapes, dimensions, and arrangement of the keys can be varied. In this example, I used triangle shapes arranged in a Top/Down/Left/Right configuration to create a game controller.

Round shapes in a line, can make a keyboard, for a visual or musical control panel, for example.

Step 2: Wire the Keyboard to the Breadboard

The first step is to insert a 8-10cm wire between the aluminium foil and the cardboard, and tape it in place. Repeat for each

Then twist the wires so that they reach the breadboard. The wires might be sufficient to hold the keyboard in the air, otherwise you may build a simple cardboard base, for example.

Step 3: Connect the Arduino

Connect four 1 MOhm resistors to digital pins of the Arduino.

Connect the wires dangling from each of the keyboard keys, to one end of each of the resistors.

Step 4: Program the Arduino

The code below is a simple sketch that sends a character (T, B, L, R) for each of the keys (Top, Botton, Left, Right), if the sensor is above a certain threshold.

EDIT : I forgot to mention that you need to download first the library CapacitiveSensor here

You can un-comment the print commands at first, to test with the Arduino console that your keyboard is working. Do not forget that when you will use Processing to read the Serial port however, you cannot have the Arduino console at the same time.

(few more thoughts

The code can be enriched by sending also the detected value, but the Processing code would be more complex, so I did not include it here..

Similarly, the detection threshold is hardcoded, and identical for all keys. It could be made different for each, and calibrated in the setup() function.)


#include <CapacitiveSensor.h>
//Circuit
//4 tactile capacitive detectors with 1 MOhm resistors

CapacitiveSensor sensorTop = CapacitiveSensor(13, 11);
CapacitiveSensor sensorBottom = CapacitiveSensor(10, 8);
CapacitiveSensor sensorLeft = CapacitiveSensor(7, 5);
CapacitiveSensor sensorRight = CapacitiveSensor(4, 2);

//hardcoded threshold
//lower to get a more sensitive touchpad
//higher to avoid noise
const int threshold = 150;

void setup(){
  Serial.begin(9600);
}

void loop(){
  long valTop = sensorTop.capacitiveSensor(30);
  long valBottom = sensorBottom.capacitiveSensor(30);
  long valLeft = sensorLeft.capacitiveSensor(30);
  long valRight = sensorRight.capacitiveSensor(30);

  //send the pressed key info to Processing

  if (valTop> threshold){
    Serial.print("T");
    //Serial.println(valTop);
  }

  if (valBottom> threshold){
    Serial.print("B");
    //Serial.println(valBottom);
  }

  if (valLeft > threshold){
    Serial.print("L");
    //Serial.println(valLeft);
  }

  if (valRight > threshold){
    Serial.print("R");
    //Serial.println(valRight);
  }

}

Step 5: Processing Sketch: Receiver

The code below is a simple demo, able to receive the key info sent by the Arduino.

import processing.serial.*;
Serial myPort;
char key= 'N'; //default = no key

void setup(){
  size(400, 400);

  //hardcoded port selection. Mine is the second port, you'll have to check which is your Arduino Serial
  println("ports: ");
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[1], 9600);

}

void draw(){
  background(255, 128, 0);
  fill(255);
  //four white circles
  ellipse(200, 50, 80, 80);
  ellipse(200, 350, 80, 80);
  ellipse(50, 200, 80, 80);
  ellipse(350, 200, 80, 80);

  if(myPort.available() > 0){
    key = myPort.readChar();
    println(key);
  }

  fill(0);

  switch(key) {
  //if one of the keys : black circle
  case 'T':
    ellipse(200, 50, 80, 80);
    break;
  case 'B':
    ellipse(200, 350, 80, 80);
    break;
  case 'L':
    ellipse(50, 200, 80, 80);
    break;
  case 'R':
    ellipse(350, 200, 80, 80);
    break;
  //if N: do nothing
  case 'N':
    break; 
  }

  key= 'N';

}