skip to content

squares, corners

loops & patterns based on modifying a square plus-sign shape & obsessing over little variations
Last updated: Sep 21, 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, p) {
let c1 = size * 0.25
let c2 = size - c1
let e1 = size * p
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)


p is the progress of the animation loop, between 0 and 1. Using animLoop.theta via p5.createLoop:

let p = map(sin(animLoop.theta), -1, 1, 0, 1)

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: