Tutorial.PhysicalPixel History

Hide minor edits - Show changes to output

May 02, 2012, at 04:09 PM by Scott Fitzgerald -
Changed line 38 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.ino lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/04.Communication/PhysicalPixel/PhysicalPixel.ino lang=arduino tabwidth=4:)
November 16, 2011, at 04:14 AM by Scott Fitzgerald -
Changed line 38 from:
(:source http://arduino.cc/en/pub/code/new-extension/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.ino lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.ino lang=arduino tabwidth=4:)
September 30, 2011, at 03:14 AM by Scott Fitzgerald -
Changed line 38 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.pde lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/new-extension/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.ino lang=arduino tabwidth=4:)
September 23, 2010, at 10:27 PM by Christian Cerrito -
Changed lines 3-4 from:
!!Physical Pixel
to:
!!!Physical Pixel
September 23, 2010, at 10:01 PM by Christian Cerrito -
Changed lines 23-24 from:
%width=400px%[[Attach:physicalPixel-circuit3.png|Attach:physicalPixel-circuit3.png]]
to:
%height=300px%[[Attach:ExampleCircuit_bb.png | Attach:ExampleCircuit_bb.png]]
Changed lines 31-34 from:
%width=400px%[[Attach:Blink_schem2.png|Attach:Blink_schem2.png]]


to:
%height=300px%[[ Attach:ExampleCircuit_sch.png | Attach:ExampleCircuit_sch.png]]


September 17, 2010, at 09:05 PM by Tom Igoe -
Added lines 49-50:
Mouse over the square to turn the LED on and off.
September 17, 2010, at 09:04 PM by Tom Igoe -
Changed lines 50-54 from:
The Max/MSP patch looks like the image below. The text of the patch is linked behind the image. Copy it and paste it into a new patch window.

%width=600px%[[Attach:max-physicalPixel.txt|Attach:max-physicalPixel.png]]

to:
The Max/MSP patch looks like the image below. Copy it from the code sample above and paste it into a new patch window.

%width=600px%[[Attach:max-physicalPixel.png|Attach:max-physicalPixel.png]]

September 17, 2010, at 09:03 PM by Tom Igoe -
Changed lines 45-119 from:
[@

// mouseover serial

// Demonstrates how to send data to the Arduino I/O board, in order to
// turn ON a light if the mouse is over a square and turn it off
// if the mouse is not.

// created 2003-4
// based on examples by Casey Reas and Hernando Barragan
// modified 18 Jan 2009
// by Tom Igoe
// This example code is in the public domain.


import processing.serial.*;

float boxX;
float boxY;
int boxSize = 20;
boolean mouseOverBox = false;

Serial port;

void setup() {
size(200, 200);
boxX = width/2.0;
boxY = height/2.0;
rectMode(RADIUS);

// 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);

}

void draw()
{
background(0);

// Test if the cursor is over the box
if (mouseX > boxX-boxSize && mouseX < boxX+boxSize &&
mouseY > boxY-boxSize && mouseY < boxY+boxSize) {
mouseOverBox = true;
// draw a line around the box and change its color:
stroke(255);
fill(153);
// send an 'H' to indicate mouse is over square:
port.write('H');
}
else {
// return the box to it's inactive state:
stroke(153);
fill(153);
// send an 'L' to turn the LED off:
port.write('L');
mouseOverBox = false;
}

// Draw the box
rect(boxX, boxY, boxSize, boxSize);
}


@]

