diff --git a/index.php b/index.php index dc662e1..ea152b0 100644 --- a/index.php +++ b/index.php @@ -732,68 +732,6 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; let animationId; let bars = []; - const barPalette = [190, 140, 330, 45]; // Cian, Lima, Rosa, Oro - - class ColorBar { - constructor() { - this.reset(); - } - - reset() { - // Inicia desde arriba o desde la izquierda para movimiento diagonal - if (Math.random() > 0.5) { - this.x = Math.random() * canvas.width; - this.y = -50; - } else { - this.x = -50; - this.y = Math.random() * canvas.height; - } - - this.width = 3 + Math.random() * 5; - this.height = 40 + Math.random() * 60; // Mucho más largas, como barras reales - this.speed = 1 + Math.random() * 2; - // Selecciona un color específico de la paleta - this.hue = barPalette[Math.floor(Math.random() * barPalette.length)]; - this.opacity = 0.15 + Math.random() * 0.35; // Un poco más visibles - this.angle = Math.PI / 2.8; // Más pronunciada (aprox 64 grados) - } - - update(intensity) { - const s = this.speed * (1 + (intensity / 255) * 3); // Un poco más rápido - this.x += Math.cos(this.angle) * s; - this.y += Math.sin(this.angle) * s; - - // Ya no cambiamos el hue constantemente para mantener el color específico - - if (this.y > canvas.height + 100 || this.x > canvas.width + 100) { - this.reset(); - } - } - - draw(ctx) { - const lx = this.x / window.devicePixelRatio; - const ly = this.y / window.devicePixelRatio; - - ctx.save(); - ctx.translate(lx, ly); - ctx.rotate(this.angle); - - const color = `hsla(${this.hue}, 80%, 60%, ${this.opacity})`; - ctx.fillStyle = color; - - // Efecto de rastro/resplandor (Blur) - ctx.shadowBlur = 25; - ctx.shadowColor = color; - - ctx.beginPath(); - // Dibujamos centrado en la traslación para que la rotación sea correcta - ctx.roundRect(-this.width / 2, -this.height / 2, this.width, this.height, this.width / 2); - ctx.fill(); - - ctx.restore(); - } - } - function initVisualizer() { if (audioCtx) return; @@ -807,17 +745,10 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const bufferLength = analyzer.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); - // Create background bars - bars = []; - for(let i = 0; i < 80; i++) { - bars.push(new ColorBar()); - } - function resizeCanvas() { canvas.width = canvas.offsetWidth * window.devicePixelRatio; canvas.height = canvas.offsetHeight * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio); - bars.forEach(b => b.reset()); } resizeCanvas(); window.addEventListener('resize', resizeCanvas); @@ -839,11 +770,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; for(let i=0; i { - b.update(average); - b.draw(ctx); - }); + const barCount = bufferLength / 1.5; const logicalWidth = canvas.width / window.devicePixelRatio;