Romance con la Máquina
Sincronía de Silicio y Latido
CONEXIÓN: ESTABLE
", "css": "body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#050505;font-family:'Courier New',Courier,monospace;color:#00ffcc;user-select:none}#app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#canvas-container{position:relative;width:100vw;height:100vh}#glCanvas{width:100%;height:100%;display:block}#ui-overlay{position:absolute;top:40px;left:40px;pointer-events:none;z-index:10}#ui-overlay .title{font-size:24px;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;text-shadow:0 0 10px #00ffcc}#ui-overlay .subtitle{font-size:12px;letter-spacing:2px;opacity:0.7;margin-bottom:20px}#ui-overlay .status{font-size:10px;letter-spacing:1px;color:#00ffcc;opacity:0.8;border-left:2px solid #00ffcc;padding-left:10px}", "js": "const canvas = document.getElementById('glCanvas');const gl = canvas.getContext('webgl');if(!gl){alert('WebGL not supported');}function resize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize',resize);resize();const vsSource = `attribute vec4 aPosition;void main(){gl_Position=aPosition;}`;const fsSource = `precision highp float;uniform float uTime;uniform vec2 uResolution;void main(){vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);float d = length(uv);float pulse = sin(uTime * 2.0) * 0.5 + 0.5;float ring = smoothstep(0.4, 0.39, d) - smoothstep(0.3, 0.29, d);float grid = sin(uv.x * 50.0 + uTime) * sin(uv.y * 50.0 + uTime);float circle = smoothstep(0.5, 0.48, length(uv));vec3 color = vec3(0.0, 0.8, 0.7) * ring * pulse;color += vec3(0.0, 0.2, 0.3) * grid * 0.2;color += vec3(0.8, 0.1, 0.4) * smoothstep(0.1, 0.0, length(uv)) * (sin(uTime * 5.0) * 0.5 + 0.5);gl_FragColor = vec4(color, 1.0);}`;function createShader(gl,type,source){const shader = gl.createShader(type);gl.shaderSource(shader,source);gl.compileShader(shader);return shader;}const program = gl.createProgram();gl.attachShader(program,createShader(gl,gl.VERTEX_SHADER,vsSource));gl.attachShader(program,createShader(gl,gl.FRAGMENT_SHADER,fsSource));gl.linkProgram(program);gl.useProgram(program);const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);const positionLocation = gl.getAttribLocation(program,'aPosition');gl.enableVertexAttribArray(positionLocation);gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);const timeLocation = gl.getUniformLocation(program,'uTime');const resLocation = gl.getUniformLocation(program,'uResolution');function render(time){time *= 0.001;gl.uniform1f(timeLocation,time);gl.uniform2f(resLocation,canvas.width,canvas.height);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);requestAnimationFrame(render);}requestAnimationFrame(render);setInterval(()=>