working graphical sketch won't export to javascript, why?

hydrodog

I don't get any error messages, but it doesn't do anything

void setup() {
  size(1024,768);
  textSize(30);
}

int slices = 1;
void draw() {
  background(0);
  float r = min(width,height) / 2.3;

  pushMatrix();
  translate(width/2, height/2);
  scale(r, r);
  stroke(255);
  fill(255);
  ellipse(0, 0, 2, 2);
  stroke(255,0,0);
  strokeWeight(0);
  popMatrix();
  double x = -1, dx = 2.0/slices;
  double sum = 0;
  float x1 = -1, y1 = 0;
  for (int i = 0; i <= slices; i++, x += dx) {
    pushMatrix();
    translate(width/2, height/2);
    scale(r, r);
    double y = Math.sqrt(1-x*x);
    float x2 = (float)x;
    float y2 = (float)-y;
    sum += 2*y;
    fill(255,0,0);
    quad (x1, y1, x2, y2, x2, 0, x1, 0);
    x1 = x2; y1 = y2;
    //println (i,dx,(float)x, (float)-y, (float)x, (float)+y);
    fill(0);
    stroke(0);
    popMatrix();
  }
  double area = sum * dx;
  text(String.valueOf(area), width/2-100, height/2+60);
  slices *= 2;
  if (slices > 256)
    slices = 1;
  delay(1000);
}

amnon

Most likely the call to Math.sqrt. Other possibilities double and delay.

Does this adapted code work?

void setup() {
  size(1024, 768);
  textSize(30);
}

int slices = 1;
int start;

void draw() {
  if (millis() - start >= 1000) {
    start = millis();
    background(0);
    float r = min(width, height) / 2.3;
    pushMatrix();
    translate(width/2, height/2);
    scale(r, r);
    stroke(255);
    fill(255);
    ellipse(0, 0, 2, 2);
    stroke(255, 0, 0);
    strokeWeight(0);
    popMatrix();
    float x = -1, dx = 2.0/slices;
    float sum = 0;
    float x1 = -1, y1 = 0;
    for (int i = 0; i <= slices; i++, x += dx) {
      pushMatrix();
      translate(width/2, height/2);
      scale(r, r);
      float y = sqrt(1-x*x);
      float x2 = (float)x;
      float y2 = (float)-y;
      sum += 2*y;
      fill(255, 0, 0);
      quad (x1, y1, x2, y2, x2, 0, x1, 0);
      x1 = x2; 
      y1 = y2;
      fill(0);
      stroke(0);
      popMatrix();
    }
    float area = sum * dx;
    text(String.valueOf(area), width/2-100, height/2+60);
    slices *= 2;
    if (slices > 256)
      slices = 1;
  }
}

hydrodog

No, it still doesn't work. Now it draws the initial circle and then freezes. So I suppose it is better. Is there any way to tell what isn't working in the javascript other than trial and error? Obviously I shouldn't have used the math library, though javascript has all the same routines.

Any other suggestions?

Even in java, the original code had an odd bug -- the first frame had a circle bigger than the subsequent ones, and I don't see why. The transformations are:

translate(width/2, height/2); scale(r,r);

and r never changes.

amnon

In that case it might be the for loop with two variables incrementing or the casting to float, which could be rewritten and removed respectively. I rarely use Processing.js so I can't say from experience what might be the problem. From the times I did use it, I gather that it has no debug, so indeed trial and error is the only way.

Hadn't really looked at the code as such, but setting strokeWeight(0) is strange. Note that setting strokeWeight(0) in setup() does fix your first frame big circle problem. Also you set fill and stroke after drawing and you do the exact same transformation in all the push/popMatrix calls. All in all there is some cleanup of this code possible.

Also you could try not relying on translate/scale, but instead use exact coordinates, perhaps even in a beginShape-endShape.