<canvas>
</canvas>
<p>click to generate crazy particles</p>

body {
	cursor: pointer;
	margin: 0;
}

p {
	position: absolute;
	top: 50vh;
	left: 37vw;
	font-size: 1.5vw;
	font-family: Garamond;
	letter-spacing: 2px;
	color: white;
	opacity: 0.4;
}

const canvas = document.querySelector("canvas");

const c = canvas.getContext("2d");
canvas.style.background = "black";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
});

let prevX;
let prevY;
let circles = [];

document.addEventListener("click", () => {
	clientx = window.event.clientX;
	clienty = window.event.clientY;
	for (let i = 0; i < 10; i++) {
		const x = Math.random() * i * 20 + clientx;
		const y = Math.random() * i * 20 + clienty;
		const radius = Math.random() * 5;
		let val = i * 200 * Math.random() * clienty;
		let perc = Math.random() * 90;
		let color = `hsl(${val}, ${perc}%, 60%)`;
		let rad = Math.random() * 20;
		circles.push(new Circle(x, y, color, rad));
	}
	// for (i = 0; i < circles.length; i++) {
	// 	circles[i].draw();
	// }
	animate();
});

class Circle {
	constructor(x, y, color, radius) {
		this.x = x;
		this.y = y;
		this.color = color;
		this.radius = radius;
	}
	draw() {
		c.beginPath();
		c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
		c.fillStyle = this.color;
		c.fill();
		c.closePath();
	}
	update() {
		this.draw();
		this.x += Math.random() * 8 - 4;
		this.y += Math.random() * 8 - 4;
	}
}
function animate() {
	requestAnimationFrame(animate);
	c.clearRect(0, 0, canvas.width, canvas.height);
	circles.forEach((circle) => {
		circle.update();
	});
}