jsがループ関数をループしない

Question

processing.jsを使用してWordPressブログに処理スケッチを挿入しようとしています。

問題は、動くものの代わりに凍った画像が表示されてしまうことです。あたかも描画機能がループしていないかのようです。 （私のPC上でスケッチは正常に動作します）

何が原因なのですか？どのように私はそれを修正することができますか？

<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

最初の停止はJavaScriptコンソールで行う必要があります。そこには、あなたが得ているエラーが表示されます。ほとんどのブラウザではF12キーを押すか、メニューのデベロッパー設定で見つけることができます。

コードを実行してJavaScriptブラウザを見ると、このエラーが表示されます：Uncaught can only create 8 lights

私がこのエラーから収集したのは、ブラウザが描画8ライトしか処理できないが、さらに作成しようとしているということです。おそらくJavaモードを使用しているので、あなたのPC上で正常に動作します。これは同じ制限がありません。

この場合、描画するライトの数を減らすことができます。