Tangible User Interfaces - Fall 2011

Description:

The original idea was to have 2 pots controlling the x and y position of a cursor in processing, and another sensitive resistor control the background color of the screen. I figured out that in order to send separate inputs through the same COM port, I had to multiplex the signal. The other option was to use 2 or 3 different arduino boards to send the information to processing by different COM ports.

I don't have multple arduino boards, so what the code is doing now, is controlling the X and Y position, and the background color with a force resistor. The movement of the cursor is gonna be always diagonal as X and Y are controlled by the same input.

Materials:

-cardboard

-glue

- styrofoam to equally distribute force applied to the FSR.

-FSR

-2 Potentiometers

Arduino Code:

//Part 1 Receive Analog Data from Arduino and Send it on the serial data line.

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

void loop() {
  // send the value of analog input 0:
  Serial.println(analogRead(A0));
  // wait a bit for the analog-to-digital converter
  // to stabilize after the last reading:
  delay(10);
}

Processing Code:

// Moves a cursor depending on the input from the sensitive resistor.
// Based on the pressure applied to a PSR while controlling the cursor,
// the background changes.

// Based on the code from Keith Peters (www.bit-101.com).

 import processing.serial.*;
 
 Serial myPort;        // The serial port
 int xPos = 1;         // horizontal position of the graph
 float x = 100;
 float y = 100;
 float angle1 = 0.0;
 float segLength = 60;
 
 void setup () {
 // set the window size:
  size(600, 600);
  smooth();
  strokeWeight(30.0);
  stroke(0, 100);
  myPort = new Serial(this, "COM3", 9600);
  myPort.bufferUntil('\n');
 
 
 }
 
 void draw () {
 // everything happens in the serialEvent()
 }
 
 void serialEvent (Serial myPort) {
 // get the ASCII string:
 String inString = myPort.readStringUntil('\n');

  float dx = float(inString) - x;
  float dy = float(inString) - y;
  dx = map(dx, 0, 1023, 0, height);
  dy = map(dy, 0, 1023, 0, height);
 
  angle1 = atan2(dy, dx);  
  x = float(inString) - (cos(angle1) * segLength);
  y = float(inString) - (sin(angle1) * segLength);
  // Move the cursor according to the pots
 
  background(dx*6);
  // Set Background Color according to the pressure applied to the sensor.
 
  segment(x, y, angle1);
  ellipse(x, y, 20, 20);
 
}

void segment(float x, float y, float a) {
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
 }