Auto commit: 2026-02-15T17:29:16.769Z
This commit is contained in:
Flatlogic Bot
parent
4dcfef0593
commit
ae58125458
159
index.php
159
index.php
@ -731,12 +731,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- Right Section: Featured Image -->
|
|
||||||
<section class="image-section">
|
|
||||||
<div class="featured-img-container">
|
|
||||||
<img src="<?= htmlspecialchars($projectImageUrl) ?>" alt="Featured Image">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Floating Social Links -->
|
<!-- Floating Social Links -->
|
||||||
@ -776,91 +771,93 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
source.connect(analyzer);
|
source.connect(analyzer);
|
||||||
analyzer.connect(audioCtx.destination);
|
analyzer.connect(audioCtx.destination);
|
||||||
|
|
||||||
analyzer.fftSize = 128;
|
analyzer.fftSize = 256;
|
||||||
const bufferLength = analyzer.frequencyBinCount;
|
const bufferLength = analyzer.frequencyBinCount;
|
||||||
const dataArray = new Uint8Array(bufferLength);
|
const dataArray = new Uint8Array(bufferLength);
|
||||||
|
|
||||||
canvas.width = canvas.offsetWidth;
|
function resizeCanvas() {
|
||||||
canvas.height = canvas.offsetHeight;
|
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
||||||
|
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
||||||
let hue = 0;
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
function draw() {
|
|
||||||
if (audio.paused) {
|
|
||||||
document.documentElement.style.setProperty('--dynamic-glow', 'rgba(56, 189, 248, 0.7)');
|
|
||||||
document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(56, 189, 248, 0.4)');
|
|
||||||
document.documentElement.style.setProperty('--shake-offset-x', '0px');
|
|
||||||
document.documentElement.style.setProperty('--shake-offset-y', '0px');
|
|
||||||
document.documentElement.style.setProperty('--bass-flash-opacity', '0');
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
animationId = requestAnimationFrame(draw);
|
resizeCanvas();
|
||||||
analyzer.getByteFrequencyData(dataArray);
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
let hue = 0;
|
||||||
|
function draw() {
|
||||||
|
if (audio.paused) {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
document.documentElement.style.setProperty('--dynamic-glow', 'rgba(56, 189, 248, 0.7)');
|
||||||
|
document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(56, 189, 248, 0.4)');
|
||||||
|
document.documentElement.style.setProperty('--shake-offset-x', '0px');
|
||||||
|
document.documentElement.style.setProperty('--shake-offset-y', '0px');
|
||||||
|
document.documentElement.style.setProperty('--bass-flash-opacity', '0');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
animationId = requestAnimationFrame(draw);
|
||||||
|
analyzer.getByteFrequencyData(dataArray);
|
||||||
|
|
||||||
const barWidth = (canvas.width / bufferLength) * 2.5;
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
let barHeight;
|
|
||||||
let x = 0;
|
|
||||||
|
|
||||||
// Calcular intensidad promedio para reactividad
|
const barCount = bufferLength / 1.5;
|
||||||
let sum = 0;
|
const logicalWidth = canvas.width / window.devicePixelRatio;
|
||||||
for(let i=0; i<bufferLength; i++) sum += dataArray[i];
|
const logicalHeight = canvas.height / window.devicePixelRatio;
|
||||||
const average = sum / bufferLength;
|
const barWidth = (logicalWidth / barCount) * 0.8;
|
||||||
|
let x = logicalWidth / 2;
|
||||||
|
let xLeft = logicalWidth / 2;
|
||||||
|
|
||||||
// Detectar bajos para el efecto de sacudida (shake) y flash
|
let sum = 0;
|
||||||
const bassRange = 4;
|
for(let i=0; i<bufferLength; i++) sum += dataArray[i];
|
||||||
let bassSum = 0;
|
const average = sum / bufferLength;
|
||||||
for(let i=0; i<bassRange; i++) bassSum += dataArray[i];
|
|
||||||
const bassAverage = bassSum / bassRange;
|
|
||||||
|
|
||||||
if (bassAverage > 210) {
|
const bassRange = 4;
|
||||||
const intensity = (bassAverage - 210) / 45;
|
let bassSum = 0;
|
||||||
const shakeX = (Math.random() - 0.5) * 12 * intensity;
|
for(let i=0; i<bassRange; i++) bassSum += dataArray[i];
|
||||||
const shakeY = (Math.random() - 0.5) * 12 * intensity;
|
const bassAverage = bassSum / bassRange;
|
||||||
document.documentElement.style.setProperty('--shake-offset-x', `${shakeX}px`);
|
|
||||||
document.documentElement.style.setProperty('--shake-offset-y', `${shakeY}px`);
|
if (bassAverage > 210) {
|
||||||
document.documentElement.style.setProperty('--bass-flash-opacity', (intensity * 0.25).toString());
|
const intensity = (bassAverage - 210) / 45;
|
||||||
} else {
|
const shakeX = (Math.random() - 0.5) * 12 * intensity;
|
||||||
document.documentElement.style.setProperty('--shake-offset-x', '0px');
|
const shakeY = (Math.random() - 0.5) * 12 * intensity;
|
||||||
document.documentElement.style.setProperty('--shake-offset-y', '0px');
|
document.documentElement.style.setProperty('--shake-offset-x', `${shakeX}px`);
|
||||||
document.documentElement.style.setProperty('--bass-flash-opacity', '0');
|
document.documentElement.style.setProperty('--shake-offset-y', `${shakeY}px`);
|
||||||
|
document.documentElement.style.setProperty('--bass-flash-opacity', (intensity * 0.25).toString());
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.setProperty('--shake-offset-x', '0px');
|
||||||
|
document.documentElement.style.setProperty('--shake-offset-y', '0px');
|
||||||
|
document.documentElement.style.setProperty('--bass-flash-opacity', '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
hue = (hue + 0.5 + (average / 50)) % 360;
|
||||||
|
const glowOpacity = 0.4 + (average / 255) * 0.5;
|
||||||
|
const currentGlow = `hsla(${hue}, 80%, 60%, ${glowOpacity})`;
|
||||||
|
const currentGlowDim = `hsla(${hue}, 80%, 60%, ${glowOpacity * 0.5})`;
|
||||||
|
|
||||||
|
document.documentElement.style.setProperty('--dynamic-glow', currentGlow);
|
||||||
|
document.documentElement.style.setProperty('--dynamic-glow-dim', currentGlowDim);
|
||||||
|
|
||||||
|
for (let i = 0; i < barCount; i++) {
|
||||||
|
const barHeight = (dataArray[i] / 255) * logicalHeight;
|
||||||
|
const barHue = (hue + (i * 3)) % 360;
|
||||||
|
const saturation = 80 + (average / 255) * 20;
|
||||||
|
const lightness = 50 + (dataArray[i] / 255) * 25;
|
||||||
|
|
||||||
|
const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight);
|
||||||
|
gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.2)`);
|
||||||
|
gradient.addColorStop(0.5, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.8)`);
|
||||||
|
gradient.addColorStop(1, `hsla(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%, 1)`);
|
||||||
|
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, 2);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, 2);
|
||||||
|
ctx.fill();
|
||||||
|
x += barWidth + 2;
|
||||||
|
xLeft -= barWidth + 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rotar el color base según el tiempo y la intensidad
|
|
||||||
hue = (hue + 0.5 + (average / 50)) % 360;
|
|
||||||
|
|
||||||
// Actualizar el resplandor de la imagen con el color actual y reactividad
|
|
||||||
const glowOpacity = 0.4 + (average / 255) * 0.5;
|
|
||||||
const currentGlow = `hsla(${hue}, 80%, 60%, ${glowOpacity})`;
|
|
||||||
const currentGlowDim = `hsla(${hue}, 80%, 60%, ${glowOpacity * 0.5})`;
|
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--dynamic-glow', currentGlow);
|
|
||||||
document.documentElement.style.setProperty('--dynamic-glow-dim', currentGlowDim);
|
|
||||||
|
|
||||||
for (let i = 0; i < bufferLength; i++) {
|
|
||||||
barHeight = (dataArray[i] / 255) * canvas.height;
|
|
||||||
|
|
||||||
// Color dinámico basado en hue, índice de barra e intensidad
|
|
||||||
const barHue = (hue + (i * 2)) % 360;
|
|
||||||
const saturation = 80 + (average / 255) * 20;
|
|
||||||
const lightness = 50 + (dataArray[i] / 255) * 25;
|
|
||||||
|
|
||||||
const gradient = ctx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight);
|
|
||||||
gradient.addColorStop(0, `hsl(${barHue}, ${saturation}%, ${lightness}%)`);
|
|
||||||
gradient.addColorStop(1, `hsl(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 10}%)`);
|
|
||||||
|
|
||||||
ctx.fillStyle = gradient;
|
|
||||||
ctx.shadowBlur = 15;
|
|
||||||
ctx.shadowColor = `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.5)`;
|
|
||||||
|
|
||||||
// Rounded bars
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.roundRect(x, canvas.height - barHeight, barWidth - 3, barHeight, 4);
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
x += barWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
draw();
|
draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user