› › ›

spotLight() sketch worging In Processing but not in JS

ottaotta
edited March 2014 in JavaScript Mode

I work with processing 2.0.3 on mac OS 10.9.2 (and my english is so poor)

My program work well with Processing, but not with Processing JS (I mean, the final part). I wrote a shorter and simplified code to highlight my problem. At the end of the program, two shapes are created and shown. When I use spotlight() to show those shapes, this works in Java but not when I switch to Javascript...

The "spotlight" exemple given in P3D tutorial works perfectly. I also tried to use Light() andambientLight() in my sketch, both works, but not directionalLight() and of course spotLight(). I have try to place this spotlight() inside the Class or in draw(), not nothing works

I will appreciate if someone could help me.

Thanks

Here is my code:

Cube cube0, cube1;  
     // cb0, 1, 2, 3 pour créer et sauvegarder les différents cubes
     boolean cb0 = false;
     boolean cb1 = false;
boolean lum;  //  case 2 activete spotlight
boolean des = true; // if false cancel drawcube case 2
PVector A1, A2, A3, A4, A5, A6, A7, A8;
PVector C1, C2, C3, C4, C5, C6, C7, C8;
PVector D1, D2, D3, D4, D5, D6, D7, D8;

float rotx;
float roty;
boolean a; // arret variation des sommets si conditions remplies

boolean stopTime; //condition remplies oui ou non
int startTime;
int startT;   

final int tr = 30; // temps rotation
int st; //dégrément temps
int n;
int num = n;


void setup() {
  size(800, 500, P3D);
  //hint(ENABLE_DEPTH_SORT); 
  //hint(DISABLE_DEPTH_TEST);

  frameRate(30);

  A1 = new PVector (-50, -50, 50);
  A2 = new PVector (-50, 50, 50);
  A3 = new PVector (50, 50, 50);
  A4 = new PVector (50, -50, 50);
  A5 = new PVector (-50, -50, -50);
  A6 = new PVector (50, -50, -50);
  A7 = new PVector (-50, 50, -50);
  A8 = new PVector (50, 50, -50);

    float rotx = PI/4;
    float roty = PI/4;
    lum = false;
    n = 0;
    a = true;
}


void draw() {
 // colorMode(RGB);
 background(0);

//  if (lum){
//   // lights();
//   //directionalLight(155, 143, 17, 0, 0, -1);
//  // ambientLight(155, 143, 17);
//   spotLight(204, 153, 0, 210, 250, 1000, 0, 0, -1, PI/2, 20.0); 
//   spotLight(204, 153, 0, 500, 250, 1000, 0, 0, -1, PI/2, 20.0); 
//   }


switch(num) {
case 0: 

     if (frameCount > 60){
             stopTime = true;
             cb0 = true;  //create cubeO
             fairecube();              
             affichageInfo(); 
        }
      break;

 case 1:  
     if (frameCount > 60){
             stopTime = true;
             cb1 = true;    //create cube1
             fairecube();              
             affichageInfo();          
           }                                                               
          break;           

 case 2:
        a = false;      // stope moving value PVector A1, A2,...
        des = false;
        lum = true;

        cube0.finoor();  
        cube0.fairecube();
        cube0.turn();

        cube1.finoor();
        cube1.turn(); 
        cube1.fairecube();


         if ((50 < mouseX) && (380 > mouseX) && (15 < mouseY) && (230 > mouseY)){
            cube0.moussecube();
            }
         if ((420 < mouseX) && (750 > mouseX) && (15 < mouseY) && (230 > mouseY)){
            cube1.moussecube();
            } 

           break;
    }

       if (a == true) {

            A1.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A2.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A3.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A4.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A5.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A6.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A7.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
            A8.add(random(-0.5,0.5), random(-0.5,0.5), random(-0.5,0.5));
           }

        drawCube();

}

