As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Monday, May 7, 2012

Kim and Miles: Interfacing between Processing and Arduino


To move forward with our final project, Miles and I needed to figure out how we could interface Processing with Arduino, with the ultimate goal of having the Arduino send something to the computer through Processing, in turn producing a graphic.

This is the first step that we needed to complete in order to have the Arduino sensing the presence of our toothbrush communicate with a tablet and then produce curated videos through a site or application.

To complete this we needed to code two sketches, one in Arduino and one in Processing. In order for them to communicate with one another, we needed to use the Serial library to send values over to Processing for it to interpret. Since we were using a simple switch, those values broke down into '0' for not pressed, and '1' for pressed. Here are both of those code samples:

Processing


//Interfacing Arduino with Processing
//Sketch by Kim Lewis and Miles Koon

//When a button is pressed, the square turns orange, if not it remains blue

import processing.serial.*;

Serial myPort;    //The serial port
int val;

//
void setup()
{
  size(600,600);
  background(39,64,139);

  //selecting the port
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
}


void draw()
{
  if ( myPort.available() > 0) {  // If data is available,
    val = myPort.read();   // read it and store it in val
  }

  if (val == '0') {  // If the serial value is 0,
    background (39,64,139);  // Set background to blue
  }
  else {  // If the serial value is not 0,
    background (255,150,0);       // Set the background to Orange
  }

}


Arduino



 //Interfacing an Arduino with Processing
 //Sketch by Kim Lewis and Miles Koons, 2012

 //built off of Button sketch
 //created 2005
 //by DojoDave <http://www.0j0.org>
 //modified 30 Aug 2011
 //by Tom Igoe

 //This sketch works on the Arduino end, to help Processing change a square
 //different colors depending on the input of a button

 //The circuit:
 //* LED attached from pin 13 to ground
 //* pushbutton attached to pin 2 from +5V
 //* 10K resistor attached to pin 2 from ground

 //setting the pin numbers for the LED and button to connect with Arduino

 const int buttonPin = 2;     // the number of the pushbutton pin
 const int ledPin =  13;      // the number of the LED pin

 int buttonState = 0;  //variable that reads the state of the pushbutton

 void setup()
 {
   Serial.begin(9600);         //initialize the serial communication
   pinMode(ledPin, OUTPUT);    //initialize the LED pin as an output
   pinMode(buttonPin, INPUT);  //initialize the pushbutton pin as an input
 
 }

 void loop()
 {
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);
  //check if the pushbutton is pressed, if it is the buttonState is HIGH:
   if (buttonState == HIGH) {
     //turn LED on:
     Serial.print(0);    //Send 0 to Processing
     digitalWrite(ledPin, LOW);
   }
   else {
     //turn LED off:
     Serial.print(1);    //send 0 to Processing
     digitalWrite(ledPin, HIGH);
   }
   delay(100);
 }



The first step is to upload the Arduino sketch to the Arduino, then make sure you close out of it. Then once the Arduino is plugged in (Using the Button Example set up), you run the Processing Sketch and watch the communication happen.

Here is a video of that going on:





No comments:

Post a Comment