一部のブラウザーでこの処理スケッチが機能しない理由がわかりません。Firefox では正常に動作しますが、Safari と Chrome では動作しません。
私は自分のウェブサイトのスクリプトタグ内にコードを配置し、処理ウェブサイトhttp://processingjs.org/articles/PomaxGuide.htmlで提案されているように「キャンバス」をターゲットにしています。最初は、スケッチはうまく機能しているように見えました。しかし、他のブラウザを使用しようとすると、問題が発生しました。Safari ではまったく読み込まれません。
比較的簡単なスケッチのように見えるので、どこに問題があるのか 本当にわかりません...
スケッチは次のとおりです。
float b = 4;
float c = 8;
int x = 10;
int k = 3;
int f = 1;
void setup() {
size(755, 685, P3D);
fill(190);
}
void draw() {
background(0, 102, 102);
translate(width/2, height/2);
strokeWeight(2);
noFill();
rect(-width/2, -height/2, 755, 685);
rect((-width/2) + 7, (-height/2) + 7, 741, 671);
noStroke();
fill(255, 204, 51);
rect((-width/2) + 40, -height/2, 20, 7);
rect((-width/2) + 120, -height/2, 20, 7);
rect((-width/2) + 200, -height/2, 20, 7);
rect((-width/2) + 280, -height/2, 20, 7);
rect((-width/2) + 360, -height/2, 20, 7);
rect((-width/2) + 440, -height/2, 20, 7);
rect((-width/2) + 520, -height/2, 20, 7);
rect((-width/2) + 600, -height/2, 20, 7);
rect((-width/2) + 680, -height/2, 20, 7);
rect((-width/2) + 40, (-height/2) + 678, 20, 7);
rect((-width/2) + 120, (-height/2) + 678, 20, 7);
rect((-width/2) + 200, (-height/2) + 678, 20, 7);
rect((-width/2) + 280, (-height/2) + 678, 20, 7);
rect((-width/2) + 360, (-height/2) + 678, 20, 7);
rect((-width/2) + 440, (-height/2) + 678, 20, 7);
rect((-width/2) + 520, (-height/2) + 678, 20, 7);
rect((-width/2) + 600, (-height/2) + 678, 20, 7);
rect((-width/2) + 680, (-height/2) + 678, 20, 7);
rect(-width/2, (-height/2) + 45, 7, 20);
rect(-width/2, (-height/2) + 127, 7, 20);
rect(-width/2, (-height/2) + 209, 7, 20);
rect(-width/2, (-height/2) + 291, 7, 20);
rect(-width/2, (-height/2) + 373, 7, 20);
rect(-width/2, (-height/2) + 445, 7, 20);
rect(-width/2, (-height/2) + 527, 7, 20);
rect(-width/2, (-height/2) + 609, 7, 20);
rect((-width/2) + 748, (-height/2) + 45, 7, 20);
rect((-width/2) + 748, (-height/2) + 127, 7, 20);
rect((-width/2) + 748, (-height/2) + 209, 7, 20);
rect((-width/2) + 748, (-height/2) + 291, 7, 20);
rect((-width/2) + 748, (-height/2) + 373, 7, 20);
rect((-width/2) + 748, (-height/2) + 445, 7, 20);
rect((-width/2) + 748, (-height/2) + 527, 7, 20);
rect((-width/2) + 748, (-height/2) + 609, 7, 20);
rotateY(map(mouseX, 0, width, -PI, PI));
//rotateX(map(mouseY, 0, height, -PI, PI));
rotateZ(map(mouseY, 0, height, -PI, PI));
//rotateX(PI/4);
//rotateZ(1);
scale(25);
stroke(255, 204, 51);
strokeWeight(1);
line(-width/2, 0, width/2, 0);
line(0, -height/2, 0, height/2);
strokeWeight(5);
point(1 + f + b, -12 + k + b, 3 + x + b);
point(1 + f + b, -13 + k + b, 3 + x + b);
point(-4 + f + b, -12 + k + b, -1 + x + b);
point(4 + f + c, -12 + k + c, 4 + x + c);
point(2 + f + c, -9 + k + c, 1 + x + c);
}
理由はわかりますか??