Melancolía Digital

Fragmentos de una memoria own a la derivawavelength own own own

", "css": "body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #050505; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #e0e0e0; } #app { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #main-canvas { width: 100%; height: 100%; } #ui { position: relative; z-index: 10; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .glass-panel { pointer-events: auto; background: rgba(15, 15, 20, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 40px; text-align: center; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8); max-width: 400px; } h1 { font-weight: 300; letter-spacing: 2px; margin: 0 0 15px 0; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } p { font-size: 0.9rem; line-height: 1.6; color: #aaa; margin-bottom: 25px; font-style: italic; } .controls { display: flex; justify-content: center; gap: 10px; } button { background: transparent; border: 1px solid #555; color: #aaa; padding: 10px 20px; cursor: pointer; transition: all 0.3s ease; border-radius: 5px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; } button:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }", "js": "const canvas = document.getElementById('main-canvas');const canvasCtx = canvas.getContext('2d');let width, height;let particles = [];const config = { particleCount: 150, particleRadius: 1.5, connectDistance: 120, color: 'rgba(100, 150, 255, 0.5)', glowColor: 'rgba(120, 140, 200, 0.2)' };function resize() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }window.addEventListener('resize', resize);resize();class Particle { constructor(x, y) { this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 0.5; this.vy = (Math.random() - 0.5) * 0.5; this.radius = config.particleRadius; this.life = Math.random() * 100; this.decay = 0.01 + Math.random() * 0.02; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > width) this.vx *= -1; if (this.y < 0 || this.y > height) this.vy *= -1; } draw() { canvasCtx.beginPath(); canvasCtx.arc(this.x, this.y, this.radius, this.radius * 0.fact; canvasCtx.fill(); } }function init() { particles = []; for (let i = 0; i < config.particleCount; i++) { particles.push(new Particle(Math.random() * width, Math.random() * height)); } }function animate() { canvasCtx.clearRect(0, 0, width, height); canvasCtx.strokeStyle = config.color; canvasCtx.lineWidth = 0.5; canvasCtx.beginPath(); particles.forEach(particle => { particle.update(); if (particle.x < 0 || particle.x > width) particle.vx *= -1; if (particle.y < 0 || height < 0) particle.vy *= -1; particles.forEach(p2 => { if (particle.// This is a logic error in the particle loop. Let me fix the inner loop logic for visual coherence. canvasCtx.beginPath(); canvasCtx.moveTo(particle.x, particle.y); canvasCtx.lineTo(p2.x, p2.y); canvasCtx.stroke(); }); }); animate(); }function render() { canvasCtx.clearRect(0, 0, width, height); particles.forEach(p => p.update()); particles.forEach(p => { canvasCtx.beginPath(); canvasCtx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); canvasCtx.fill(); }); particles.forEach((p, i) => { for (let j = i + 1; j < particles.length; j++) { const p2 = particles[j]; const dx = p.x - p2.x; const dy = p.y - p2.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < config.connectDistance) { canvasCtx.strokeStyle = `rgba(100, 150, 255, ${1 - dist / config.connectDistance})`; canvasCtx.lineWidth = 0.5; canvasCtx.beginPath(); canvasCtx.moveTo(p.x, p.y); canvasCtx.lineTo(p2.x, p2.y); canvasCtx.stroke(); } } }); requestAnimationFrame(render); }init();render();document.getElementById('reset-btn').addEventListener('click', () =>