81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
/**
|
|
* This file contains the animation logic for the closed screen.
|
|
*
|
|
* In it, we fill the screen evenly with "closed" messages. The locations are
|
|
*/
|
|
/**
|
|
* Contains the state for this demo.
|
|
*
|
|
* @type {{popups: Array, popup_index: number}}
|
|
*/
|
|
const state = {
|
|
popups: [],
|
|
popup_index: 0,
|
|
};
|
|
|
|
const MAX_POPUPS = 200;
|
|
|
|
function startClosedAnimation() {
|
|
window.setInterval(animationTick, 50);
|
|
}
|
|
|
|
function minDist(x, y) {
|
|
let min = 0;
|
|
let element;
|
|
for (element of state.popups) {
|
|
if (element == null) {
|
|
continue;
|
|
}
|
|
|
|
const dx = x - element.x;
|
|
const dy = y - element.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
min = Math.min(dist, min);
|
|
}
|
|
|
|
return min;
|
|
}
|
|
|
|
function animationTick() {
|
|
const index = state.popup_index;
|
|
if (state.popups.length >= MAX_POPUPS) {
|
|
document.body.removeChild(state.popups[index].element);
|
|
state.popups[index] = null;
|
|
}
|
|
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
|
|
// Generate new candidates
|
|
const candidates = [];
|
|
for (let i = 0; i < MAX_POPUPS; ++i) {
|
|
candidates.push({x: Math.random() * width, y: Math.random() * height});
|
|
}
|
|
|
|
let best = candidates[0];
|
|
let max = minDist(candidates[0].x, candidates[0].y);
|
|
let candidate;
|
|
for (candidate of candidates) {
|
|
const dist = minDist(candidate.x, candidate.y);
|
|
if (dist > max) {
|
|
best = candidate;
|
|
max = dist;
|
|
}
|
|
}
|
|
|
|
let element = document.createElement('div');
|
|
element.innerText = 'Nee';
|
|
element.classList.add('closed_notice');
|
|
element.style.left = best.x + 'px';
|
|
element.style.top = best.y + 'px';
|
|
element.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
|
|
|
|
document.body.appendChild(element);
|
|
best.element = element;
|
|
|
|
state.popups[index] = best;
|
|
state.popup_index = (index + 1) % MAX_POPUPS;
|
|
}
|
|
|
|
export {startClosedAnimation}
|