139 lines
4.1 KiB
JavaScript
139 lines
4.1 KiB
JavaScript
import { ButtonEffect } from '../effect-base.js';
|
|
|
|
/**
|
|
* Raining background effect
|
|
* Animated raindrops falling down the button
|
|
*/
|
|
export class RainBackgroundEffect extends ButtonEffect {
|
|
constructor() {
|
|
super({
|
|
id: 'bg-rain',
|
|
name: 'Rain Effect',
|
|
type: 'general',
|
|
category: 'Background Animations',
|
|
renderOrder: 55 // After background, before other effects
|
|
});
|
|
|
|
// Initialize raindrop positions (persistent across frames)
|
|
this.raindrops = [];
|
|
this.initialized = false;
|
|
}
|
|
|
|
defineControls() {
|
|
return [
|
|
{
|
|
id: 'animate-rain',
|
|
type: 'checkbox',
|
|
label: 'Rain Effect',
|
|
defaultValue: false
|
|
},
|
|
{
|
|
id: 'rain-density',
|
|
type: 'range',
|
|
label: 'Rain Density',
|
|
defaultValue: 15,
|
|
min: 5,
|
|
max: 30,
|
|
step: 1,
|
|
showWhen: 'animate-rain',
|
|
description: 'Number of raindrops'
|
|
},
|
|
{
|
|
id: 'rain-speed',
|
|
type: 'range',
|
|
label: 'Rain Speed',
|
|
defaultValue: 2,
|
|
min: 1,
|
|
max: 3,
|
|
step: 1,
|
|
showWhen: 'animate-rain',
|
|
description: 'Speed of falling rain'
|
|
},
|
|
{
|
|
id: 'rain-color',
|
|
type: 'color',
|
|
label: 'Rain Color',
|
|
defaultValue: '#6ba3ff',
|
|
showWhen: 'animate-rain',
|
|
description: 'Color of raindrops'
|
|
}
|
|
];
|
|
}
|
|
|
|
isEnabled(controlValues) {
|
|
return controlValues['animate-rain'] === true;
|
|
}
|
|
|
|
apply(context, controlValues, animState, renderData) {
|
|
if (!animState) return;
|
|
|
|
const density = controlValues['rain-density'] || 15;
|
|
const speed = controlValues['rain-speed'] || 1.5;
|
|
const color = controlValues['rain-color'] || '#6ba3ff';
|
|
|
|
// Initialize raindrop base properties (seed values for deterministic animation)
|
|
if (!this.initialized || this.raindrops.length !== density) {
|
|
this.raindrops = [];
|
|
for (let i = 0; i < density; i++) {
|
|
// Use multiple large prime seeds for better distribution
|
|
const seed1 = i * 2654435761; // Large prime multiplier
|
|
const seed2 = i * 2246822519 + 3141592653;
|
|
const seed3 = i * 3266489917 + 1618033988;
|
|
const seed4 = i * 374761393 + 2718281828;
|
|
|
|
// Hash-like function for better pseudo-random distribution
|
|
const hash = (s) => {
|
|
const x = Math.sin(s * 0.0001) * 10000;
|
|
return x - Math.floor(x);
|
|
};
|
|
|
|
this.raindrops.push({
|
|
xOffset: hash(seed1), // 0 to 1
|
|
startY: hash(seed2), // 0 to 1 (initial Y position within loop)
|
|
length: 2 + hash(seed3) * 4,
|
|
speedMultiplier: 0.8 + hash(seed4) * 0.4
|
|
});
|
|
}
|
|
this.initialized = true;
|
|
}
|
|
|
|
// Draw raindrops
|
|
context.strokeStyle = color;
|
|
context.lineWidth = 1;
|
|
context.lineCap = 'round';
|
|
|
|
this.raindrops.forEach(drop => {
|
|
// Calculate position based on current frame for perfect looping
|
|
const totalDistance = renderData.height + drop.length * 2;
|
|
|
|
// Progress through the animation (0 to 1)
|
|
const progress = animState.progress; // 0 at frame 0, ~0.975 at frame 39
|
|
|
|
// All drops complete the same number of cycles (based on speed)
|
|
// startY provides the offset for varied starting positions
|
|
// Round speed to nearest 0.5 to ensure clean cycles
|
|
const cycles = Math.round(speed * 2) / 2; // e.g., 1.5 -> 1.5, 1.7 -> 1.5, 2.3 -> 2.5
|
|
const cycleProgress = (progress * cycles + drop.startY) % 1.0;
|
|
const y = cycleProgress * totalDistance - drop.length;
|
|
|
|
// X position remains constant throughout the loop
|
|
const x = drop.xOffset * renderData.width;
|
|
|
|
// Vary opacity slightly for depth effect (using speedMultiplier for variation)
|
|
const opacity = 0.4 + drop.speedMultiplier * 0.3; // 0.64 to 0.76
|
|
|
|
// Draw raindrop
|
|
context.globalAlpha = opacity;
|
|
context.beginPath();
|
|
context.moveTo(x, y);
|
|
context.lineTo(x, y + drop.length);
|
|
context.stroke();
|
|
context.globalAlpha = 1.0;
|
|
});
|
|
}
|
|
}
|
|
|
|
// Auto-register effect
|
|
export function register(generator) {
|
|
generator.registerEffect(new RainBackgroundEffect());
|
|
}
|