I can't get this Processing.js sketch to work?

Question

I can't figure out why this processing sketch isn't working in some browsers. It works fine with Firefox, but it won't run in Safari and Chrome.

I am placing the code inside a script tag on my website and targeting the "canvas" as suggested on the processing website, http://processingjs.org/articles/PomaxGuide.html. At first, the sketch seemed to work fine. But once I tried using other browsers I ran into trouble. In Safari it won't load at all.

It seems like a relatively straightforward sketch so I really not sure where the problem is...

Here is the sketch:

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);

  }

Any idea why??

score 0 · Answer 1 · answered May 01 '13 at 22:11

works fine for me in all the browsers so far. If you stick it in a fiddle,

<script type="text/processing">
  // ...your code here
</script><canvas></canvas>

like here, http://jsfiddle.net/7RGHL, and load that in your various browsers, they should all work. Since you didn't include the HTML code you used to make it run on your page, it's impossible to say what you did wrong, but your Processing code's fine, at least.

score 0 · Answer 2 · answered Aug 09 '13 at 15:59

I had the same problem in chrome, it didn't work offline but it does online (don't know why), in safari you need to go to safari/preferences/advanced and activate the development menu. Once you have it you can Activate WebGL in it that way the problem should be solved.

PS: Sorry if the words in the menus are not exactly the same I have it in Spanish...

I can't get this Processing.js sketch to work?

2 Answers2