316 lines
8 KiB
JavaScript
316 lines
8 KiB
JavaScript
export function confettiAnimation() {
|
|
(() => {
|
|
"use strict";
|
|
|
|
// Utility functions grouped into a single object
|
|
const Utils = {
|
|
// Parse pixel values to numeric values
|
|
parsePx: (value) => parseFloat(value.replace(/px/, "")),
|
|
|
|
// Generate a random number between two values, optionally with a fixed precision
|
|
getRandomInRange: (min, max, precision = 0) => {
|
|
const multiplier = Math.pow(10, precision);
|
|
const randomValue = Math.random() * (max - min) + min;
|
|
return Math.floor(randomValue * multiplier) / multiplier;
|
|
},
|
|
|
|
// Pick a random item from an array
|
|
getRandomItem: (array) =>
|
|
array[Math.floor(Math.random() * array.length)],
|
|
|
|
// Scaling factor based on screen width
|
|
getScaleFactor: () => Math.log(window.innerWidth) / Math.log(1920),
|
|
|
|
// Debounce function to limit event firing frequency
|
|
debounce: (func, delay) => {
|
|
let timeout;
|
|
return (...args) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => func(...args), delay);
|
|
};
|
|
},
|
|
};
|
|
|
|
// Precomputed constants
|
|
const DEG_TO_RAD = Math.PI / 180;
|
|
|
|
// Centralized configuration for default values
|
|
const defaultConfettiConfig = {
|
|
confettiesNumber: 250,
|
|
confettiRadius: 6,
|
|
confettiColors: [
|
|
"#fcf403",
|
|
"#62fc03",
|
|
"#f4fc03",
|
|
"#03e7fc",
|
|
"#03fca5",
|
|
"#a503fc",
|
|
"#fc03ad",
|
|
"#fc03c2",
|
|
],
|
|
emojies: [],
|
|
svgIcon: null, // Example SVG link
|
|
};
|
|
|
|
// Confetti class representing individual confetti pieces
|
|
class Confetti {
|
|
constructor({
|
|
initialPosition,
|
|
direction,
|
|
radius,
|
|
colors,
|
|
emojis,
|
|
svgIcon,
|
|
}) {
|
|
const speedFactor =
|
|
Utils.getRandomInRange(0.9, 1.7, 3) *
|
|
Utils.getScaleFactor();
|
|
this.speed = { x: speedFactor, y: speedFactor };
|
|
this.finalSpeedX = Utils.getRandomInRange(0.2, 0.6, 3);
|
|
this.rotationSpeed =
|
|
emojis.length || svgIcon
|
|
? 0.01
|
|
: Utils.getRandomInRange(0.03, 0.07, 3) *
|
|
Utils.getScaleFactor();
|
|
this.dragCoefficient = Utils.getRandomInRange(
|
|
0.0005,
|
|
0.0009,
|
|
6
|
|
);
|
|
this.radius = { x: radius, y: radius };
|
|
this.initialRadius = radius;
|
|
this.rotationAngle =
|
|
direction === "left"
|
|
? Utils.getRandomInRange(0, 0.2, 3)
|
|
: Utils.getRandomInRange(-0.2, 0, 3);
|
|
this.emojiRotationAngle = Utils.getRandomInRange(
|
|
0,
|
|
2 * Math.PI
|
|
);
|
|
this.radiusYDirection = "down";
|
|
|
|
const angle =
|
|
direction === "left"
|
|
? Utils.getRandomInRange(82, 15) * DEG_TO_RAD
|
|
: Utils.getRandomInRange(-15, -82) * DEG_TO_RAD;
|
|
this.absCos = Math.abs(Math.cos(angle));
|
|
this.absSin = Math.abs(Math.sin(angle));
|
|
|
|
const offset = Utils.getRandomInRange(-150, 0);
|
|
const position = {
|
|
x:
|
|
initialPosition.x +
|
|
(direction === "left" ? -offset : offset) * this.absCos,
|
|
y: initialPosition.y - offset * this.absSin,
|
|
};
|
|
|
|
this.position = { ...position };
|
|
this.initialPosition = { ...position };
|
|
this.color =
|
|
emojis.length || svgIcon
|
|
? null
|
|
: Utils.getRandomItem(colors);
|
|
this.emoji = emojis.length ? Utils.getRandomItem(emojis) : null;
|
|
this.svgIcon = null;
|
|
|
|
// Preload SVG if provided
|
|
if (svgIcon) {
|
|
this.svgImage = new Image();
|
|
this.svgImage.src = svgIcon;
|
|
this.svgImage.onload = () => {
|
|
this.svgIcon = this.svgImage; // Mark as ready once loaded
|
|
};
|
|
}
|
|
|
|
this.createdAt = Date.now();
|
|
this.direction = direction;
|
|
}
|
|
|
|
draw(context) {
|
|
const { x, y } = this.position;
|
|
const { x: radiusX, y: radiusY } = this.radius;
|
|
const scale = window.devicePixelRatio;
|
|
|
|
if (this.svgIcon) {
|
|
context.save();
|
|
context.translate(scale * x, scale * y);
|
|
context.rotate(this.emojiRotationAngle);
|
|
context.drawImage(
|
|
this.svgIcon,
|
|
-radiusX,
|
|
-radiusY,
|
|
radiusX * 2,
|
|
radiusY * 2
|
|
);
|
|
context.restore();
|
|
} else if (this.color) {
|
|
context.fillStyle = this.color;
|
|
context.beginPath();
|
|
context.ellipse(
|
|
x * scale,
|
|
y * scale,
|
|
radiusX * scale,
|
|
radiusY * scale,
|
|
this.rotationAngle,
|
|
0,
|
|
2 * Math.PI
|
|
);
|
|
context.fill();
|
|
} else if (this.emoji) {
|
|
context.font = `${radiusX * scale}px serif`;
|
|
context.save();
|
|
context.translate(scale * x, scale * y);
|
|
context.rotate(this.emojiRotationAngle);
|
|
context.textAlign = "center";
|
|
context.fillText(this.emoji, 0, radiusY / 2); // Adjust vertical alignment
|
|
context.restore();
|
|
}
|
|
}
|
|
|
|
updatePosition(deltaTime, currentTime) {
|
|
const elapsed = currentTime - this.createdAt;
|
|
|
|
if (this.speed.x > this.finalSpeedX) {
|
|
this.speed.x -= this.dragCoefficient * deltaTime;
|
|
}
|
|
|
|
this.position.x +=
|
|
this.speed.x *
|
|
(this.direction === "left" ? -this.absCos : this.absCos) *
|
|
deltaTime;
|
|
this.position.y =
|
|
this.initialPosition.y -
|
|
this.speed.y * this.absSin * elapsed +
|
|
(0.00125 * Math.pow(elapsed, 2)) / 2;
|
|
|
|
if (!this.emoji && !this.svgIcon) {
|
|
this.rotationSpeed -= 1e-5 * deltaTime;
|
|
this.rotationSpeed = Math.max(this.rotationSpeed, 0);
|
|
|
|
if (this.radiusYDirection === "down") {
|
|
this.radius.y -= deltaTime * this.rotationSpeed;
|
|
if (this.radius.y <= 0) {
|
|
this.radius.y = 0;
|
|
this.radiusYDirection = "up";
|
|
}
|
|
} else {
|
|
this.radius.y += deltaTime * this.rotationSpeed;
|
|
if (this.radius.y >= this.initialRadius) {
|
|
this.radius.y = this.initialRadius;
|
|
this.radiusYDirection = "down";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
isVisible(canvasHeight) {
|
|
return this.position.y < canvasHeight + 100;
|
|
}
|
|
}
|
|
|
|
class ConfettiManager {
|
|
constructor() {
|
|
this.canvas = document.createElement("canvas");
|
|
// @ts-ignore
|
|
this.canvas.style =
|
|
"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none;";
|
|
document.body.appendChild(this.canvas);
|
|
this.context = this.canvas.getContext("2d");
|
|
this.confetti = [];
|
|
this.lastUpdated = Date.now();
|
|
window.addEventListener(
|
|
"resize",
|
|
Utils.debounce(() => this.resizeCanvas(), 200)
|
|
);
|
|
this.resizeCanvas();
|
|
requestAnimationFrame(() => this.loop());
|
|
}
|
|
|
|
resizeCanvas() {
|
|
this.canvas.width = window.innerWidth * window.devicePixelRatio;
|
|
this.canvas.height =
|
|
window.innerHeight * window.devicePixelRatio;
|
|
}
|
|
|
|
addConfetti(config = {}) {
|
|
const {
|
|
confettiesNumber,
|
|
confettiRadius,
|
|
confettiColors,
|
|
emojies,
|
|
svgIcon,
|
|
} = {
|
|
...defaultConfettiConfig,
|
|
...config,
|
|
};
|
|
|
|
const baseY = (5 * window.innerHeight) / 7;
|
|
for (let i = 0; i < confettiesNumber / 2; i++) {
|
|
this.confetti.push(
|
|
new Confetti({
|
|
initialPosition: { x: 0, y: baseY },
|
|
direction: "right",
|
|
radius: confettiRadius,
|
|
colors: confettiColors,
|
|
emojis: emojies,
|
|
svgIcon,
|
|
})
|
|
);
|
|
this.confetti.push(
|
|
new Confetti({
|
|
initialPosition: { x: window.innerWidth, y: baseY },
|
|
direction: "left",
|
|
radius: confettiRadius,
|
|
colors: confettiColors,
|
|
emojis: emojies,
|
|
svgIcon,
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
resetAndStart(config = {}) {
|
|
// Clear existing confetti
|
|
this.confetti = [];
|
|
// Add new confetti
|
|
this.addConfetti(config);
|
|
}
|
|
|
|
loop() {
|
|
const currentTime = Date.now();
|
|
const deltaTime = currentTime - this.lastUpdated;
|
|
this.lastUpdated = currentTime;
|
|
|
|
this.context.clearRect(
|
|
0,
|
|
0,
|
|
this.canvas.width,
|
|
this.canvas.height
|
|
);
|
|
|
|
this.confetti = this.confetti.filter((item) => {
|
|
item.updatePosition(deltaTime, currentTime);
|
|
item.draw(this.context);
|
|
return item.isVisible(this.canvas.height);
|
|
});
|
|
|
|
requestAnimationFrame(() => this.loop());
|
|
}
|
|
}
|
|
|
|
const manager = new ConfettiManager();
|
|
manager.addConfetti();
|
|
|
|
const triggerButton = document.getElementById("show-again");
|
|
if (triggerButton) {
|
|
triggerButton.addEventListener("click", () =>
|
|
manager.addConfetti()
|
|
);
|
|
}
|
|
|
|
const resetInput = document.getElementById("reset");
|
|
if (resetInput) {
|
|
resetInput.addEventListener("input", () => manager.resetAndStart());
|
|
}
|
|
})();
|
|
}
|