In order to sync the drawing with each beat, I put a While loop inside Draw that retrieves that next beat from the Echonest data and then keeps looping until the song reaches a short window of time around that beat (i.e., within 13ms before or after it). I then draw the next circle segment, the While loop exits, and Draw completes. The problem is that, even though the code to draw the circle segment is getting performed and even though Draw is in fact looping properly, nothing is getting rendered. I just get a gray viewport. And I know that the While loop is causing the problem because, when I remove the condition that causes the While loop to keep looping until we hit the right window of time, it renders just fine. Moreover, if I leave that condition in, but drop my frame rate down to 3 or lower, then it renders fine as well.

So it seems that the inner loop is causing some sort of havoc with Processing. Does anyone have an idea of what could be happening and what a good solution is? Similarly, does anyone know of a better way to sync music and an animation (I tried doing it real-time with Minim, but I was struggling to get good results, particularly due to apparent latency).

Thanks,

Kevin

while (_currBeatFndInd == false && _currBeatIdx < _beats.length) {

int startTmMsNbr = ( int)(Float.parseFloat( _beats[ _currBeatIdx].get( "start").toString()) * 1000);

if (startTmMsNbr >=  _player.position() -  MAX_LATENCY_MS_NBR) {
      _msToNextBeatNbr = abs(startTmMsNbr -  _player.position());

      if  (_msToNextBeatNbr  <= MAX_LATENCY_MS_NBR ) {
      //if (true) {
            circles.get(0).update();
            println( _currBeatIdx +  " drawn");
            _currBeatFndInd  =  true ;
            _currBeatIdx ++;
      }  else {
            // println(_currBeatIdx + "  " + _msToNextBeatNbr);
      }
}  else {
      _currBeatIdx ++;
}

}

What I'm trying to do is create a cinematic visualization that is fundamentally based on the input of a color image that contains a portrait and that is 670x699 in size. I first create a bunch of random walkers that sample the pixels in that image and convert the colors to gray-scale values of my choosing, which I then use to rebuild the portrait part of the image in gray-scale. So over time you see these random walkers sketch out a face.

That all works great for simply animating the creation of a new PImage. However, just watching a 2D image get built over time is kind of boring, even though it looks very nice. What I really want to do is draw the new face over time using 3D cubes instead. In addition, I want to have a camera that, during the course of the drawing, will move from a regular 2D perspective and swoop down close to and among the cubes in very cinematic way. Finally, I want to animate each of those cubes, moving random ones back and forth a bit along the z-axis, to give the whole project some more life.

Is this idea insane? In my first attempt I simply went for it and tried to represent each of the image's pixels with a corresponding 3D cube, which means I was creating almost 470K cubes and that of course led to a very slow program. I've done some tuning since, trying out versions where I create cubes of edge sizes 3 and 4 to represent 9 and 16 pixels respectively, but I don't love the low resolution image they create. I'm also now using 6 PShapes to underpin all my cubes (6 because I'm using 6 shades of gray) in order to draw in "retained mode" as Daniel Shiffman's PShape tutorial explains.

So, am I insane for trying to create this type of project in Processing? Are there other steps I can take to significantly improve performance or does a project like this require something like Cinder or OpenFrameworks?

Thanks for any advice you can offer! And please let me know if I can provide any other information that would be useful.