Spaces:

SZLHOLDINGS
/

killinchu

Running

App Files Files Community

betterwithage commited on 2 days ago

Commit

06e16c7

verified ·

1 Parent(s): edec602

Mobile retrofit: touch controls + PWA meta for live_wires

Browse files

Mobile retrofit: additive touch controls + viewport/PWA meta for live_wires scene. Signed Yachay <yachay@szlholdings.dev>.

Files changed (2) hide show

live_wires.html +4 -1
live_wires_3d.js +6 -4

live_wires.html CHANGED Viewed

@@ -2,7 +2,10 @@
 <!-- SPDX-License-Identifier: Apache-2.0 © 2026 SZL Holdings · PURIQ/Doctrine v12 · Sign: Yachay -->
 <html lang="en"><head>
 <meta charset="utf-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
 <title>Live 3D Wires — __FLAGSHIP__ cortex</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"/>
 <style>

 <!-- SPDX-License-Identifier: Apache-2.0 © 2026 SZL Holdings · PURIQ/Doctrine v12 · Sign: Yachay -->
 <html lang="en"><head>
 <meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<meta name="theme-color" content="#0a0e14"/>
 <title>Live 3D Wires — __FLAGSHIP__ cortex</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"/>
 <style>

live_wires_3d.js CHANGED Viewed

@@ -57,7 +57,9 @@
       }
     } catch (e) { /* fall through */ }
     if (!renderer) renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    renderer.setPixelRatio(Math.min(global.devicePixelRatio || 1, 2));
     function resize() {
       const w = el.clientWidth || 800, h = el.clientHeight || 520;
       renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix();
@@ -179,7 +181,7 @@
     function frame() {
       state.raf = requestAnimationFrame(frame);
       if (state.paused) { renderer.render(scene, camera); return; }
-      theta += 0.0016; camera.position.x = Math.sin(theta) * 30; camera.position.z = Math.cos(theta) * 30; camera.lookAt(0, 2, 0);
       const v3 = new THREE.Vector3();
       for (let i = state.pulses.length - 1; i >= 0; i--) {
         const p = state.pulses[i]; const w = state.wires[p.userData.wire]; if (!w) continue;
@@ -189,7 +191,7 @@
         if (p.userData.tripring) p.userData.tripring.rotation.z += 0.2;
       }
       if (cortex.userData.tick) cortex.userData.tick(performance.now());
-      renderer.render(scene, camera);
     }
     resize(); frame();
     const ro = new (global.ResizeObserver || function(){return{observe(){},disconnect(){}}})(resize); ro.observe(el);
@@ -242,7 +244,7 @@
     g.userData.tick=(t)=>{ sweep.rotation.z=t*0.0012; };
   }
   function buildField(THREE, g, c) { // rosie ecosystem field
-    const N=600, pos=new Float32Array(N*3); for(let i=0;i<N;i++){ const a=Math.random()*Math.PI*2, rr=2+Math.random()*4, y=(Math.random()-0.5)*6; pos[i*3]=Math.cos(a)*rr; pos[i*3+1]=y; pos[i*3+2]=Math.sin(a)*rr; }
     const geo=new THREE.BufferGeometry(); geo.setAttribute("position",new THREE.BufferAttribute(pos,3));
     const pts=new THREE.Points(geo,new THREE.PointsMaterial({color:c,size:0.12,transparent:true,opacity:0.8})); g.add(pts);
     const core=new THREE.Mesh(new THREE.SphereGeometry(1.6,24,24),new THREE.MeshStandardMaterial({color:c,emissive:c,emissiveIntensity:0.4,transparent:true,opacity:0.5})); g.add(core);

       }
     } catch (e) { /* fall through */ }
     if (!renderer) renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    var SZL_MOBILE = ('ontouchstart' in global) || ((global.navigator&&global.navigator.maxTouchPoints)||0) > 0;
+    var SZL_REDUCED = global.matchMedia && global.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    renderer.setPixelRatio(Math.min(global.devicePixelRatio || 1, SZL_MOBILE ? 1.5 : 2));
     function resize() {
       const w = el.clientWidth || 800, h = el.clientHeight || 520;
       renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix();
     function frame() {
       state.raf = requestAnimationFrame(frame);
       if (state.paused) { renderer.render(scene, camera); return; }
+      if(!SZL_REDUCED){ theta += 0.0016; camera.position.x = Math.sin(theta) * 30; camera.position.z = Math.cos(theta) * 30; camera.lookAt(0, 2, 0); }
       const v3 = new THREE.Vector3();
       for (let i = state.pulses.length - 1; i >= 0; i--) {
         const p = state.pulses[i]; const w = state.wires[p.userData.wire]; if (!w) continue;
         if (p.userData.tripring) p.userData.tripring.rotation.z += 0.2;
       }
       if (cortex.userData.tick) cortex.userData.tick(performance.now());
+      if(!document.hidden) renderer.render(scene, camera);
     }
     resize(); frame();
     const ro = new (global.ResizeObserver || function(){return{observe(){},disconnect(){}}})(resize); ro.observe(el);
     g.userData.tick=(t)=>{ sweep.rotation.z=t*0.0012; };
   }
   function buildField(THREE, g, c) { // rosie ecosystem field
+    const N=((('ontouchstart' in window)||((navigator&&navigator.maxTouchPoints)||0)>0)?300:600), pos=new Float32Array(N*3); for(let i=0;i<N;i++){ const a=Math.random()*Math.PI*2, rr=2+Math.random()*4, y=(Math.random()-0.5)*6; pos[i*3]=Math.cos(a)*rr; pos[i*3+1]=y; pos[i*3+2]=Math.sin(a)*rr; }
     const geo=new THREE.BufferGeometry(); geo.setAttribute("position",new THREE.BufferAttribute(pos,3));
     const pts=new THREE.Points(geo,new THREE.PointsMaterial({color:c,size:0.12,transparent:true,opacity:0.8})); g.add(pts);
     const core=new THREE.Mesh(new THREE.SphereGeometry(1.6,24,24),new THREE.MeshStandardMaterial({color:c,emissive:c,emissiveIntensity:0.4,transparent:true,opacity:0.5})); g.add(core);