problem with QUAD_STRIP in Javascript Mode

edited July 2014 in JavaScript Mode

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: - -!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;

PVector vertices[], vertices2[];

void setup() {

  x = width/2;
  y = height/2;
  z = 0;


void draw() {
  angle = 0;
  latheAngle = 0;

//Color parameters

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

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

  // draw toroid 
  latheAngle = 0; 
  for(int i=0; i<=segments; i++){ 
    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); 

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

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


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

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

  • ok thanks! should have figured, pretty universal

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

  • edited July 2014

    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

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

Sign In or Register to comment.