Proj 2: Accelerometer + Potentiometer driven Animation

2D motion of an animated dragonfly is controlled on screen by using input from an accelerometer.


The potentiometer knob can be used to turn up the opacity of a small radius around the dragonfly to display a hidden image underneath. Only the small area of the hidden image surrounding the dragonfly is visible at a time. You can move the dragonfly around with the accelerometer to explore different areas of the image.

p.s. (the potentiometer is actually meant to be a pressure sensor but, the potentiometer worked better for testing purposes)

** My Arduino Code **

/*
  Reading Accelerometer & Pressure Sensor
  Language: Arduino/Wiring
 
  Reads 3 inputs attached to analog input pins 0 - 3 of the Arduino.
  The first two can be the accelerometer X & Y, and the third a
  potentiometer, or a pressure sensor.
 
*/

int accl_x = 0;
int accl_y = 1;
int sensor = 2;

void setup()
{ 
  Serial.begin(9600);      // initialize the serial port:
}

void loop()
{
  int sensorReading;
 
  // read accelerometer X value
  sensorReading = analogRead(accl_x);   
  sensorReading *=    10;
  Serial.print(sensorReading, DEC);    // print its value out as an ASCII numeric string
 
  // print a comma after the last sensor
  Serial.print(",");
 
  // read accelerometer Y value
  sensorReading = analogRead(accl_y);   
  sensorReading *=    10;
  Serial.print(sensorReading, DEC);    // print its value out as an ASCII numeric string
 
  // print a comma after the last sensor
  Serial.print(",");
 
  // read sensor
  sensorReading = analogRead(sensor);   
  Serial.print(sensorReading, DEC);    // print its value out as an ASCII numeric string

 
  // after all the sensors have been read,
  // print a newline and carriage return
  Serial.println();
  delay (100);
}

** My Processing Code **

/*
  Accelerometer  
  Language: Processing

  This sketch takes ASCII values from the serial port
  at 9600 bps and maps them to screen coordinates.
  The values should be comma-delimited, with a newline
  at the end of every set of values.
  The expected range of the values is between 0 and 1023.

  Created 08 March 2010
*/

import processing.serial.*;
Serial myPort;                    // The serial port

PImage bg_img, mask_img;

Animation animation;
float xpos, ypos, oldx, oldy;
float sensor;
float drag = 30.0;

int maxNumberOfSensors = 3;

void setup ()
{
  // set up the window, background, framerate, and #of frames
  size(500, 500);      
  background(0, 0, 20);
  bg_img = loadImage("background.png");   // Loading background image
  mask_img = loadImage("mask.png");   // Loading background image
  animation = new Animation("dragonfly_", 16);
  frameRate(24);
 
  // List all the available serial ports:
  println(Serial.list());
  // Opening port 8 (my COM port talking to the arduino)
  String portName = Serial.list()[1];
  myPort = new Serial(this, portName, 9600);
  myPort.clear();
  // don't generate a serialEvent() until you get a newline (\n) byte:
  myPort.bufferUntil('\n');
  
  xpos = oldx = width/2;
  ypos = oldy = height/2;
}

void draw ()
{
  // Display the sprite at the position xpos, ypos
    tint (sensor, 255);    // setting the opacity of background
    image(bg_img, 0, 0);
    image(mask_img, xpos-(animation.getWidth()*4)+35, ypos-(animation.getHeight()*4)-70);

    tint (255, 255);      //  opacity of sprite always FULL
    animation.display(xpos-animation.getWidth()/2, ypos);
}

void serialEvent (Serial myPort)
{ 
  // get the ASCII string:
  String inString = myPort.readStringUntil('\n');

  // if it's not empty:
  if (inString != null)
  {
    // trim off any whitespace:
    inString = trim(inString);

    // convert to an array of ints:
    int incomingValues[] = int(split(inString, ","));
   
    if (incomingValues.length <= maxNumberOfSensors && incomingValues.length > 0)
    {
       {
        oldx = xpos;
        oldy = ypos;

        xpos   = incomingValues[0];    // Accelerometer X
        ypos   = incomingValues[1];    // Accelerometer Y
        sensor = incomingValues[2];    // Potentiometer Values
       
        //  Setting coords range between incoming values
        xpos = (xpos > 5500 ? 5500 : xpos < 1500 ? 1500 : xpos);
        ypos = (ypos > 5500 ? 5500 : ypos < 1500 ? 1500 : ypos);

        //  mapping incoming values to edges of screen
        xpos = map(xpos, 1500, 5500, 65, width-65);
        ypos = map(ypos, 1500, 5500, height-94, 0);
        //  mapping incoming sensor values for tint() function
        sensor = map (sensor, 0, 480, 0, 255);
      }
    }
   
    // print out the values
    println(xpos + ", " + ypos + " ," + sensor);
  }
}

// Class for animating a sequence of PNG's
class Animation
{
  PImage[] images;
  int imageCount;
  int frame;
 
  Animation(String imagePrefix, int count)
  {
    imageCount = count;
    images = new PImage[imageCount];

    for (int i = 0; i < imageCount; i++)
    {
      // Use nf() to number format 'i' into 3 digits
      String filename = imagePrefix + nf(i, 3) + ".png";
      images[i] = loadImage(filename);
    }
  }

  void display(float xpos, float ypos)
  {
    frame = (frame+1) % imageCount;
    image(images[frame], xpos, ypos);
  }
 
  int getWidth()  {
    return images[0].width;   }
  int getHeight() {
    return images[0].height;  }
}