Can't get my sketches to run on javaScript mode.

edited December 2013 in JavaScript Mode

I've tried I few different things, but I really felt stumped when I got a friend to try to run my sketches on his computer in javaScript, and it failed also, even though his sketches run fine. I'm on processsing 2.1, windows 8, firefox 26. here's one example:

EulerSpiral[] eu;
int N, j;
boolean reset=true;
void setup(){
 background(250);
 size(700, 600);
   N=15;j=6;
   eu = new EulerSpiral[N];
   for(int i=0; i<N; i++){
     eu[i] = new EulerSpiral();
     eu[i].innitColors();
     if(i < 6){
       eu[i].toggleActive();
     }
   }
   strokeWeight(1.5);
}

void draw(){
  if(((minute()%2 == 0)&&(second()==1)) && reset){
    background(250);
    for(int i=0; i<N; i++){
     eu[i] = new EulerSpiral();
     eu[i].innitColors();
     if(i < 4){
       eu[i].toggleActive();
     }
   }
  }
  for(int i=0; i<N; i++){
    if(eu[i].active()){
      eu[i].go();
      eu[i].check();
      eu[i].RandColorize();
    }
   }
   //fill(250, 3);
   //rect(0,0,width,height);
}

void mousePressed(){
  eu[j] = new EulerSpiral(mouseX, mouseY);
  eu[j].innitColors();
  if(j == 14) j = 0;
  else j++;
}

class EulerSpiral{
  float[][] Color;
  float x, y, theta, dt;
  PVector a;
  boolean active;
  EulerSpiral(){
    x=random(0.0, width);
    y=random(0.0, height);
    dt=random(radians(0.1), radians(1));
    theta=dt;
    a= new PVector(random(-10.0, 10.0), random(-10.0, 10.0));
    Color = new float[3][3];
    Color[0][0]=0;
    Color[1][0]=0;
    Color[2][0]=0;
    active = false;
  }
  EulerSpiral(float x_, float y_){
    x=x_;
    y=y_;
    dt=random(radians(0.1), radians(1));
    theta=dt;
    a= new PVector(random(-10.0, 10.0), random(-10.0, 10.0));
    Color = new float[3][3];
    Color[0][0]=0;
    Color[1][0]=0;
    Color[2][0]=0;
    active = true;
  }
  boolean active(){return active;}
  void toggleActive(){
    if(active) active = false;
    else active = true;
  }
  void go(){
    stroke( Color[0][0],  Color[1][0],  Color[2][0]);
    line(x, y, x+a.x, y+a.y);
     x+=a.x;
     y+=a.y;
     a.rotate(theta);
     theta+=dt; 
  }
  void check(){
   if((x>width)||(x<0)){
    x=random(0.0, width);
   }
   if((y>height)||(y<0)){
    y=random(0.0, height);
   }
  }
  void innitColors(){
    for(int i=0; i<3; i++){
      Color[i][0]=random(30, 220);
      Color[i][1]=random(-1.2, 1.2);
      Color[i][2]=random(-0.1, 0.1);
    }
  }
  void RandColorize(){
    for(int i=0; i<3; i++){
      Color[i][2]=random(-0.1 * (Color[i][0]/100f), 0.1 / (Color[i][0]/100f));
      Color[i][1]+= Color[i][2];
      //Color[i][1]=constrain(Color[i][1], -1.2, 1.2);
      Color[i][0]+= Color[i][1];
    }
  }
}
void keyPressed(){
  if(key==' '){
    background(250);
    for(int i=0; i<N; i++){
     eu[i] = new EulerSpiral();
     eu[i].innitColors();
   }
  }
  if(key=='r'||key=='R'){
    if(reset) reset = false;
    else reset = true;
  }
}

Answers

  • It looks like you're hitting some of the differences between Java and JS, and also some of the differences between the Processing 2.0 API and the 1.5 API (which Processing JS is still based on).

    (I don't know if it's commonly known or not, but the JS console in the browser can tell you sometimes what errors are happening, which can give you a clue. That's how I've tracked these down).

    1. JS mode doesn't like classes with methods and properties with the same name — in this case, your EulerSpiral class has both boolean active and active(). Renaming the method to isActive() solves the first error.
    2. Processing.js's PVector doesn't have a rotate() method. Compare the PJS docs with the main Processing docs. If you comment out the line a.rotate(theta); (line 87) then the sketch runs in JS mode, albeit only in a straight line. You'll probably have to implement your own method for rotating a PVector to get round that. Unfortunately my vector math skills are rusty so I can't help you with that!

    Hope that is of use.

  • edited December 2013 Answer ✓

    I don't get trigonometry much. Nonetheless, I've got an online example which replaces rotate() method
    w/ cos() & sin()! Check it out: B-)

    http://studio.processingtogether.com/sp/pad/export/ro.91nVQMnL$v06L/latest

  • thanks a bunch!

Sign In or Register to comment.