\n
", "css": ".body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: 'Courier New', Courier, monospace; color: #0ff; }\n#app { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; }\n#canvas-container { position: relative; width: 100vw; height: 100vh; }\n#main-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }\n#ui { position: absolute; top: 30px; left: 30px; z-index: 10; pointer-events: none; }\n#ui h1 { font-size: 2rem; font-weight: 300; text-transform: uppercase; letter-spacing: 3px; margin: 0; color: #0ff; text-shadow: 0 0 10px #0ff; }\n#ui p { font-size: 1rem; font-weight: 300; opacity: 0.7; margin: 5px 0 20px 0; }\n.controls { pointer-events: auto; }\nbutton { background: transparent; border: 1px solid #0ff; color: #0ff; padding: 10px 20px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; font-family: inherit; }\nbutton:hover { background: #0ff; color: #000; box-shadow: 0 0 20px #0ff; }\n\n@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }\n.floating { animation: float 4s ease-in-out infinite; }", "js": "const canvas = document.getElementById('main-canvas');\nconst ctx = canvas.getContext('2d');\nconst btn = document.getElementById('mode-switch');\n\nlet width, height, particles = [];\nlet mode = 0;\nlet frame = 0;\n\nfunction init() { \n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n particles = [];\n for (let i = 0; i < 150; i++) {\n particles.push(new Particle());\n }\n}\n\nclass Particle {\n constructor() {\n this.reset();\n }\n reset() {\n this.x = Math.random() * width;\n this.y = Math.random() * height;\n this.vx = (Math.random() - 0.5) * 2;\n this.vy = (Math.random() - 0.5) * 2;\n this.size = Math.random() * 2 + 1;\n this.color = '#0ff';\n }\n update() {\n this.x += this.vx;\n this.y += this.vy;\n if (this.x < 0 || this.x > width) this.vx *= -1;\n if (this.y < 0 || this.y > height) this.vy *= -1;\n \n // Distancia al centro\n const dx = this.x - width/2;\n const dy = this.y - height/2;\n const dist = Math.sqrt(dx*dx + dy*dy);\n \n if (mode === 1) {\n // Idealismo: Atracción al centro\n const angle = Math.atan2(dy, dx);\n this.vx -= Math.cos(angle) * 0.01;\n this.vy -= Math.sin(angle) * 0.01;\n }\n }\n draw() {\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n}\n\nfunction animate() { \n frame++;\n ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';\n ctx.fillRect(0, 0, width, height);\n \n particles.forEach(p => {\n p.update();\n p.draw();\n \n // Conectar partículas si están cerca\n particles.forEach(p2 => {\n const d = Math.hypot(p.x - p2.x, p.y - p2.y);\n if (d < 100) {\n ctx.strokeStyle = `rgba(0, 255, 255, ${1 - d/100})`;\n ctx.lineWidth = 0.5;\n ctx.beginPath();n ctx.moveTo(p.x, p.y);\n ctx.lineTo(p2.x, p2.y);\n ctx.stroke();\n }\n });\n });\n \n requestAnimationFrame(animate);\n}\n\nbtn.onclick = () =>
\n \n
\n\n
\n Idealismo Computacional
\nLa forma owns the essence. The same logic is the same god.
\n\n \n
\n