void fairecube(){
     if (cb0 == true){
       C1 = new PVector(A1.x, A1.y, A1.z);
       C2 = new PVector(A2.x, A2.y, A2.z);
       C3 = new PVector(A3.x, A3.y, A3.z);
       C4 = new PVector(A4.x, A4.y, A4.z);
       C5 = new PVector(A5.x, A5.y, A5.z);
       C6 = new PVector(A6.x, A6.y, A6.z);
       C7 = new PVector(A7.x, A7.y, A7.z);
       C8 = new PVector(A8.x, A8.y, A8.z); 
       cube0 = new Cube(C1, C2, C3, C4, C5, C6, C7, C8, 210, 250);
       cb0 = false;
     }
     if (cb1 == true){
       D1 = new PVector(A1.x, A1.y, A1.z);
       D2 = new PVector(A2.x, A2.y, A2.z);
       D3 = new PVector(A3.x, A3.y, A3.z);
       D4 = new PVector(A4.x, A4.y, A4.z);
       D5 = new PVector(A5.x, A5.y, A5.z);
       D6 = new PVector(A6.x, A6.y, A6.z);
       D7 = new PVector(A7.x, A7.y, A7.z);
       D8 = new PVector(A8.x, A8.y, A8.z); 
       cube1 = new Cube(D1, D2, D3, D4, D5, D6, D7, D8, 580, 250);
       cb1 = false;
     }     
}


void affichageInfo(){
           if (stopTime){
             a = false;
             startTime = millis();
             st = st + 1;
             startTime = startTime - st; 
             roty = roty + (PI/tr);
           }

            if ((millis() - startTime) > tr){
             st = 0;
             stopTime = false;
             a = true;
             num = num + 1;
             frameCount = 0;
          }
        }


void drawCube(){ 
  if (des){  
    strokeWeight(2);
    pushMatrix();
    translate((width/2.0 + 100), (height/2.0 - 15));
    rotateX(rotx);
    rotateY(roty);
    scale(1.5);
    stroke(255);
    line(A1.x, A1.y, A1.z, A2.x, A2.y, A2.z);
    line(A2.x, A2.y, A2.z, A3.x, A3.y, A3.z);
    line(A3.x, A3.y, A3.z, A4.x, A4.y, A4.z);
    line(A4.x, A4.y, A4.z, A1.x, A1.y, A1.z);
    line(A5.x, A5.y, A5.z, A7.x, A7.y, A7.z);
    line(A7.x, A7.y, A7.z, A8.x, A8.y, A8.z);
    line(A8.x, A8.y, A8.z, A6.x, A6.y, A6.z);
    line(A6.x, A6.y, A6.z, A5.x, A5.y, A5.z);
    line(A1.x, A1.y, A1.z, A5.x, A5.y, A5.z);
    line(A2.x, A2.y, A2.z, A7.x, A7.y, A7.z);
    line(A3.x, A3.y, A3.z, A8.x, A8.y, A8.z);
    line(A4.x, A4.y, A4.z, A6.x, A6.y, A6.z);
    popMatrix();
    }
}

class Cube{
  PVector B1;
  PVector B2;
  PVector B3;
  PVector B4;
  PVector B5;
  PVector B6;
  PVector B7;
  PVector B8;
  int ds;    // temps rotation
  float dh; // facteur décalage horiz
  float dv; // facteur décalage vertical
  float rx;  //rotation x
  float ry;  //rotation y


  Cube(PVector B1Temp, PVector B2Temp, PVector B3Temp, PVector B4Temp, PVector B5Temp, PVector B6Temp, PVector B7Temp, PVector B8Temp, float dhTemp, float dvTemp){
    B1 = B1Temp;
    B2 = B2Temp;
    B3 = B3Temp;
    B4 = B4Temp;
    B5 = B5Temp;
    B6 = B6Temp;
    B7 = B7Temp;
    B8 = B8Temp;
    ry = PI/4;
    ds = 400; 
    dh = dhTemp;
    dv = dvTemp;    
  }
     void finoor(){
       spotLight(204, 153, 0, dh, dv, 1000, 0, 0, -1, PI/2, 20); 
     }

