Processing + Arduino + Kymera

Related articles: Wand-Controlled Robot

As a symbol of the magician’s intentionally directed will-power, the wand is an excellent interface for ritual computing with multimedia, and facilitates physical activity in ways that keyboards and mouses do not. Imagine projecting a giant digital sigil onto a wall, and after using the wand to banish the ritual space, you intone an incantation and thrust your wand toward the sigil which promptly ignites in a blaze of virtual fire. Or you could manipulate a virtual poppet, activate a robot servitor or eldritch machine, etc. There are nearly limitless possibilities.

Here is an example of using a Kymera Magic Wand to manipulate an icosahedron on my computer (sorry the animation is so difficult to see):

The Kymera wand is a programmable infrared remote control device developed and sold by The Wand Company in the UK. It is marketed for television RC.

Kymera Magic Wand

The Kymera can transmit up to 13 distinct infrared signals in response to these distinct actions:

  1. Rotate anticlockwise
  2. Rotate clockwise
  3. Flick upwards
  4. Flick downwards
  5. Flick left
  6. Flick right
  7. Tap on top
  8. Tap on side
  9. Big swish
  10. Push forward
  11. Double tap on top
  12. Double tap on side
  13. Pull back

The wand contains a vibrator that pulses a number of times to let you know what state the wand is in, similar to the haptic feedback in video game controllers and cellular telephones. Signal programming is a cinch as the wand records signals from other RC devices. For the example in this article, I programmed my wand with a Sony television RC.

To interface with my computer, I am using an Arduino microcontroller with a Parallax IR receiver from Jameco, and Ken Shirriff’s outstanding multi-protocol infrared remote library. The Arduino translates the IR signals into hexadecimal values which it sends to Processing over the serial port. The Processing sketch draws and animates the icosahedron in response to the hex values received.

Arduino Infrared Decoder

Source Code

Here is the source code for what is shown in the above demo video.

Arduino

/**
 * Wand Test 1 (Arduino)
 * by Joshua Madara, hyperRitual.com
 * requires IRremote library by Ken Shirriff
 * http://www.arcfn.com/2009/08/multi-protocol-infrared-remote-library.html
 */

#include <IRremote.h>

int RECV_PIN = 11;

IRrecv irrecv(RECV_PIN);

decode_results results;

void setup()
{
  Serial.begin(57600);
  irrecv.enableIRIn(); // start the receiver
}

void loop() {
  if (irrecv.decode(&results)) { // if there is something to send
    Serial.println(results.value, HEX); // send current value to Processing
    irrecv.resume(); // receive the next value
  }
}

Processing

/**
 * Wand Test 1 (Processing)
 * by Joshua Madara, hyperRitual.com
 * requires Dimension3D, Shape3D, and Icosahedron by
 * Ira Greenburg
 * Processing \ Examples \ 3D \ Form \ Icosahedra
 */

import processing.serial.*;

Serial arduinoPort; 

Icosahedron ico1;
float xRot = 0;
float yRot = 0;
float zoom = 0;
int sw1 = 0; // switch state variable

void setup(){
  size(800, 600, P3D);
  arduinoPort = new Serial(this, Serial.list()[1], 57600);
  ico1 = new Icosahedron(100);
  stroke(255, 0, 0);
  noFill();
}

void draw(){
  background(0);
  lights();
  translate(width/2, height/2);
  getWandState();
  switch(sw1) {
    case 1: // rotate down
      xRot-=0.05;
      break;
    case 2: // rotate up
      xRot+=0.05;
      break;
    case 3: // rotate left
      yRot-=0.05;
      break;
    case 4: // rotate right
      yRot+=0.05;
      break;
    case 5: // zoom in
      zoom+=5;
      break;
    case 6: // zoom out
      zoom-=5;
      break;
  }
  //pushMatrix();
  translate(0, 0, zoom);
  rotateX(xRot);
  rotateY(yRot);
  ico1.create();
  //popMatrix();
}

void getWandState() {
  while(arduinoPort.available() > 0) {
    String inBuffer = arduinoPort.readString();
    if(inBuffer != null) {
      String theValue = inBuffer.trim();
      println(theValue);
      if(theValue.equals("210") == true) { // flick down
        sw1 = 1;
      } else if(theValue.equals("A10") == true) { // flick up
        sw1 = 2;
      } else if(theValue.equals("410") == true) { // flick left
        sw1 = 3;
      } else if(theValue.equals("C10") == true) { // flick right
        sw1 = 4;
      } else if(theValue.equals("E10") == true) { // push forward
        sw1 = 5;
      } else if(theValue.equals("610") == true) { // pull back
        sw1 = 6;
      } else if(theValue.equals("110") == true) { // big swish
        sw1 = 0;
      }
    }
  }
}

