0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19
Kazutoshi Tsuda
15. interface and application programming (May 7, 2014)
Write an application that interface with an input &/or output device
I chose to use the Processing, a development environment and online community, for drawing the data from the input device. And I used the pressure sensor which I have used in the previous assignment as the input device.
Screen capture of Arduino IDE 1.0.5 (left) and Processing IDE 2.1.2 (right).
Sketch code
int sensorPin = 0;
int value = 0;
void setup(){
Serial.begin(9600);
}
void loop(){
value = analogRead(sensorPin) / 4;
Serial.write(value);
delay(100);
}
Processing sketch code
import processing.serial.*; //import the serial communication library
Serial port; //create object from serial class
float value;
int x;
float easing = 0.20; //see examples. > easing.
float easedValue;
void setup(){ //setup function that only runs once
size(560, 295); //set window size
frameRate(12);
println(Serial.list()); //list all the available ports
String Port = Serial.list()[0];
//port = new Serial(this, port, 9600);
//specify the port number like this.
port = new Serial(this, "/dev/tty.usbmodemfa131", 9600);
background(64); //set background color
}
void draw(){
if (port.available()> 0){
value = port.read();
value = map(value, 0, 255, 0, height); //see reference. > map()
}
float targetValue = value;
easedValue += (targetValue - easedValue) * easing;
stroke(0);
line(x, 0, x, height);
stroke(255);
line(x+1, 0, x+1, height);
line(x, 147, x, value);
line(x, 295, x, easedValue + 147);
x++;
if (x > width) {
x=0;
}
}
I wrote code refer to the related book [1] and ran the code. The black vertical lines appear when a force or pressure is applied to the sensor. The length of the line increases in response to the application of the force.
Screen capture of example: raw data (top) and eased data (bottom).
Then I rewrote the code for visualization of the data partially as you will see below.
//stroke(0);
stroke(random(0,255), random(0,255), random(0,255)); //see reference. > random()
//stroke(255);
stroke(0);
Screen capture of example: raw data (top) and eased data (bottom). It is actually color.
[1] Casey Reas and Ben Fry (2010) Getting Started with Processing. O'Reilly Media. 208 pages. http://www.processing.org/books/
![]()