Making Things Interactive

March 10, 2008

Physical Pixel Representation – Bridging the gap between my Computer and the Physical World

Filed under: 5: Making Motion,Joshua Smith — jssmith44 @ 3:05 pm

For this project, I wanted to investigate bridging the gap between my computer and the physical world. I split my computer screen into 6 white squares ( a 3 x 2 matrix). I then created a physical representation of these squares with a 3 x 2 matrix of Red Led’s.  The physical matrix represents which square my mouse is within the screen. As the mouse moves into a new square, that square turns red on the screen and the corresponding LED turns on. This system consisted of a Processing Application to determine where the mouse was on the screen, run the screen display, and pass that location on to the Arduino Program using serial communication. The Arduino program then controlled the physical pixel matrix. Video is below: (Video Here) Processing Code:  

import processing.serial.*; 

Serial port; 
String colorO = "#FFFFFF";
String colorC = "#FF0000";

void setup() 
{ 
  size(900, 600); 
  noStroke(); 
  frameRate(10); 

  // List all the available serial ports in the output pane. 
  // You will need to choose the port that the Arduino board is 
  // connected to from this list. The first port in the list is 
  // port #0 and the third port in the list is port #2. 
  println(Serial.list()); 

  // Open the port that the Arduino board is connected to (in this case #0) 
  // Make sure to open the port at the same speed Arduino is using (9600bps) 
  port = new Serial(this, Serial.list()[0], 9600); 
} 

// function to test if mouse is over square 
boolean mouseOverRectA() 
{ 
  return ((mouseX >= 0)&&(mouseX = 0)&(mouseY = 301)&&(mouseX = 0)&(mouseY = 601)&&(mouseX = 0)&(mouseY = 0)&&(mouseX = 301)&(mouseY = 301)&&(mouseX = 301)&(mouseY = 601)&&(mouseX = 301)&(mouseY <= 600)); 
} 
 

  

void draw() 
{ 
  background(#FFFFFF); 
  stroke(255);
  line(0, 295, 700, 295);
  strokeWeight(2);
  
  
  if(mouseOverRectA())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('A');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('B');       // send an 'L' otherwise 
  } 
  rect(0, 0, 300, 300);  // draw square 
  
  if(mouseOverRectB())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('C');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('D');       // send an 'L' otherwise 
  } 
  rect(300, 0, 300, 300);  // draw square 
  
  if(mouseOverRectC())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('E');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('F');       // send an 'L' otherwise 
  } 
  rect(600, 0, 300, 300);  // draw square
  
  if(mouseOverRectD())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('G');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('H');       // send an 'L' otherwise 
  } 
  rect(0, 300, 300, 300);  // draw square
  
  if(mouseOverRectE())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('I');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('J');       // send an 'L' otherwise 
  } 
  rect(300, 300, 300, 300);  // draw square

if(mouseOverRectF())      // if mouse is over square 
  { 
    fill(#FF0000);         // change color 
    port.write('K');       // send an 'H' to indicate mouse is over square 
  } else { 
    fill(#FFFFFF);         // change color 
    port.write('L');       // send an 'L' otherwise 
  } 
  rect(600, 300, 300, 300);  // draw square
}

Arduino Code

int outputPin = 13;
int val;

void setup()
{
  Serial.begin(9600);
  pinMode(outputPin, OUTPUT);
}

void loop()
{
  if (Serial.available()) {
    val = Serial.read();
    if (val == 'A') {
      digitalWrite(2, HIGH);
    } 
    if (val == 'B') {
      digitalWrite(2, LOW);
    }
     if (val == 'C') {
      digitalWrite(3, HIGH);
    } 
    if (val == 'D') {
      digitalWrite(3, LOW);
    }
     if (val == 'E') {
      digitalWrite(4, HIGH);
    } 
    if (val == 'F') {
      digitalWrite(4, LOW);
      
    }
    if (val == 'G') {
      digitalWrite(5, HIGH);
    } 
    if (val == 'H') {
      digitalWrite(5, LOW);
      
    }
    if (val == 'I') {
      digitalWrite(6, HIGH);
    } 
    if (val == 'J') {
      digitalWrite(6, LOW);
      
    }
  }
}

Hardware: Each LED is directly connected to Digital Pins 1-6 and Ground.

About these ads

1 Comment »

  1. [...] Heath McKnight wrote an interesting post today onHere’s a quick excerptFor this project, I wanted to investigate bridging the gap between my computer and the physical world. I split my computer screen into 6 white squares ( a 3 x 2 matrix). I then created a physical representation of these squares with a 3 … [...]

    Pingback by Teste » Physical Pixel Representation - Bridging the gap between my … — March 10, 2008 @ 3:09 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Rubric Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: