Processing doesn't draw complete curves using while loop

Question

I'm investigating possibilities that Processing gives regarding generative art, and I stumbled upon a problem:

I'd like to generate multiple Bezier curves using a while loop. However, the program skips parts of some curves, while others are drawn properly.

Here's a working example:

void setup() {
  size(1000,500);
  background(#ffffff);
    }
      float[] i_x = {1,1};
      float[] i_y = {1,1};

    void draw() {
      
      while (i_y[0] < height)  
      {  
      bezier(0,i_y[0],100,height-100,width - 100,height-100,width, i_y[0]);
      i_y[0] = i_y[0] * 1.1;
      } 
       save("bezier.jpg");
    }

And here is the output. As you can see, only few of the curves are drawn in their full shape.

Also, when I draw one of the 'broken' curves out of the loop, it works fine.

I'd appreciate any help. I'm having good time learning coding concepts with visual output that Processing provides.

You could (and should) have placed this loop in the `setup` method as it has to run only once. The `draw` method is really just a loop running ~60 times per seconds (which you can change), and you don't need that, especially if you're saving to a file. — laancelot, Aug 06 '20 at 00:38

laancelot · Accepted Answer · 2020-08-06T00:36:37.067

It works as intended. Look what happens when you change the background color (great post btw, the working example made it good enough for me to want to debug it!):

If you're clever, you'll notice that the "inside" of the curve has a color. Except that for now it's white. That's why only the topmost are "invisible": you're drawing them one after the other, starting topmost, so every new curve eats the last one by painting over it, but only "inside the curve". See what happens when I apply some color to differentiate the fill and the background better:

Now that the problem is obvious, here's the answer: transparency.

  while (y < height)  
  {
    fill(0, 0, 0, 0); // this is the important line, you can keep your algo for the rest
    bezier(0, y, offset, height-offset, width - offset, height-offset, width, y);
    y *= 1.1;
  }

Which gives us this result:

Have fun!

Beautiful! I wouldn't expect a curve having a background color. Thank you. :) — C. Monovich, Aug 06 '20 at 08:24

Processing doesn't draw complete curves using while loop

1 Answers1