Categories
Uncategorized

Accelerometer Art

Accelerometer Art

Accelerometer Art

Accelerometer Art

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!)

Categories
Uncategorized

MilwaukeeDevHouse5 Time Lapse

[ There should be a video here but blip.tv disappeared from the Internet… ]

Time Lapse Bot was at Bucketworks for MilwaukeeDevHouse5 on December 3rd, 2010. If you weren’t there, well, at least you can enjoy this video.

This video is released under a Creative Commons Attribution License. The music titled “cyber seeds” is from cypher tales via Jamendo and has a Creative Commons Attribution License. You can also find this video at blip.tv as well as Vimeo. Enjoy!

Categories
Uncategorized

DHMN

DHMN

Our friends to the north are working on building something called the [D]istributed [H]acker [M]aker [N]etwork. (or DHMN for short) and they’ve got a new web site at dhmn.net and they mentioned needing a logo… so after a bit of talk about what DHMN is and represents, Tim came up with one, and I came up with a variation on it, which you see above.

See all the logos and if you have a better idea, let me/us/them know, or feel free to create one yourself and tell us about it.

The logo I designed was quick ‘n dirty, still very rough, but the ideas I was thinking about were: network, node, circuits, wrench, tools, big/little dipper. I also wanted something fairly simple, which would also work at small sizes.

Thoughts?

Categories
Uncategorized

MKEDH5

MilwaukeeDevHouse5 is Friday, December 3rd, 2010… Details at Web414.com

See Also: MilwaukeeDevHouse5 – Hack the Bucket! and BarCamp ReCap at Web414 and maybe even Design Inspiration.

Come ready to think, discuss, and take action… Your ideas? We want them!

Categories
Uncategorized

Charts & Graphs

I’m in need of graphing some data, and since I looked at the Google Chart Tools long ago but never did anything interesting with it, I figured I’d give it a spin.

Google’s API is pretty simple to use, you feed it a URL, and you get an image in return. Here’s an example expanded out a bit:

http://chart.apis.google.com/chart?
  cht=lc&
  chs=600x400&
  chg=10,5,5,5&
  chco=ff0000&
  chxt=x,y&
  chxr=1,0,100,5|0,0,24,1&
  chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2

Each parameter controls some part of the image you get returned. (Want to see it? View the URL.)

You should get something that looks like this:

Chart

Wow… but not really. This is probably one of the simplest examples of a chart, but it serves my purpose.

Of course, since I’m not always content relying on others to host my data, I wanted a way to generate and store the image. You can do that too…

curl -o 20101130.png 'http://chart.apis.google.com/chart?cht=lc&chs=600x400&chg=10,5,5,5&chco=ff0000&chxt=x,y&chxr=1,0,100,5|0,0,24,1&chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2'

Just use curl to make the request and store the image in a file named 20101130.png (or whatever the date is, or file name you’d prefer.) Obviously you’ll need curl installed. If you need to generate a new chart everyday this is ripe for automating.

I also looked at jQuery Visualize as an option. It’s quite different than the Google Chart API as to how it functions.

Chart

With jQuery Visualize you don’t actually create a chart. Well, you do create a table of data, and jQuery Visualize does all the heavy lifting and creates the chart based entirely on your well-formed tabular data.

I sort of like this approach because there’s no external image files to generate, host, or worry about. You just make a table, and include a bit of Javascript. (Of course there are other concerns/issues, but simplicity is pretty high.)

I’m still evaluating what my final choice will be for my current project. If this were 10 years ago, I probably would have used Perl to generate the image files. If it were 5 years ago, I probably would have used Perl to generate some SVG files…

jQuery Visualize uses the HTML 5 Canvas element, so they get some points in the “innovation” column I guess… Also, jQuery Visualize requires less math, and in my world, the less math I have to do, the better!