# 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	beginShape()	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)	endShape()}``

`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: