squares, corners

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: