brightness_high brightness_low

Breathing Circle


A triangle, a circle and everything in between have a surprising calming effect.

The long version

translate(width/2, height/2)
let radius = 0.4*Math.min(width, height);
let vertices = map(-cos(0.02*frameCount), -1, 1, 3, 20)
for (let i = 0; i < 2*PI; i += 2*PI/vertices) {
    point(radius*cos(i), radius*sin(i))
    for (let j = 0; j < 2*PI; j += 2*PI/vertices) {
        line(radius*cos(i), radius*sin(i), radius*cos(j), radius*sin(j))

That's it.
frameCount is a counter that is increased after each frame. For each frame, we find the number of vertices by mapping the cosine of the framecount from [-1, 1] to [3, 20]. As a result, the number of vertices is not an integer and we get a somewhat irregular N-gon. Both the background and stroke color have a bit a transparency, creating the phantom trace effect.
The nested for loop is responsible for the lines between all the vertices, technically making this a clique.