!!! Output
As you mouse over the center square, the LED on pin 13 should turn on and off. The Processing applet looks like this:
to:
Copy the Processing code from the code sample above. As you mouse over the center square, the LED on pin 13 should turn on and off. The Processing applet looks like this:
September 17, 2010, at 09:02 PM by Tom Igoe -
Changed lines 5-6 from:
An example of using the Arduino board to receive data from the computer. In this case, the Arduino boards turns on an LED when it receives the character 'H', and turns off the LED when it receives the character 'L'.
to:
This example example uses the Arduino board to receive data from the computer. The Arduino boards turns on an LED when it receives the character 'H', and turns off the LED when it receives the character 'L'.
Changed lines 20-21 from:
An LED on pin 13.
to:
Attach an LED to pin 13. The long leg, or anode, goes to pin 13. The short leg, or cathode, goes to ground. You can also use the built-in LED on most Arduino boards.
September 16, 2010, at 10:12 PM by Tom Igoe -
Changed line 38 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.pde language=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.pde lang=arduino tabwidth=4:)
August 27, 2010, at 08:22 AM by Christian Cerrito -
Changed lines 125-143 from:
%width=600px%[[Attach:max-physicalPixel.txt|Attach:max-physicalPixel.png]]
to:
%width=600px%[[Attach:max-physicalPixel.txt|Attach:max-physicalPixel.png]]


!!!See Also:

* [[Serial/read | @@serial.read()@@ ]]()
* [[Serial/available | @@serial.available@@]]()
* [[Tutorial/ifStatement | @@if@@ statement]]

* [[Tutorial/Dimmer]] - move the mouse to change the brightness of an LED.
* [[Tutorial/Graph | Graph ]] - send data to the computer and graph it in Processing
* [[Tutorial/VirtualColorMixer | Virtual Color Mixer]] - send multiple variables from an Arduino to the computer and read them in Processing.
* [[Tutorial/SerialCallResponse | Serial Call Response]] - send multiple variables using a call and response (handshaking) method.
* [[Tutorial/SerialCallResponseASCII | Serial Call and Response ASCII]] - send multiple vairables using a call-and-response (handshaking) method, and ASCII-encoding the values before sending.
* [[Tutorial/SwitchCase2 | Serial Input (Switch (case) Statement)]] - How to take different actions based 0n characters received by the serial port.



August 27, 2010, at 08:13 AM by Christian Cerrito -
Added lines 9-17:
!!!Hardware Required
* Arduino Board
* Analog Sensor (potentiometer, photocell, FSR, etc.)

'''Software Required'''
* [[http://www.processing.org |Processing]] or
* [[http://www.cycling74.com/products/max5| Max/MSP version 5]]

August 27, 2010, at 08:10 AM by Christian Cerrito -
Changed line 29 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/Communication/PhysicalPixel/PhysicalPixel.pde language=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/PhysicalPixel/PhysicalPixel.pde language=arduino tabwidth=4:)
February 23, 2010, at 11:30 PM by Tom Igoe -
Changed lines 29-50 from:
%color=#7e7e7e%/*
%color=#7e7e7e% Physical Pixel
%color=#7e7e7e%
%color=#7e7e7e% An example of using the Arduino board to receive data from the
%color=#7e7e7e% computer. In this case, the Arduino boards turns on an LED when
%color=#7e7e7e% it receives the character 'H', and turns off the LED when it
%color=#7e7e7e% receives the character 'L'.
%color=#7e7e7e%
%color=#7e7e7e% The data can be sent from the Arduino serial monitor, or another
%color=#7e7e7e% program like Processing (see code below), Flash (via a serial-net
%color=#7e7e7e% proxy), PD, or Max/MSP.
%color=#7e7e7e%
%color=#7e7e7e% The circuit:
%color=#7e7e7e% * LED connected from digital pin 13 to ground
%color=#7e7e7e%
%color=#7e7e7e% created 2006
%color=#7e7e7e% by David A. Mellis
%color=#7e7e7e% modified 14 Apr 2009
%color=#7e7e7e% by Tom Igoe and Scott Fitzgerald
%color=#7e7e7e%
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/PhysicalPixel
%color=#7e7e7e% */
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/Communication/PhysicalPixel/PhysicalPixel.pde language=arduino tabwidth=4:)
Deleted lines 30-55:
const %color=#cc6600%int%% ledPin = 13; %color=#7e7e7e%// the pin that the LED is attached to
%color=#cc6600%int%% incomingByte; %color=#7e7e7e%// a variable to read incoming serial data into

%color=#cc6600%void%% %color=#cc6600%'''setup'''%%() {
%color=#7e7e7e%// initialize serial communication:
%color=#cc6600%Serial%%.%color=#cc6600%begin%%(9600);
%color=#7e7e7e%// initialize the LED pin as an output:
%color=#cc6600%pinMode%%(ledPin, %color=#006699%OUTPUT%%);
}

%color=#cc6600%void%% %color=#cc6600%'''loop'''%%() {
%color=#7e7e7e%// see if there's incoming serial data:
%color=#cc6600%if%% (%color=#cc6600%Serial%%.%color=#cc6600%available%%() > 0) {
%color=#7e7e7e%// read the oldest byte in the serial buffer:
incomingByte = %color=#cc6600%Serial%%.%color=#cc6600%read%%();
%color=#7e7e7e%// if it's a capital H (ASCII 72), turn on the LED:
%color=#cc6600%if%% (incomingByte == %color=#006699%'H'%%) {
%color=#cc6600%digitalWrite%%(ledPin, %color=#006699%HIGH%%);
}
%color=#7e7e7e%// if it's an L (ASCII 76) turn off the LED:
%color=#cc6600%if%% (incomingByte == %color=#006699%'L'%%) {
%color=#cc6600%digitalWrite%%(ledPin, %color=#006699%LOW%%);
}
}
}
Added line 33:
Changed lines 48-49 from:

