处理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 个灯，但您正在尝试创建更多灯。它在您的 PC 上运行良好，因为您可能使用的是 Java 模式，它没有相同的限制。

如果是这种情况，你唯一能做的就是减少你绘制的灯光数量。