Search code examples
processingcurve

(processing) why is `curveVertex` skipping points?

I'm using processing 3.5.3 and I'm drawing curves using beginShape, curveVertex, endShape. My window is 1200 pixels wide, and I'm plotting a sequence of points with evenly spaced x values. The space between x values is 1200/2000, less than a pixel. I know, this is a gross misuse of curveVertex, but it works. Each frame is taking a solid ten seconds to render (because of the math I'm using, not because of processing) and I'm saving each frame as a .png.

The problem is I'm getting these straight patches where there should be curves. It looks like big stretches of x values are getting skipped. I know it's multiple vertices getting skipped because the straight patches span multiple x pixels, maybe fifty-ish at worst. Most frames are fine but then there'll be one frame with huge patches missing. Any idea what could cause this?

Edit: here's the code and some frames showing the problem. The most relevant section is in draw().

float r; // parameter for recurence
float dr; // change in r per frame
int lod = 2000; // level of detail for curves
int k; // recurrence depth
float yscale = 16; // scale down the y-axis by this factor

// transforms from [0, 1] to screen coordinates
void vertex(float x, float y) {
  curveVertex(x * width, (1 - y) * height);
}

void setup() {
  size(1200, 800);
  background(0);
  stroke(255);
  noFill();
  r = 3.7;
  k = 30;
  dr = 0.0005;
}

void draw() {
  background(0);
  
  // animate r
  r += dr;
  if (r >= 4) {
    exit();
  }
  
  // draw the pdf of Xk
  stroke(255);
  beginShape();
  vertex(0, fn(0, k) / yscale);
  for (int i = 0; i <= lod; i++) {
    float x = i / (float)lod;
    vertex(x, fn(x, k) / yscale);
  }
  vertex(1, fn(1, k) / yscale);
  endShape();
  
  textSize(24);
  text(String.format("r = %.4f", r), 24, 24);
  
  saveFrame("output/frame_#####.png");
}

// pdf of Xn+1 = r*Xn*(1-Xn), where X0 is uniform
float fn(float x, int n) {
  if (n == 0) {
    return 1;
  }
  else if (x > r/4) {
    return 0;
  }
  else {
    float d = sqrt(1 - 4/r*x);
    return (fn(0.5 + 0.5*d, n-1) + fn(0.5 - 0.5*d, n-1)) / (r*d);
  }
}

And here's a particularly bad frame: A bad frame

Solution

  • I transformed your code to render into a PShape and then iterated over the vertices of the PShape to determine whether the vertices themselves are present (and are not being joined up), or whether they are missing completely:

    enter image description here Vertices in green -- they are missing during the sections.

    curveVertex() within a PShape works in P2D renderer mode only. Interestingly, in this mode (in contrast to default JAVA2D renderer) the previously straight sections are not present...

    ...which lead me to look at the values given to the vertices: I tried constraining them to the dimensions of the screen:

    by changing this:

    curveVertex(x * width, (1 - y) * height);

    into this:

    curveVertex(constrain(x * width, 0, width), constrain((1 - y) * height, 0, height));

    And now we begin to understand what was happening:

    Constrained @ r = 3.7055: enter image description here

    Unconstrained @ r = 3.7055: enter image description here

    Verdict

    The equation was giving incredibly large values for certain coordinate points and Processing, or the curve algorithm itself, was skipping them. Once the values are constrained to a more reasonable level, the straight sections disappear and every point is joined up.