75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
const indices = __INDICES__();
|
|
const points = __POINTS__();
|
|
const edges = __EDGES__();
|
|
const sizes = __SIZES__();
|
|
|
|
|
|
const starsEdges = document.getElementById('stars-edges');
|
|
const starsEdgesResize = () => {
|
|
const w = starsEdges.clientWidth;
|
|
const h = starsEdges.clientHeight;
|
|
starsEdges.setAttribute('viewBox', `0 0 ${w} ${h}`);
|
|
};
|
|
starsEdgesResize();
|
|
window.addEventListener('resize', starsEdgesResize);
|
|
|
|
const stars = [...indices];
|
|
|
|
document.querySelectorAll('#stars-container>*').forEach((star, i) => {
|
|
const currEdges = indices.map((o) => {
|
|
const [x, y] = (i > o) ? [o, i] : [i, o];
|
|
return [document.getElementById(`${x}-${y}`), o];
|
|
}).filter(([e]) => !!e);
|
|
|
|
stars[i] = [star, currEdges];
|
|
});
|
|
|
|
stars.forEach(([star, edges]) => {
|
|
star.addEventListener('mouseenter', () => {
|
|
edges.forEach(([edge]) => {
|
|
edge.setAttribute('opacity', '1');
|
|
});
|
|
});
|
|
|
|
star.addEventListener('mouseleave', () => {
|
|
edges.forEach(([edge]) => {
|
|
edge.setAttribute('opacity', '0');
|
|
});
|
|
});
|
|
});
|
|
|
|
function chooseRandom(arr) {
|
|
return arr[Math.floor(Math.random() * arr.length)];
|
|
}
|
|
|
|
|
|
let lidx = 0;
|
|
const activeEdges = [];
|
|
setInterval(() => {
|
|
if (Math.random() < 0.3) return;
|
|
if (Math.random() < 0.03) lidx = chooseRandom(indices);
|
|
|
|
let iter = 0;
|
|
while (iter++ < 300) {
|
|
const [, ledges] = stars[lidx];
|
|
|
|
let edge, nidx, iter2 = 0;
|
|
do {
|
|
[edge, nidx] = chooseRandom(ledges);
|
|
} while ((edge === undefined || activeEdges.includes(edge)) && iter2++ < 100);
|
|
|
|
activeEdges.push(edge);
|
|
|
|
edge.setAttribute("opacity", "1");
|
|
setTimeout(() => {
|
|
edge.setAttribute("opacity", "0");
|
|
activeEdges.splice(activeEdges.indexOf(edge), 1);
|
|
}, 4500 + Math.random() * 2500);
|
|
|
|
lidx = nidx;
|
|
return;
|
|
}
|
|
}, 650);
|
|
|
|
|