Use a webcam to see AR marker to change projected animation

nrefzen · August 2017

Ok, so super new to processing and I am trying to figure out a project I would really love to get done. The idea is to have a looped animation projected(about 5 seconds), that changes when an AR marker is shown to an attached webcam. I'd like to have different animations for different markers I have the opencv for processing library installed and assume that is where to begin. I just don't know how to make it happen.

If it helps I have I have the code of the animation i am working with, which right now is controlled by A,W,S.:

int numFrames = 120;
PImage[] images = new PImage[numFrames];
PImage[] left = new PImage[numFrames];
int currentFrame = 0;

void setup(){
  size(263, 410);
  for (int i = 0; i < images.length; i++) {
    String imageName = "Izquierda_idle_" + nf(i, 5) + ".png";
    images[i] = loadImage(imageName);
  }
  frameRate(24);
}

void draw() {
  image(images[currentFrame], 0, 0);
  currentFrame++;
  if(currentFrame >= images.length) {
    currentFrame = 0;
  }
  if (keyPressed) {

    if ((key =='a') || (key == 'A')){
       for (int i = 0; i < images.length; i++) {
    String imageName = "Izquierda_left_" + nf(i, 5) + ".png";
    images[i] = loadImage(imageName);
       }
       println ("left pressed");
    }

     if ((key == 's') || (key == 'S')){
       for (int b = 0; b < images.length; b++) {
     String imageName = "Izquierda_right_" + nf(b, 5) + ".png";
     images[b] = loadImage(imageName);

       } 
       println ("right pressed");
     }
        if ((key == 'w') || (key == 'W')){
       for (int w = 0; w < images.length; w++) {
     String imageName = "Izquierda_idle_" + nf(w, 5) + ".png";
     images[w] = loadImage(imageName);

       } 
       println ("up pressed");
        }
  }
}

Thanks, Fern

koogs · August 2017

Edit post, highlight code, press Ctrl-o to format.

jeremydouglass · August 2017

Have you looked at the MarkerDetection example that comes with the OpenCV for Processing library?

https://github.com/atduskgreg/opencv-processing/tree/master/examples/MarkerDetection

koogs · August 2017

i'd split the problem up. change the code so that there's a single method call that decides which image to display.

// returns which image to display
int getImagesToDisplay() {
...
}

currently this would contain your lines 21 and you'd call it once within draw(). get that working (which i think it already does, but see below). this way you can debug the image display bits without worrying about the AR marker stuff.

now you can write another method that uses the opencv bits and returns the exact same thing as the above and you'll only have to change one line of code to switch between the two methods. no massive rewrites of code because you've switched from keys to computer vision.

BUT you have bigger problems - NEVER call loadImage() from draw() like that because it's expensive. loading 120 pngs 60 times a second is crazy. certainly don't use keyPressed to decide because that'll be true EVERY loop that the key is pressed leading to a bunch of unnecessary work complaints of things beng slow. load ALL the images in setup. use 3 arrays if you have to. use the switching function to choose which array to use.

jeremydouglass · August 2017

@koogs -- is there a FAQ entry for "never call loadImage() from draw()"? It seems like there should be.

koogs · August 2017

It's covered in

https://forum.processing.org/two/discussion/8087/what-are-setup-and-draw

But could be a bit more obvious I guess

Howdy, Stranger!

Categories

In this Discussion

Use a webcam to see AR marker to change projected animation

Answers