Making an analogue gauge with Processing

I’ve been looking around the internet for an easy way to make an “analog gauge” in Processing to help me get a better handle on an IMU I got from Sparkfun. Looking at numbers go by on the serial terminals was making me more motion sick than anything else.

Step one was to try to make an arrow.  Luckily the internet came to the rescue and I found this in one of the Processing forums. The function is :

void arrow(int x1, int y1, int x2, int y2) {
  line(x1, y1, x2, y2);
  pushMatrix();
  translate(x2, y2);
  float a = atan2(x1-x2, y2-y1);
  rotate(a);
  line(0, 0, -10, -10);
  line(0, 0, 10, -10);
  popMatrix();
} 

With that knowledge I needed to find a way to take the angle I’m getting back form the IMU and tell Processing to draw me the gauge.  Somewhere in the back of my mind I remembered there was something that I could give an angle and a radius and I could get X and Y position of the tip of that Radius.  Another quick internet search and I found Polar Coordinates and then found there as already a tutorial on that on the Processing website. Quick re-factor of that code and I got this:

void guage(float r, float angle) {
  // Conver from Degree -> Rad
  angle = -angle*(PI/180) ;
    // Convert Polar -> Cartesian
  float x = r * cos(angle);
  float y = r * sin(angle);

  arrow(0,0, (int)x, (int)y) ;
}

And now to make it look like a guage just add a circle around it!

ellipse(0, 0, height/2, height/2) ;
guage(height/2, angleX) ;

So now that I can draw a cool guage-looking thing on the screen I made my Arduino print out to serial a tab-separated list of X and Y values that are read by the Processing sketch and the gauges now tell me the angle of the IMU!

import processing.serial.*; 

Serial arduino;

float angleX = 0 ;
float angleY = 0 ;

float minX=0 ; 
float maxX=0 ;
float minY=0 ;
float maxY=0 ;

void setup() {
  size(800,600) ;
  
  arduino = new Serial(this, Serial.list()[0], 9600);
  arduino.bufferUntil('\n');
  
}

void draw() {
  background(255);
  
  translate(width/4, height/2);
  
  stroke(0,0,0) ;
  ellipse(0, 0, height/2, height/2) ;
  strokeWeight(2);
  stroke(255,0,0) ;
  guage(height/4, angleX) ;
  
  translate(width/2, 0);
  stroke(0,0,0) ;
  ellipse(0, 0, height/2, height/2) ;
  stroke(0,255,0) ;
  guage(height/4, angleY) ;
  
  if (minX > angleX) minX = angleX ;
  if (minY > angleY) minY = angleY ;
  if (maxX < angleX) maxX = angleX ;
  if (maxY < angleY) maxY = angleY ;
  
  println(minX + "\t" + maxX + "\t" + minY + "\t" + maxY) ;
  
}

void serialEvent (Serial arduino)
{
 //get the ASCII strings:
 angleX = float(trim(arduino.readStringUntil('\t'))) ;
 angleY = float(trim(arduino.readStringUntil('\t'))) ;
 
}

void guage(float r, float angle) {
  // Conver from Degree -> Rad
  angle = -angle*(PI/180) ;
    // Convert Polar -> Cartesian
  float x = r * cos(angle);
  float y = r * sin(angle);

  arrow(0,0, (int)x, (int)y) ;
}

void arrow(int x1, int y1, int x2, int y2) {
  line(x1, y1, x2, y2);
  pushMatrix();
  translate(x2, y2);
  float a = atan2(x1-x2, y2-y1);
  rotate(a);
  line(0, 0, -10, -10);
  line(0, 0, 10, -10);
  popMatrix();
} 

Playing with colors

I’ve been looking around the internet lately for interesting ways to calculate colors. More than anything I was looking for functions that I could use to make a strip of 3-color LEDs change from one color to another. I started with a brute-force 3-loop approach where I just did and inner most look though 0-255 for Red, then a loop around that from 0-255 for Green and then the outer-most loop from 0-255 for Blue. Something like this:

for (b=0; b < 255; b++) {
  for (g=0; g < 255; g++) {
    for (r=0; r < 255; r++) {
      draw_rectangle(r,g,b) ;
    }
  }
}

I have to say, the colors produced were not pleasing to the eye at all.

The I came accross this page describing how to make a rainbow. It has a great explanation on how to use a wave function, in this case sin(), to make colors. I’m not going to get into all the theory an implementation of the algorithm because the other page does it so well. I just made a little processing sketch where I can play with some of the parameters (frequency, amplitude, and center) to see what will happen to the color sequence.

The sketch was cobbled together in a couple of minutes so I’m sorry it doesn’t look very nice. Here is the Processing sketch and applet so it can be modified to look better :). (BTW, if you don’t know about Processing, go check it out. It’s pretty amazing.)

[processing width="670" height="600" file="http://blog.labrat.info/wp-content/uploads/2011/04/guicomponents.jar,http://blog.labrat.info/wp-content/uploads/2011/04/Graph.jar" method="onclick"]Here’s the applet.[/processing] It will mess up the formatting of the blog because the theme is not wide-enough. Again, please excuse the ugly.

Rants, raves and stuff from this dude's brain