I tried my hand at audio visualization by creating this music-sun-clock sketch that uses the averagePower reading from the Maxim player to vary the length and the stroke color of the "hand" while making it completely black when detecting a beat. The inner circle radius is also proportional to the power output. Dragging the mouse left or right changes both the speed of the player and the framerate of the sketch and therefore the speed of the clock. In the next version, for the next deadline, I count on adding:

• collapsing and fading of the central circle

Can anybody here hint at any solutions for these implementations?

Here is the code (sorry for not having it commented):

             

              
Maxim maxim;
              
float threshold = 0.26;
              
int wait = 0;
              


              
void setup(){
              
 maxim = new Maxim(this);
              
 player = maxim.loadFile("mykbeat.wav");
              
 player.setAnalysing(true);
              
 player.setLooping(true);
              
 size(600,600);
              
 smooth();
              
 frameRate(30);
              
 background(255);
              
 xCenter = width/2;
              
 yCenter = height/2;
              
 time = 0;
              
 noStroke();
              
 fill(200);
              
 ellipse(xCenter, yCenter,width, height);
              
}
              


              
void draw(){
              
 quadrantFade();
              
 player.play();
              
 float pow = player.getAveragePower();
              
 float col = map(pow,0,1,0,100);
              
 float len = map(pow,0,1,0,725);
              
 translate(width/2, height/2);
              
 rotate(PI+HALF_PI);
              
 if(pow>threshold && wait < 0){
              
 stroke(0);
              
 wait=4; 
              
 }else{
              
 stroke(255,(pow*255)*2,(pow*255)*0.3);
              
}
              
 strokeWeight(2);
              
 line(0, 0, cos(radians(time/3)) * len, sin(radians(time/3)) * len);
              
 strokeWeight(1);
              
 fill(255,255,125,50);
              
 ellipse(0,0,len/2,len/2);
              
 len-=100;
              
 time+=1;
              
 wait--;
              
}
              


              
void quadrantFade(){
              
 noStroke();
              
 fill(200,2);
              
 ellipse(xCenter, yCenter,width, height);
              
}
              


              
void mouseDragged(){
              
 frameRate((mouseX-width/2)/10+30);
              
 float spd = (float) mouseX/300;
              
 player.speed(spd);
              
}
             
Thank you all in advance.

UPDATE: I now achieved what I believe is a nice enough fading and overlaying effect for the clock hand trace. I changed the code above to show you my solution. Now I would like to focus on the collapsing and fading of the central circle. What I would like to achieve is a balloon-like effect with the circle inflating and deflating based on the power output. Can you guys help me with that?