Auto commit: 2026-02-15T18:00:36.742Z
This commit is contained in:
Flatlogic Bot
parent
f2c51d1a6d
commit
42caaab32b
106
index.php
106
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)`);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user