skip to content

squares, corners

loops & patterns based on modifying a square plus-sign shape & obsessing over little variations
Last updated: Jul 29, 2022

I was going through some generative art experiments from earlier this year, and found a bunch that are all riffing off this same concept of animating points on a square plus-sign shape.

basic pattern goes like this...

The 4 corners of the square (in purple above) are always the same, then the 8 points around that move in & out depending on the animation's progress. In motion:

function shapeShape(size, progress) {
let c1 = size * 0.25
let c2 = size - c1
let e1 = size * progress
let e2 = size - e1


vertex(e1, c1)
vertex(c1, c1)
vertex(c1, e1)
vertex(c2, e1)
vertex(c2, c1)
vertex(e2, c1)
vertex(e2, c2)
vertex(c2, c2)
vertex(c2, e2)
vertex(c1, e2)
vertex(c1, c2)
vertex(e1, c2)
vertex(e1, c1)


Super simple... but makes cool stuff like this:

All of these though are still based on the corners of the inner square (the purple dots in the depiction above) being in the same place throughout - they're placed at 0.25 and 0.75 (out of a square of size 1). But what if we vary the edge points instead? What if we vary both?

In the simple example above:
corner = 0.25
edge = p
(both then multiplied by the size of the square container)

The values of corner and edge are included in the p5 sketch below: