const pre = document.getElementById("main");

// the cool spinning circles on index.html
// const ctx = canvas.getContext("2d");
const rnd = (n) => Math.floor(Math.random() * n);
const colors = ["#f0d644", "#63eebe", "#9e4adf"]; // i like neon
const points = [];
let time = 0;

// handle page resizes without ruining everything
function resize() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx.width = canvas.width;
	ctx.height = canvas.height;
}

// math moment
function rotation(point) {
	return point.rot + time * point.speed;
}

function length(point) {
	return Math.min(time * point.speed, point.speed * 4);
}

function arc(point) {
	const angle = rotation(point);
	return [angle, angle + length(point)];
}

// initialize the canvas
function init() {
	resize();
	window.addEventListener("resize", resize);

	for (let i = 0; i < 10 + rnd(4); i++) {
		points.push({
			color: colors[rnd(colors.length)],
			radius: Math.random() * 600 + 300,
			speed: Math.random() / 10 + 0.1,
			rot: Math.random() * 2 * Math.PI,
		});
	}
}

// the heart and soul of the circles
function anim() {
	// center points
	const cx = ctx.width / 2;
	const cy = ctx.height / 2;

	ctx.clearRect(0, 0, ctx.width, ctx.height);
	ctx.globalAlpha = time / 3; // fade in
	ctx.lineWidth = 4;

	for (let point of points) {
		ctx.beginPath();
		ctx.strokeStyle = point.color;
		ctx.arc(cx, cy, point.radius, ...arc(point));
		ctx.stroke();
	}

	time += 0.01;
	setTimeout(anim, 1000 / 60);
}

pre.textContent = "you are at celery.eu.org"

init();
setTimeout(anim, 1000);