script.
	window.canvasOptions = {
		autoClear: true,
		autoCompensate: false,
		autoPushPop: true,
		canvas: true,
		centered: true,
		width: null,
		height: null
	};

let keys = 'qwertyuiop,asdfghjkl,zxcvbnm';
let chars = [];
let prev;

function setup() {
	let now = performance.now();
	let isPreview = isPreviewEmbed();
	let rowOffsetsX = [ 0, 0.3, 0.8 ];
	keys = keys.split(',').map((row, rowIndex) => {
			return row.split('').map((n, i) => {
				let rowOffsetX = rowOffsetsX[rowIndex];
				let x = rowOffsetX + i + 0.5;
				let y = rowIndex + 0.5;
				let pos = createVector(x, y);
				let dist = ease.cubic.in(pos.dist(createVector()) / (SQRT2 * 8), 0, 1, 1);
				let c = {
						char: n.toUpperCase(),
						key: n,
						keyPressed: false,
						keyReleased: -Infinity,
						pos,
						oPos: pos.copy(),
						dist
					};
				if(isPreview) {
					setTimeout(() => c.keyReleased = performance.now(), dist * 500 + 50 + now);
					setTimeout(() => c.keyReleased = performance.now(), dist * 500 + 300 + now);
				}
				chars.push(c);
				return c;
			});
		});
	window.addEventListener('keydown', e => {
		let char = chars.find(n => n.key === e.key.toLowerCase());
		if(char) {
			char.keyPressed = true;
		}
	});
	window.addEventListener('keyup', e => {
		let char = chars.find(n => n.key === e.key.toLowerCase());
		if(char) {
			char.keyPressed = false;
			char.keyReleased = e.timeStamp;
		}
	});
}

function draw(e) {
	let maxRowLength = keys[0].length;
	let size = width / maxRowLength * 0.8;
	let size_half = size * 0.5;
	translate(
		// keys.reduce((p, n) => p.length > n.length ? p : n).length * 50 * -0.5,
		maxRowLength * -size_half,
		keys.length * -size_half
	);
	
	textAlign('center');
	textBaseline('middle');
	
	keys.forEach((row, rowIndex) => {
		row.forEach((c, i) => {
			let { char, keyPressed, keyReleased, pos: v } = c;
			let pos = v.copy().mult(size);
			globalAlpha(1);
			let timeDiff = ease.cubic.in(1 - constrain(keyPressed ? 0 : (e - keyReleased) * 0.001, 0, 1), 0, 1, 1);
			fillStyle(rgb(lerpRGB(0, 127, 255, 255, 255, 255, timeDiff)));
			let scl = timeDiff + 1;
			font(`800 ${scl * size_half}px sans-serif`);
			fillText(char, pos.x, pos.y);
			globalAlpha(timeDiff * 0.15 + 0.05);
			beginPath();
			let s = size * scl * 0.75;
			rect(pos.x - s * 0.5, pos.y - s * 0.5, s, s, s * 0.1);
			fill();
			if(scl > 1.01) {
				c.scl = true;
				let c_ = random(chars.filter(n => n.scl));
				if(c_) {
					v.lerp(c_.pos, 0.01);
				}
			}
			else {
				c.scl = false;
				v.lerp(c.oPos, 0.004);
			}
		});
	});
}