Spinny

Spins. Started out in After Effects, then built in Processing. Now ported to p5.js. Click to generate new colours.

let speed;
let weight;
let iterations;
let spacing;
let diagonal;

let colorA;
let colorB;

let canvasDiv = document.getElementById('p5-sketch');
let canvasElement;

function setup() {
	let canvas = createCanvas(canvasDiv.scrollWidth, canvasDiv.scrollHeight);
	canvas.parent('#p5-sketch');
	frameRate(60);
	colorMode(HSB, 255);
	speed = 0.04;
	iterations = 32;

	colorA = color(random(255), random(255), random(255));
	colorB = color(random(255), random(255), random(255));

	diagonal = Math.sqrt(Math.pow(canvasDiv.scrollWidth, 2) + Math.pow(canvasDiv.scrollHeight, 2));
	spacing = diagonal / (iterations - 1);
	weight = (spacing / 2) + 1;

	canvasElement = document.getElementsByTagName('canvas')[0];
}

function draw() {
	noFill();
	background(colorB);
	for (var i = 1; i < iterations; i++) {
		push();
		translate(width / 2, height / 2);
		rotate(radians(speed * (frameCount + 0) * (iterations - i)));
		stroke(lerpColor(colorA, colorB, (i / iterations)));
		strokeWeight(weight);
		strokeCap(SQUARE);
		drawArc(i * spacing);
		pop();
	}
}

function windowResized() {
	resizeCanvas(canvasDiv.scrollWidth, canvasDiv.scrollHeight);
	diagonal = Math.sqrt(Math.pow(canvasDiv.scrollWidth, 2) + Math.pow(canvasDiv.scrollHeight, 2));
	spacing = diagonal / (iterations - 1);
	weight = (spacing / 2) + 1;
}

function drawArc(size) {
	arc(0, 0, size, size, PI, 2 * PI);
}

function mousePressed(target) {
	if (target.target === canvasElement) {
		colorA = color(random(255), random(255), random(255));
		colorB = color(random(255), random(255), random(255));
		return false;
	}
}