to:
// This example code is in the public domain.

August 27, 2009, at 08:56 PM by Tom Igoe -
Added lines 16-18:
[-image developed using [[http://www.fritzing.org |Fritzing]]. For more circuit examples, see the [[http://fritzing.org/projects/|Fritzing project page]] -]

July 05, 2009, at 07:37 PM by Tom Igoe -
Changed lines 24-78 from:
to:
(:div class=code :)

%color=#7e7e7e%/*
%color=#7e7e7e% Physical Pixel
%color=#7e7e7e%
%color=#7e7e7e% An example of using the Arduino board to receive data from the
%color=#7e7e7e% computer. In this case, the Arduino boards turns on an LED when
%color=#7e7e7e% it receives the character 'H', and turns off the LED when it
%color=#7e7e7e% receives the character 'L'.
%color=#7e7e7e%
%color=#7e7e7e% The data can be sent from the Arduino serial monitor, or another
%color=#7e7e7e% program like Processing (see code below), Flash (via a serial-net
%color=#7e7e7e% proxy), PD, or Max/MSP.
%color=#7e7e7e%
%color=#7e7e7e% The circuit:
%color=#7e7e7e% * LED connected from digital pin 13 to ground
%color=#7e7e7e%
%color=#7e7e7e% created 2006
%color=#7e7e7e% by David A. Mellis
%color=#7e7e7e% modified 14 Apr 2009
%color=#7e7e7e% by Tom Igoe and Scott Fitzgerald
%color=#7e7e7e%
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/PhysicalPixel
%color=#7e7e7e% */

const %color=#cc6600%int%% ledPin = 13; %color=#7e7e7e%// the pin that the LED is attached to
%color=#cc6600%int%% incomingByte; %color=#7e7e7e%// a variable to read incoming serial data into

%color=#cc6600%void%% %color=#cc6600%'''setup'''%%() {
%color=#7e7e7e%// initialize serial communication:
%color=#cc6600%Serial%%.%color=#cc6600%begin%%(9600);
%color=#7e7e7e%// initialize the LED pin as an output:
%color=#cc6600%pinMode%%(ledPin, %color=#006699%OUTPUT%%);
}

%color=#cc6600%void%% %color=#cc6600%'''loop'''%%() {
%color=#7e7e7e%// see if there's incoming serial data:
%color=#cc6600%if%% (%color=#cc6600%Serial%%.%color=#cc6600%available%%() > 0) {
%color=#7e7e7e%// read the oldest byte in the serial buffer:
incomingByte = %color=#cc6600%Serial%%.%color=#cc6600%read%%();
%color=#7e7e7e%// if it's a capital H (ASCII 72), turn on the LED:
%color=#cc6600%if%% (incomingByte == %color=#006699%'H'%%) {
%color=#cc6600%digitalWrite%%(ledPin, %color=#006699%HIGH%%);
}
%color=#7e7e7e%// if it's an L (ASCII 76) turn off the LED:
%color=#cc6600%if%% (incomingByte == %color=#006699%'L'%%) {
%color=#cc6600%digitalWrite%%(ledPin, %color=#006699%LOW%%);
}
}
}

(:divend:)

!!! Processing Code
Changed lines 80-111 from:
const int ledPin = 13; // the pin that the LED is attached to
int incomingByte; // a variable to read incoming serial data into

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

void loop() {
// see if there's incoming serial data:
if (Serial.available() > 0) {
// read the oldest byte in the serial buffer:
incomingByte = Serial.read();
// if it's a capital H (ASCII 72), turn on the LED:
if (incomingByte == 'H') {
digitalWrite(ledPin, HIGH);
}
// if it's an L (ASCII 76) turn off the LED:
if (incomingByte == 'L') {
digitalWrite(ledPin, LOW);
}
}
}

@]

!!! Processing Code

[@
to:
June 25, 2009, at 11:26 PM by Tom Igoe -
June 25, 2009, at 11:07 PM by Tom Igoe -
Changed lines 19-22 from:
%width=400px%[[Attach:blink_schem2.png|Attach:blink_schem2.png]]


to:
%width=400px%[[Attach:Blink_schem2.png|Attach:Blink_schem2.png]]


June 25, 2009, at 11:07 PM by Tom Igoe -
Changed lines 19-22 from:
%width=400px%[[Attach:blink_schem.png|Attach:blink_schem.png]]


to:
%width=400px%[[Attach:blink_schem2.png|Attach:blink_schem2.png]]


June 25, 2009, at 11:06 PM by Tom Igoe -
Changed line 13 from:
[-[-click the image to enlarge-]-]
to:
[-click the image to enlarge-]
Changed lines 16-17 from:

to:
!!!Schematic

[-click the image to enlarge-]
%width=400px%[[Attach:blink_schem.png|Attach:blink_schem.png]]


June 25, 2009, at 11:05 PM by Tom Igoe -
Changed line 21 from:
#define ledPin 13 // the pin that the LED is attached to
to:
const int ledPin = 13; // the pin that the LED is attached to
April 16, 2009, at 07:57 PM by Tom Igoe -
Changed lines 10-11 from:
%width=400px%[[Attach:physicalPixel-circuit.png|Attach:physicalPixel-circuit.png]]
to:
Added lines 13-17:
[-[-click the image to enlarge-]-]
%width=400px%[[Attach:physicalPixel-circuit3.png|Attach:physicalPixel-circuit3.png]]


April 16, 2009, at 12:02 AM by Tom Igoe -
Changed lines 10-11 from:
to:
%width=400px%[[Attach:physicalPixel-circuit.png|Attach:physicalPixel-circuit.png]]
Changed lines 17-21 from:
int outputPin = 13;
int val;

void setup()
{
to:
#define ledPin 13 // the pin that the LED is attached to
int incomingByte; // a variable to read incoming serial data into

void setup() {
// initialize serial communication:
Changed lines 23-24 from:
pinMode(outputPin, OUTPUT);
to:
// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
Changed lines 27-32 from:
void loop()
{
if (Serial.available()) {
val = Serial.read();
if (val == 'H') {
digitalWrite(outputPin, HIGH);
to:
void loop() {
// see if there's incoming serial data:
if (Serial.available() > 0) {
// read the oldest byte in the serial buffer:
incomingByte = Serial.read();
// if it's a capital H (ASCII 72), turn on the LED:
if (incomingByte == 'H') {
digitalWrite(ledPin, HIGH);
Changed lines 36-37 from:
if (val == 'L') {
digitalWrite(outputPin, LOW);
to:
// if it's an L (ASCII 76) turn off the LED:
if (incomingByte == 'L') {
digitalWrite(ledPin, LOW);
Added line 42:
Added line 48:
Changed lines 50-51 from:
// by BARRAGAN <http://people.interaction-ivrea.it/h.barragan>
to:
Changed line 52 from:
// turn ON a light if the mouse is over a rectangle and turn it off
to:
// turn ON a light if the mouse is over a square and turn it off
Changed lines 54-56 from:

// created 13 May 2004
to:

// created 2003-4
// based on examples by Casey Reas and Hernando Barragan
// modified 18 Jan 2009
// by Tom Igoe

Changed lines 62-67 from:
to:

float boxX;
float boxY;
int boxSize = 20;
boolean mouseOverBox = false;
Changed lines 69-75 from:

void setup()
{
size(200, 200);
noStroke();
frameRate(10);
to:

void setup() {
size(200, 200);
boxX = width/2.0;
boxY = height/2.0;
rectMode(RADIUS);
Changed line 81 from:
to:
Changed lines 85-88 from:
}

// function to test if mouse is over square
boolean mouseOverRect()
to:

}

void draw()
Changed lines 90-102 from:
return ((mouseX >= 50)&&(mouseX <= 150)&&(mouseY >= 50)&(mouseY <= 150));
}

void draw()
{
background(#222222);
if(mouseOverRect()) // if mouse is over square
{
fill(#BBBBB0); // change color
port.write('H'); // send an 'H' to indicate mouse is over square
} else {
fill(#666660); // change color
port.write('L'); // send an 'L' otherwise
to:
background(0);

// Test if the cursor is over the box
if (mouseX > boxX-boxSize && mouseX < boxX+boxSize &&
mouseY > boxY-boxSize && mouseY < boxY+boxSize) {
mouseOverBox = true;
// draw a line around the box and change its color:
stroke(255);
fill(153);
// send an 'H' to indicate mouse is over square:
port.write('H');
Changed lines 102-104 from:
rect(50, 50, 100, 100); // draw square
}
@]
to:
else {
// return the box to it's inactive state:
stroke(153);
fill(153);
// send an 'L' to turn the LED off:
port.write('L');
mouseOverBox = false;
}

// Draw the box
rect(boxX, boxY, boxSize, boxSize);
}


@]

!!! Output
As you mouse over the center square, the LED on pin 13 should turn on and off. The Processing applet looks like this:

Attach:physicalPixel-output.png

!!! Max patch
The Max/MSP patch looks like the image below. The text of the patch is linked behind the image. Copy it and paste it into a new patch window.

%width=600px%[[Attach:max-physicalPixel.txt|Attach:max-physicalPixel.png]]
April 11, 2007, at 05:12 PM by David A. Mellis -
Added lines 1-91:
''Examples > Communication''

!!Physical Pixel

An example of using the Arduino board to receive data from the computer. In this case, the Arduino boards turns on an LED when it receives the character 'H', and turns off the LED when it receives the character 'L'.

The data can be sent from the Arduino serial monitor, or another program like Processing (see code below), Flash (via a serial-net proxy), PD, or Max/MSP.

!!!Circuit

An LED on pin 13.

!!!Code

[@
int outputPin = 13;
int val;

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

void loop()
{
if (Serial.available()) {
val = Serial.read();
if (val == 'H') {
digitalWrite(outputPin, HIGH);
}
if (val == 'L') {
digitalWrite(outputPin, LOW);
}
}
}
@]

!!! Processing Code

[@
// mouseover serial
// by BARRAGAN <http://people.interaction-ivrea.it/h.barragan>

// Demonstrates how to send data to the Arduino I/O board, in order to
// turn ON a light if the mouse is over a rectangle and turn it off
// if the mouse is not.

// created 13 May 2004

import processing.serial.*;

Serial port;

void setup()
{
size(200, 200);
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 mouseOverRect()
{
return ((mouseX >= 50)&&(mouseX <= 150)&&(mouseY >= 50)&(mouseY <= 150));
}

void draw()
{
background(#222222);
if(mouseOverRect()) // if mouse is over square
{
fill(#BBBBB0); // change color
port.write('H'); // send an 'H' to indicate mouse is over square
} else {
fill(#666660); // change color
port.write('L'); // send an 'L' otherwise
}
rect(50, 50, 100, 100); // draw square
}
@]

Share