spiral-wave.js

'use strict'
var gif, canvElt, 
	numFrames = 30, 
	duration = 1200,
	recording = true,

	time = 0
;

function setup() {
	canvElt = createCanvas(1000, 1000).elt;
	gif = new GIF({
		workers: 2,
		quality: 10,
		width: width,
		height: height	
	});

	noStroke()
}

function draw() {
	time = (frameCount%numFrames)/numFrames
	// time = mouseX/width % 1;
	background(0)


	translate(width/2, height/2)

	let numCircs = 20,
		numLayers = 20,
		R = width * 0.4,
		r = R * 0.2
	;
	
	for (let j=0; j<numLayers; j++) {
		push()
		scale(pow(0.80, j)) // <----------- here
		rotate((j-2*time) * 1.5*TAU/numCircs)
		for (let i=0; i<numCircs; i++) {
			// let a = lerp(0, TWO_PI, ease(mod(i/numCircs+time,1)),5) - time*TAU, 
			let aoff =  TAU / numCircs * sin(time*TAU+i/numCircs*TAU),
				a = i*TAU/numCircs + aoff, 
				x = R * cos(a),
				y = R * sin(a)
			ellipse(x,y,r,r);
		}
		pop()
	}

	ellipse(0,0,width*0.02)	
	

	if(recording) gif.addFrame(canvElt,{copy:true,delay:duration/numFrames})
	if(frameCount>=numFrames && recording === true) {
		console.log("rendering...")
		noLoop();

		gif.on("progress", (p) => document.title = ((p*numFrames)+ "/"+numFrames))
		gif.render()
		gif.on("finished", function(blob) {
			var resultGif = document.createElement("img")
			resultGif.src = URL.createObjectURL(blob);
			document.body.appendChild(resultGif)
			document.title = "done; "+blob.size/1000000+"Mb"
		}); 
	}
}

function ease(t, n) {
	n = n | 2

	if (t<0.5){
		return  pow(2*t,n)/2 
	} else {
		return 1-pow(2*abs(t-1),n)/2
	} 
}

var quintEase = function(t) {
	return ease(t,5) 
}

function anim(from, to, ease, startTime, endTime) {
	startTime = (typeof startTime === "undefined") ? 0 : startTime;
	endTime = 	(typeof endTime === "undefined") ? 1 : endTime;
	ease = ease || function(t) {return t}

	if (time < startTime) {
		return from;
	} else if (time > endTime) {
		return to;
	} else {
		var t = (time - startTime) / (endTime - startTime)
		return lerp(from, to, ease(t));
	}
}

function mod(n, m) {
    return ((n % m) + m) % m;
}