problem with QUAD_STRIP in Javascript Mode

tfvbhy

Hi all,

I'm working on a project involving an interactive torus, which I'm building in processing as a QUAD_STRIP shape—I can't think of how else one might do it.

The code runs pretty well in java mode. In particular, it's smooth, the frame-rate is as fast as i need it, and the lighting is working (call to lights() function) at the beginning of draw().

but i need the sketch in javascript mode, and that is not working out so nicely. the frame rate is slow enough that there's a refresh line circling the torus, the call to smooth(x) (i was using maximum 8) does not seem to be effecting the anti-aliasing at all, and the call to lights() is doing nothing but slightly darkening (uniformly) the entire shape.

a bit of googling brought me to these, which seem unfortunately relevant to my current issue: -http://forum.processing.org/one/topic/javascript-mode-beginshape-and-lights.html -https://groups.google.com/forum/#!topic/processingjs/VU8CGCsiqQE

but these are old links, so i was hoping that if this is all caused by a known bug then it would have been fixed by now... perhaps overly optimistic.

code for the torus follows, thanks in advance for any help!

---

float x,y,z,e;
int pts = 50; 
float angle = 0;
float radius = 50;

// lathe segments
int segments = 60;
float latheAngle = 0;
float latheRadius = 100.0;

//vertices
PVector vertices[], vertices2[];

void setup() {
  frameRate(80);

  size(500,500,P3D);
  x = width/2;
  y = height/2;
  z = 0;
  e=width;

}

void draw() {
  angle = 0;
  latheAngle = 0;
  lights();
  background(0);
  smooth(8);


//Color parameters
  //noFill();
  fill(50,10,250);
  noStroke();

  //println(e);
  camera(e*cos((2*PI/width)*mouseX), e*cos((PI/height)*mouseY), e*sin((2*PI/width)*mouseX), 0, 0, 0, 0, 1, 0);
  rectMode(CENTER);


// initialize point arrays 
  vertices = new PVector[pts+1]; 
  vertices2 = new PVector[pts+1];

  // fill arrays <br>
  for(int i=0; i<=pts; i++){ 
    vertices[i] = new PVector();
    vertices2[i] = new PVector();
    vertices[i].x = latheRadius + sin(radians(angle))*radius;
    vertices[i].z = cos(radians(angle))*radius; 
    angle+=360.0/pts; 
  } 

  // draw toroid 
  latheAngle = 0; 
  for(int i=0; i<=segments; i++){ 
    beginShape(QUAD_STRIP); 
    for(int j=0; j<=pts; j++){ 
      if (i>0){ <br>
        vertex(vertices2[j].x, vertices2[j].y, vertices2[j].z); 
      } 
      vertices2[j].x = cos(radians(latheAngle))*vertices[j].x; 
      vertices2[j].y = sin(radians(latheAngle))*vertices[j].x; 
      vertices2[j].z = vertices[j].z; 
      vertex(vertices2[j].x, vertices2[j].y, vertices2[j].z); 
    }
  latheAngle+=360.0/segments; 
  endShape(); 
  }
}

//MouseWheel Control assigns value of -12 to 12 to each scroll position, scale by width/50 to get zoom amount
void mouseWheel(MouseEvent event) {
  e += (width+height)/(100)*event.getCount();
  println(e);
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == DOWN) {
      e += (width+height)/(20);
    } else if (keyCode == UP) {
      e -= (width+height)/(20); 
    } 
  } 
} 

tfvbhy

oy sorry about code formatting... didn't quite get that right, hope its semi legible. note that "*"s were interpreted as multiplication

GoToLoop

Highlight the code block and hit CTRL+K in order to indent it w/ 4 spaces for the forum!

tfvbhy

ok thanks! should have figured, pretty universal

GoToLoop

Processing.JS, just like the old Processing v1.5.1, has a poor shape support! :o3
Better take a look at its own reference: http://processingjs.org/reference/

tfvbhy

Does that mean that I'm screwed?!? Well, i suppose i could introduce a java dependency and it would be not quite the end of the world, albeit sub-optimal

GoToLoop

As you said, it just seems to be running slowly. But I believe there's some room for some performance tweaks!