From 42caaab32b5a09c78a56800fc3114cc69c3f3c1d Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Sun, 15 Feb 2026 18:00:36 +0000 Subject: [PATCH] Auto commit: 2026-02-15T18:00:36.742Z --- index.php | 106 ++++++++++++++++++++++++++---------------------------- 1 file changed, 50 insertions(+), 56 deletions(-) diff --git a/index.php b/index.php index 2ad250d..917a59c 100644 --- a/index.php +++ b/index.php @@ -774,57 +774,56 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; let animationId; let bars = []; - function initVisualizer() { - if (audioCtx) return; - - audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - analyzer = audioCtx.createAnalyser(); - source = audioCtx.createMediaElementSource(audio); - source.connect(analyzer); - analyzer.connect(audioCtx.destination); - - analyzer.fftSize = 256; - const bufferLength = analyzer.frequencyBinCount; - const dataArray = new Uint8Array(bufferLength); - - // Create color bars - for(let i = 0; i < 40; i++) { - bars.push(new ColorBar()); + class ColorBar { + constructor() { + this.reset(); } - function resizeCanvas() { - canvas.width = canvas.offsetWidth * window.devicePixelRatio; - canvas.height = canvas.offsetHeight * window.devicePixelRatio; - ctx.scale(window.devicePixelRatio, window.devicePixelRatio); - bars.forEach(p => p.reset()); - } reset() { - this.x = Math.random() * canvas.width; - this.y = Math.random() * canvas.height; - this.width = Math.random() * 3 + 1; - this.height = Math.random() * 15 + 5; - this.speedX = Math.random() * 1 - 0.5; - this.speedY = Math.random() * 2 + 0.5; // Falling effect - this.opacity = Math.random() * 0.4 + 0.1; - this.hue = Math.random() * 360; - } - update(intensity) { - this.y += this.speedY * (1 + intensity * 0.05); - this.x += this.speedX; - this.height = (intensity / 5) * Math.random() + 5; - - if (this.y > canvas.height) { - this.y = -20; + // 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; } - if (this.x < 0) this.x = canvas.width; - if (this.x > canvas.width) this.x = 0; + + this.width = 4 + Math.random() * 6; // Un poco más grandes + this.height = 15 + Math.random() * 30; + this.speed = 1 + Math.random() * 2; + this.hue = Math.random() * 360; + this.opacity = 0.1 + Math.random() * 0.3; + this.angle = Math.PI / 4; // 45 grados para inclinación diagonal } - draw(ctx, intensity) { - ctx.fillStyle = `hsla(${(this.hue + intensity) % 360}, 100%, 70%, ${this.opacity})`; + + update(intensity) { + const s = this.speed * (1 + (intensity / 255) * 2); + this.x += Math.cos(this.angle) * s; + this.y += Math.sin(this.angle) * s; + + this.hue = (this.hue + 1) % 360; + + if (this.y > canvas.height + 50 || this.x > canvas.width + 50) { + 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); + + ctx.fillStyle = `hsla(${this.hue}, 80%, 60%, ${this.opacity})`; ctx.beginPath(); - ctx.roundRect(this.x / window.devicePixelRatio, this.y / window.devicePixelRatio, this.width, this.height, 2); + // 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(); } } @@ -841,16 +840,17 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const bufferLength = analyzer.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); - // Create particles - for(let i = 0; i < 50; i++) { - particles.push(new Particle()); + // Create background bars + bars = []; + for(let i = 0; i < 40; 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); - particles.forEach(p => p.reset()); + bars.forEach(b => b.reset()); } resizeCanvas(); window.addEventListener('resize', resizeCanvas); @@ -875,7 +875,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; // Draw background color bars bars.forEach(b => { b.update(average); - b.draw(ctx, average); + b.draw(ctx); }); const barCount = bufferLength / 1.5; @@ -885,14 +885,12 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; let x = logicalWidth / 2; let xLeft = logicalWidth / 2; - colorOffset += 1; // Faster color flow + colorOffset += 1; for (let i = 0; i < barCount; i++) { const barHeight = (dataArray[i] / 255) * logicalHeight * 0.9; - - // Enhanced Neon Rainbow spectrum const barHue = (colorOffset + (i / barCount) * 360) % 360; - const saturation = 100; // More saturated + const saturation = 100; const lightness = 60 + (dataArray[i] / 255) * 15; const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight); @@ -902,12 +900,10 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; ctx.fillStyle = gradient; - // Draw mirror bars with better rounded corners ctx.beginPath(); ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, [10, 10, 0, 0]); ctx.fill(); - // Top glow point ctx.fillStyle = `hsla(${(barHue + 40) % 360}, 100%, 80%, 0.8)`; ctx.beginPath(); ctx.arc(x + barWidth/2, logicalHeight - barHeight, barWidth/2, 0, Math.PI * 2); @@ -918,7 +914,6 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, [10, 10, 0, 0]); ctx.fill(); - // Top glow point mirror ctx.fillStyle = `hsla(${(barHue + 40) % 360}, 100%, 80%, 0.8)`; ctx.beginPath(); ctx.arc(xLeft - barWidth/2, logicalHeight - barHeight, barWidth/2, 0, Math.PI * 2); @@ -928,7 +923,6 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; xLeft -= barWidth + 3; } - // Update dynamic glow colors based on music intensity const dominantHue = (average * 2.5 + colorOffset) % 360; document.documentElement.style.setProperty('--dynamic-glow', `hsla(${dominantHue}, 100%, 60%, 0.8)`); document.documentElement.style.setProperty('--dynamic-glow-dim', `hsla(${dominantHue}, 100%, 60%, 0.3)`);