Tag: graphs

At MilwaukeeDevHouse5 Matt and I played with Arduinos, so here, with the fairly uninspiring name of “Accelerometer Art” I present three screen shots of a Processing application displaying data from an ADXL335 accelerometer connected to my MacBook via an Arduino.

Here’s the code that runs on the Arduino…

/*
 * Accelerometer.pde
 */

#define aref_voltage 3.3

int xpin = 1;
int ypin = 2;
int zpin = 3;

void setup(void) {
  Serial.begin(9600);   
  analogReference(EXTERNAL);
}

void loop(void) {
  int xval = (analogRead(xpin));
  int yval = (analogRead(ypin));
  int zval = (analogRead(zpin));

  Serial.print (xval);
  Serial.print (" ");
  Serial.print (yval);
  Serial.print (" ");
  Serial.print (zval);
  Serial.print (" \n");
  
  delay(10);
}

And here’s the code that runs in Processing…

/*
 * Accelerometer_Graph.pde
 */

import processing.serial.*;

Serial myPort;
int xPos = 0;
int yPos = 0;
int zPos = 0;

void setup () {
  size(1024, 768);
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
  myPort.bufferUntil('\n');
  background(0);
}

void draw () {
  // everything happens in the serialEvent()
}

void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');

  String[] nums = split(inString, ' ');
  String inStringx = nums[0];
  String inStringy = nums[1];
  String inStringz = nums[2];


  if (inStringx != null) {
    inStringx = trim(inStringx);
    float inBytex = float(inStringx);
    inBytex = map(inBytex, 0, 1023, 0, height);

    stroke(255,0,0);
    point(xPos, height - inBytex);
    strokeWeight(3);

    if (xPos >= width) {
      xPos = 1;
      background(0);
    }
    else {
      xPos = xPos + 1;
    }
  }

  if (inStringy != null) {
    inStringy = trim(inStringy);
    float inBytey = float(inStringy);
    inBytey = map(inBytey, 0, 1023, 0, height);

    stroke(0,255,0);
    point(yPos, height - inBytey);
    strokeWeight(3);

    if (yPos >= width) {
      yPos = 2;
      background(0);
    }
    else {
      yPos = yPos + 1;
    }
  }

  if (inStringz != null) {
    inStringz = trim(inStringz);
    float inBytez = float(inStringz);
    inBytez = map(inBytez, 0, 1023, 0, height);

    stroke(0,0,255);
    point(zPos, height - inBytez);
    strokeWeight(3);

    if (zPos >= width) {
      zPos = 3;
      background(0);
    }
    else {
      zPos = zPos + 1;
    }
  }
}

void keyPressed() {
  if (int(key) == 113) {
    exit();
  }
}

The Processing code was based on an example from Tom Igoe which he placed in the public domain. (Thanks Tom!)

I heavily violated the DRY rule with this code, so it should really be re-written to be more efficient. Besides all that, it does actually work, as you can see from the awesome graphics above. (Thanks to Matt Gauger for helping with the code, and yes, he scolded me for violating the DRY rule.)

This was a great first step into Processing for me, and I look forward to improving this code, as well as explore some other ideas I have for graphing data.

(If you’ve got any pointers to great tutorials, blogs, or web sites focusing on Processing, let me know!)