TAD2011.10 Responsive Sigils

Tenth TAD project. This is a variation of Tuesday’s project. I wrote it as a prelude to a test interface I am developing for a device to showcase later. To operate, press the ‘1’ key on your keyboard to rotate the ring to the left; press ‘2’ to rotate to the right; press ‘0’ to stop the rotation; press ‘4’ to show/hide the center sigil. (The rotation is jerky online. I need to sort out what that is about.)

Source code:

/** ResponsiveSigils
 * by Joshua Madara, hyperRitual.com
 * Press 1 to rotate ring to the left
 * Press 2 to rotate ring to the right
 * Press 0 to stop rotating ring
 * Press 4 to toggle the sigil in/visisble
 * Sigils drawn in GIMP with brushes by
 * http://redheadstock.deviantart.com/
 */

PImage ring;
PImage sigil;
float counter = 0; // count rotation
int sw1 = 0; // switch 1 state variable
int sglAlpha = 0; // sigil alpha value

void setup() {
  size(400, 400);
  ring = loadImage("ring.png");
  sigil = loadImage("sigil.png");
  imageMode(CENTER);
}

void draw() {
  background(0);
  //switch to control rotation of ring
  switch(sw1) {
    case 0: // stop rotating
      rotateRing(counter);
      break;
    case 1: // rotate left
      counter-=0.005;
      rotateRing(counter);
      break;
    case 2: // rotate right
      counter+=0.005;
      rotateRing(counter);
      break;
  }
  // show/hide sigil
  pushMatrix();
  tint(255, sglAlpha);
  image(sigil, width/2, height/2);
  popMatrix();
}

void keyPressed() {
  if(key == '0') {
    sw1 = 0;
  } else if(key == '1') {
    sw1 = 1;
  } else if (key == '2') {
    sw1 = 2;
  } else if(key == '4') {
    if(sglAlpha == 0) {sglAlpha = 255;} else {sglAlpha = 0;}
  }
}

void rotateRing(float dir) {
    pushMatrix();
    translate(width/2, height/2);
    rotate(dir);
    noTint();
    image(ring, 0, 0);
    translate(-width/2, -height/2);
    popMatrix();
}

TAD2011.08 Rotating Sigils

My eighth TAD project is a Processing sketch that rotates two PNG images in opposite directions. The images were drawn in GIMP using brushes by redheadstock.

Source code:

/** Rotating Sigils
 * by Joshua Madara, hyperRitual.com
 * Sigils drawn in GIMP with brushes by
 * http://redheadstock.deviantart.com/
 */

PImage sigil;
PImage ring;
float counter1 = 0;
float counter2 = 0;

void setup() {
  size(400, 400);
  sigil = loadImage("sigil.png");
  ring = loadImage("ring.png");
  imageMode(CENTER);
}

void draw() {
  background(0);
  
  // rotate and draw ring
  counter1+=0.005;
  pushMatrix();
  translate(width/2, height/2);
  rotate(counter1);
  image(ring, 0, 0);
  translate(-width/2, -height/2);
  popMatrix();
  
  // rotate and draw sigil
  counter2-=0.005;
  pushMatrix();
  translate(width/2, height/2);
  rotate(counter2);
  image(sigil, 0, 0);
  translate(-width/2, -height/2);
  popMatrix();
}

TAD2011.07 Color Nav

My seventh TAD project is a Processing sketch that creates a sort of image map based on colors. To demonstrate, click on the below image. Clicking the blue circle will open one Wikipedia page (in a new window); clicking the red square will open a different Wikipedia page. Note that the links work even though the circle and square intersect. That is because when you click on the image, the sketch retrieves the pixel color at your mouse position; if the color is red, the sketch opens one link; if the color is blue, the sketch opens a different link.

The example here is quite simple, but imagine a sketch that returns esoteric qualities of a color when you select that color from an image of a Tarot card.

Source code:

PImage circleSquare;

void setup() {
  size(170, 100);
  circleSquare = loadImage("circle_square.png");
}

void draw() {
  background(0);
  image(circleSquare, 0, 0);
}

void mousePressed() {
  int theColor = circleSquare.get(mouseX, mouseY);
  if(theColor == color(255, 0, 0)) { // red
    link("http://en.wikipedia.org/wiki/Red_Square", "_new");
  } else if(theColor == color(0, 0, 255)) { // blue
    link("http://en.wikipedia.org/wiki/Blue_Circle_Industries", "_new");
  }
}