处理js没有循环绘制功能

Question

我正在尝试使用processing.js将处理草图插入到我的wordpress博客中。

问题是，我得到一个冻结的图像，而不是一个移动的。就好像绘图功能没有循环一样。 （在我的电脑上，素描效果很好）

可能是什么原因呢？我该如何解决它？

<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模式，它没有相同的限制。

如果是这样的话，你唯一能做的就是减少你正在绘制的光源数量。