processing js not looping draw function

Question

I am trying to insert a processing sketch into my wordpress blog using processing.js.

The problem is that I am getting a frozen image instead of a moving one. Its as if the draw function is not looping. (On my pc the sketch works fine)

what could be the cause of it ? and how can i fix it ?

<script type="text/processing" data-processing-target="MySketch">
ball[] balls;
int numBalls = 20;
void setup(){
size (300,300,P3D);
background(255);balls=new ball[numBalls];
for(int i=0; i<numBalls;i++){
  float r=random(5,20);
 balls[i] = new ball(random(r,width-r),random(r,height-r),0,r,random(-1,10),random(-1,10));
}

}

    void draw(){
     background(255);
     for(int i=0; i<numBalls;i++){ 
ball b; b=balls[i]; 
b.drawBall(); 
b.moveBall(); 
b.boundaries(); 
} 
} 
class ball{ 
float x;
 float y;
 float z;
 float r;
 float vx;
 float vy;
 ball(float x1,float y1,float z1,float r1,float vx1,float vy1 ){
 x=x1; 
y=y1; 
z=z1; 
r=r1; 
vx=vx1; 
vy=vy1; 
} 
void drawBall(){
 noStroke(); 
fill(255,0,0);
 lights(); 
pushMatrix(); 
translate(x, y,z);
 sphere(r); 
popMatrix(); 
} 
void moveBall(){ 
x=x+vx;
 y=y+vy; 
} 
void boundaries(){
 if(x>=width-r || x<0+r) 
vx=vx*-1; 

if(y>=height-r || y<0+r)
      vy=vy*-1;
     }
    }
    </script>
    <canvas id="MySketch"></canvas>

Answer 1

Your first stop should be the JavaScript console. That's where any errors you're getting will show up. On most browsers you can just push the F12 key, or find it in your developer settings in the menu.

When I run your code and look at the JavaScript browser, I see this error: Uncaught can only create 8 lights.

What I gather from that error is the browser can only handle drawing 8 lights, but you're trying to create more. It works fine on your PC because you're probably using Java mode, which does not have the same restrictions.

If that's the case, the only thing you can do is decrease the number of lights you're drawing.