Question

We all know how to draw a line in Processing.

But when we draw a line, the line is shown immediately.

What if i want to witness the drawing process, namely, to see the line moving forward, gradually completes a whole line.

Here’s what i want to realize: to DRAW several lines and curves which finally turn into some pattern.

So how to make that happen? Using array?

Many thanks.

Answer 1

In processing all of the drawing happens in a loop. An easy way to create animated sequences like you describe is to use frameCount to drive it and using the modulus function % is a good way to create a loop. For example, to animate along the x axis:

void draw() {
   float x = 50;
   float y = 50;
   float lineLength = 50;
   int framesToAnimate = 60;
   line(x,y,x+float(frameCount % framesToAnimate)/framesToAnimate*lineLength, y);
}

Note: strange things will happen if you don’t cast / convert to a float

I use this pretty often to animate other features such as the color.

fill(color(127 + sin(float(frameCount)/90)*127, 0, 0, 127));

If you want to get more advanced, setting vectors and coordinates with PVector. There is a pretty good tutorial on Daniel Shiffman’s site.