Using serial data from an Arduino to control a Processing animation of a still image

agear

I'm working on a project in which analog data from an arduino affects an animation of a still image.

I'm creating a pressure sensitive floor that acts as a controller for a Processing animation. The floor consists of a foam mat covering a matrix of homemade force sensitive resistors made out of copper plate and conductive foam.

To generate the animation, I'm working with some open source code that uses the draw() function to change the RGB values of groups of pixels. The groups of pixels are represented as small triangles. As you move your mouse around the screen, each triangle's color changes.

I want to use my pressure sensitive floor (possibly) in lieu of the draw() function. The floor consists of 12 force sensitive resistors spaced out in 14'x14' space.

I'm having trouble figuring out how to send serial data from 12 analog inputs to Processing. I want the pressure sensor data to control the animation.

The code:

PGraphics buf;

void setup()
{
    size(1100,731);
    background(255);
    smooth();
    noStroke();

    // Creates an off-screen "image", so that pixel values can be read
    PImage  img;
    img = loadImage("9437273_orig.jpg"); //specifies image
    buf = createGraphics(1100, 731); //draws image into an offscreen graphics buffer
    buf.beginDraw();
    buf.background(255); //sets background color 
    buf.image(img, 0, 0);
    buf.loadPixels(); //Loads the pixel data for the image into its pixels[] array
    buf.endDraw();



}
int fn = 0;

void draw()
{
  float tmSecs = millis()*.0001;
  // Zoom H and Squish V
  // blend(0,0,width,height,-1,1,width+1,height-3,BLEND);
  // Zoom H and Zoom V
  blend(0,0,width,height,-1,-1,width+1,height+1,BLEND);
  // filter(BLUR);
  // background(255);

  // Draw a bunch of little triangles
  for (int n = 0; n < 600; ++n) {
    // Select a random location
    int x = (int) random(0,width-1); //generates random numbers between 0 and -1 x axis
    int y = (int) random(0,height-1); //""for y axis 

    // Read the RGB color components of the logo at this position
    int clr = buf.pixels[y*width+x];
    int rr = (clr >> 16) & 0xff;
    int gg = (clr >> 0) & 0xff;
    int bb = (clr >> 8) & 0xff;

    // Get a Perlin noise value (more organic than random) for this location - use to control all random values
    float rn = noise(x*.0025+tmSecs,y*.01+tmSecs*.5);
    // rn *= rn;

    // Tweak the color using the noise value to lighten/darken it
    float cVar = rn*150-100;
    rr = (int) constrain( rr+cVar, 0, 255); //Constrains a value to not exceed a maximum and minimum value.
    gg = (int) constrain( gg+cVar, mouseY, 255);
    bb = (int) constrain( bb+cVar, mouseX, 255);

    // Reconstruct the color, and use it to fill the triangle
    clr = 0xff000000 | (rr << 16) | (gg << 0) | (bb << 8);
    fill(clr);

    // Draw a randomly rotated,scaled equilateral triangle at this position
    pushMatrix();
    translate(x,y);
    rotate(rn*5*PI);
    scale(1.5+rn*3);
    float r = 4 + rn*8;
    triangle (1,0,            // cos(0), sin(0)
             -0.5,0.866,     // cos(2*pi/3), sin(2*pi/3)
             -0.5,-0.866);   // cos(4*pi/3), sin(4*pi/3)
    popMatrix();
  }
}

void mouseClicked() //mouse click will not effect animation
{
  save("crash_logo_advanced.png"); 
}

Thanks so much.