72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
|
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);
|