Generative Drawing

Resources:

p5 Reference: FrameCount()

FrameCount()

The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc.

FrameCount, when used together with the modulus operator (%) is a great way to make repeating, cyclical effects.

The following example shows an ellipse moving vertically, with a conditional statement to send it back to the bottom of the canvas when it reaches the top. It moves randomly in the x direction to create a jittery effect. We have also added a fading effect by drawing a low-opacity white rectangle over the whole canvas at each frame.

Try modifying the above code with frameCount and modulus for a cyclical effect, for example the fill of the circle.

Next, we can start to use the random() function within a for() loop to get controlled randomness. Here, we're using the variables pX and pY to store the coordinates from the previous pass of the loop. We then draw a line connecting the two points. We do this n times, resulting in a randomized, segmented polyline.

Now, instead of adding a random x offset between -1 and 1, what happens if we replace the 1 with i? Now the offset will be a function of the y coordinate, in other words, more controlled up top, and more chaotic at the bottom of the canvas.

What are some ways in which we could extend this program? If you like this example, you might consider expanding on this for this week's assignment. If you're not afraid of a little math, there are some similar "amoeba" examples on OpenProcessing.