     void fairecube(){
      // spotLight(204, 153, 0, dh, dv, 1000, 0, 0, -1, PI/2, 20); 
        pushMatrix();
            translate(dh, dv);
            rotateX(rx);
            rotateY(ry);
            noStroke();
            //scale(1);
          beginShape(QUADS);
            fill(200);

            vertex(B1.x, B1.y, B1.z);
            vertex(B2.x, B2.y, B2.z);
            vertex(B3.x, B3.y, B3.z);
            vertex(B4.x, B4.y, B4.z);            

            vertex(B4.x, B4.y, B4.z);
            vertex(B1.x, B1.y, B1.z);
            vertex(B5.x, B5.y, B5.z);
            vertex(B6.x, B6.y, B6.z);

            vertex(B6.x, B6.y, B6.z);
            vertex(B4.x, B4.y, B4.z);
            vertex(B3.x, B3.y, B3.z);
            vertex(B8.x, B8.y, B8.z);  

            vertex(B8.x, B8.y, B8.z);
            vertex(B6.x, B6.y, B6.z);
            vertex(B5.x, B5.y, B5.z);
            vertex(B7.x, B7.y, B7.z);   

            vertex(B7.x, B7.y, B7.z);
            vertex(B8.x, B8.y, B8.z);
            vertex(B3.x, B3.y, B3.z);
            vertex(B2.x, B2.y, B2.z);  

            vertex(B2.x, B2.y, B2.z);
            vertex(B7.x, B7.y, B7.z);
            vertex(B5.x, B5.y, B5.z);
            vertex(B1.x, B1.y, B1.z);

          endShape();
          popMatrix();

     }

    void turn(){
        ry = ry + (PI/ds); 
    }

void moussecube (){

      if (mousePressed == true) {
            float rate = 0.01;
            rx += (pmouseY-mouseY) * rate;
            ry += (mouseX-pmouseX) * rate;
        }   

    }
}

Answers

  • GoToLoopGoToLoop

    Since Processing.JS is stuck @ v1.4.1 since I've known Processing project, if you can't run your program at Processing v1.5.1,
    most probably it won't run at JS Mode either! [-X

  • ottaotta

    Thanks GoToLoop

    I just try open the program with Processing 1.5.1 and this works well, So this mean (maybe) that I don't use things that are not supported by JS.

  • GoToLoopGoToLoop
    edited March 2014

    I've tested your code both on hosting Processing sites and JS Mode. Only the 1st part works! @-)
    Problem is, there aren't any JS errors I can see from browser built-in JS inspection tools! :-??

  • ottaotta

    I'm glad that there is no error in my code... ;)) But I'm sad because this mean that there is no solution to my problem... :-t

    May I ask you, if there is a way to get the same "effect" by another way (instead of spotlight()), because I would like to embed this program onto my web site (I mean the full code, not the short sample I have posted here).

  • ottaotta

    I'm sorry to come back with my problem but I really would like to find a way to solve it.

    To highlight the problem I wrote a shorter code based on a example given in tutorial (spotlight). This exemple works well, either in Processing or ProcessingJS, but if I add another shape (built with beginShape) the sketch still work in processing but in processing JS this second shape disappears...

    So I think that the problem is the use of beginShape() and spotlight() together. To be complete, when I run the sketch (using beginShape) in the brower, Firebug gives me this warning:

    "WebGL: Drawing without vertex attrib 0 array enabled forces the browser to do expensive emulation work when running on desktop OpenGL platforms, for example on Mac. It is preferable to always draw with vertex attrib 0 array enabled, by using bindAttribLocation to bind some always-used attribute to location 0." and highlights Line 5634 "curContext.drawArrays(ctxMode, 0, vArray.length / 3); "

    void setup() {
  size(640, 360, P3D);
  noStroke();
  fill(204);
  sphereDetail(60);
}

void draw() 
{
  background(0); 
 spotLight(204, 153, 0, 320, 180,  1000, 0, 0, -1, PI/2, 20); 

  pushMatrix();
  translate(width/3, height/2, 0); 
  scale(0.5);
  sphere(120); 
  popMatrix();

 pushMatrix(); 
  translate(2*width/3, height/2, 0); 
   scale(40);
   beginShape(QUADS);
   vertex(-1,  1,  1);
   vertex( 1,  1,  1);
   vertex( 1, -1, -1);
   vertex(-1, -1, -1);
  endShape();
  popMatrix();
}
Sign In or Register to comment.