AVATAR :: X-Y Ray

by Melissa Ramos and Rhys Turner

an interactive installation using sound and an interactive game where you become a skeleton avatar in a pixel art environment built with processing.org and the JMyron library

The Source Code

This artwork was created using processing in combination with JMyron's camera tracking library. I am currently working on a version of the application what will work on the web for users to view. Because I'm using the fullscreen library it won't work in a browser. So I am taking that out and changing the video tracking code to work with a mouse instead. So you will be able to see how I created the animation, movements and main processing application.

A big thanks to all those involved in this project and to the Processing community itself. And it's great to see such a good response from this work.

Source code coming soon.

Code sneak peak

Here's some code while I prepare the application for the web. This is an animation class which I used to create animated sprites. I have the images as a sequence in an array which I parse theough when initiating the class as an object. It's based on the AnimatedSprite class which is on the processing forum.

///// ---- begin class ---- add this as a class via the new tab icon /////

class AnimatedSprite
{
private PImage[] frames;
private int currFrame;
private float frameLength;
private int timer;
private float x, y;
public PImage i;

AnimatedSprite(PImage[] f, float fps)
{
frames = f;
println(frames+" frames");
frameLength = 1000/fps; // set frameLength in milliseconds
currFrame = 0;
timer = millis();
x = 0;
y = 0;
}

void setPosition(float px, float py)
{
x = px;
y = py;
}

void draw(float px, float py)
{
x = px;
y = py;
//println("an doDraw");
if ( millis() - timer > frameLength )
{
currFrame += 1;
// this sets the current frame to 0
// if we've reached the end of the frame array
currFrame %= frames.length;
// this resets the timer
timer = millis();
}
i = frames[currFrame];
//image(i, x, y);
image(i, x, y);
}

void stop()
{
i = null;
//println("stopped "+i);
}
}

///// ---- end class ----/////

/// example usage -- put this in your main processing app --///

int numFrames = 8;
int xposition, yposition;
PImage[] cImage = new PImage[numFrames];
float fps;
AnimatedSprite chAnimate;
String chFolder;
AnimateCharacter(int xpos, int ypos, int frames, String folder, float fps){
numFrames = frames;
xposition = xpos;
yposition = ypos;
chFolder = folder;
////println(leftAn);
}
void setup(){
//PImage[] cImage = new PImage[numFrames];
// RIGHT AN
/*
for(int j = 0; j<numFrames; j++){
String file = chFolder+"/chAnimate"+j+".gif";
cImage[j] = loadImage(file);
println(cImage[j]+" <<< cImage[j] >>>"+file);
}
*/
cImage[0] = loadImage(chFolder+"/chAnimate0.gif");
cImage[1] = loadImage(chFolder+"/chAnimate1.gif");
cImage[2] = loadImage(chFolder+"/chAnimate2.gif");
cImage[3] = loadImage(chFolder+"/chAnimate3.gif");
cImage[4] = loadImage(chFolder+"/chAnimate4.gif");
cImage[5] = loadImage(chFolder+"/chAnimate5.gif");
cImage[6] = loadImage(chFolder+"/chAnimate6.gif");
cImage[7] = loadImage(chFolder+"/chAnimate7.gif");
// SET ANIMATION FPS
fps = 10;
//chAnimate = new AnimatedSprite(cImage, fps);
// chAnimate.draw(xposition, yposition);
println("AnimateCharacter setup >>>");
}
void moveCharacter(float tX, float tY) {
if (chAnimate == null){
chAnimate = new AnimatedSprite(cImage, fps);
chAnimate.draw(tX, tY);
}
chAnimate.draw(tX, tY);
}
}

Please send all feedback here