js가 루핑 기능을 루핑하지 않음

Question

processing.js를 사용하여 WordPress 블로그에 처리 스케치를 삽입하려고합니다.

문제는 움직이는 이미지 대신 고정 된 이미지가 표시된다는 것입니다. 마치 draw 함수가 루핑되지 않는 것처럼. (내 컴퓨터에서 스케치가 제대로 작동 함)

그 원인은 무엇일까요? 어떻게 해결할 수 있습니까?

<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

첫 번째 중단 점은 자바 스크립트 콘솔이어야합니다. 여기에 오류가 표시됩니다. 대부분의 브라우저에서 F12 키를 누르거나 메뉴의 개발자 설정에서 찾을 수 있습니다.

코드를 실행하고 JavaScript 브라우저를 보면이 오류 (Uncaught can only create 8 lights)가 표시됩니다.

내가 그 오류에서 수집 한 것은 브라우저가 8 개의 표시등 만 처리 할 수 ​​있지만 더 많이 만들려고한다는 것입니다. 자바 모드를 사용하고 있기 때문에 PC에서 잘 작동합니다. 동일한 제한이 없습니다.

그럴 경우 할 수있는 것은 그리는 조명 수를 줄이는 것입니다.