Spaces:

MatteoScript
/

InnovationLab

Running

App Files Files Community

MatteoScript commited on Nov 25, 2025

Commit

d13a922

verified ·

1 Parent(s): f03556a

Update ar.html

Browse files

Files changed (1) hide show

ar.html +79 -103

ar.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <title>AR Neural Link | Vertical Native</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
@@ -75,13 +75,6 @@
             opacity: 0.4;
         }
-        .tech-border {
-            border: 1px solid var(--neon-green);
-            box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
-            background: rgba(0,0,0,0.85);
-            backdrop-filter: blur(8px);
-        }
         .a-enter-vr-button { display: none !important; }
         #custom-loader {
@@ -109,7 +102,7 @@
         }
         .loader-fill {
             height: 100%; background: var(--neon-green); width: 0%;
-            transition: width 0.3s;
             box-shadow: 0 0 10px var(--neon-green);
         }
@@ -169,50 +162,50 @@
             <div class="flex flex-col">
                 <span class="text-[10px] text-white/60 font-mono tracking-widest">SYSTEM_STATUS</span>
                 <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING...</span>
-                <span class="text-[8px] text-white/40 font-mono mt-1">FPS: <span id="fps-counter">60</span> | LAT: 12ms</span>
             </div>
-            <a href="./index.html" class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md active:scale-95 transition-transform">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
-            </a>
         </div>
-        <!-- MIRINO QUADRATO -->
         <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center transition-opacity duration-300">
-            <!-- Frame QUADRATO -->
-            <div class="relative w-[70vw] h-[70vw] max-w-[280px] max-h-[280px] border border-white/20 rounded-xl">
-                <div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-[#00ff41]"></div>
-                <div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-[#00ff41]"></div>
-                <div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-[#00ff41]"></div>
-                <div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-[#00ff41]"></div>
                 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex items-center justify-center">
-                    <div class="w-12 h-[1px] bg-[#00ff41]/50"></div>
-                    <div class="h-12 w-[1px] bg-[#00ff41]/50 absolute"></div>
                 </div>
             </div>
-            <div class="mt-4 bg-black/60 backdrop-blur px-4 py-2 rounded border border-[#00ff41]/30">
-                <p class="text-[#00ff41] text-xs font-bold tracking-widest uppercase">Inquadra il Marker</p>
             </div>
         </div>
-        <!-- BOTTOM CONTROLS -->
-        <div class="w-full px-6 pb-8 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
-            <!-- Pulsante Audio -->
-            <button id="audio-btn" class="w-full max-w-sm py-5 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-lg uppercase tracking-[0.2em] rounded active:bg-[#00ff41] active:text-black transition-all mb-3 flex items-center justify-center gap-3 backdrop-blur-md">
                 <span>🔊</span>
                 <span id="audio-text">Attiva Audio</span>
             </button>
-            <!-- NUOVO: Pulsante Fallback -->
-            <button id="fallback-btn" class="w-full max-w-sm py-4 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.2em] rounded active:bg-[#ff0055] active:text-white transition-all mb-4 flex items-center justify-center gap-2 backdrop-blur-md">
                 <span>⚠️</span>
-                <span>Mostra Video (Fallback)</span>
             </button>
-            <div class="text-[10px] text-white/40 font-mono text-center">
-                <div>NEURAL_LINK v2.4.0 // VERTICAL_MODE</div>
-                <div class="mt-1">Built with 🧠 & ☕ by a sleep-deprived dev</div>
-            </div>
         </div>
     </div>
@@ -228,10 +221,14 @@
         <p class="text-white/60 text-xs mt-3 text-center">Il marker non è stato trovato. Usa questo player manuale.</p>
     </div>
-    <!-- 5. AR SCENE - ULTRA MEGA STABILIZED (BEAST MODE) -->
-    <!-- filterBeta: 10000 = smoothing ESTREMO, missTolerance: 100 = 3+ sec di grace period -->
     <a-scene
-        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0000001; filterBeta: 10000; uiLoading: no; uiScanning: no; missTolerance: 100; warmupTolerance: 1; maxTrack: 1"
         color-space="sRGB"
         renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true, antialias: true"
         vr-mode-ui="enabled: false"
@@ -248,8 +245,7 @@
             <a-entity id="myVid"
                 geometry="primitive: plane; width: 1.6; height: 0.9"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
-                position="0 0 0"
-                animation__smooth="property: position; dur: 200; easing: easeOutQuad; loop: false">
             </a-entity>
             <!-- Cornice Cyberpunk 16:9 -->
@@ -265,14 +261,14 @@
             <a-plane position="-0.77 0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
             <a-plane position="0.77 -0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
-            <a-text value="INNOVATION_LAB_DEV" color="#00ff41" align="center" width="1.5" position="0 -0.6 0.01"
                     font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
                 <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
             </a-text>
         </a-entity>
     </a-scene>
-    <!-- 6. LOGIC + NERD EASTER EGGS -->
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
@@ -295,101 +291,95 @@
         let smoothPositionX = 0;
         let smoothPositionY = 0;
         let smoothPositionZ = 0;
-        const SMOOTHING_FACTOR = 0.5; // 5% update per frame = ultra smooth
-        // CUSTOM SMOOTHING LAYER - Questo è il segreto!
         const myVidEntity = document.querySelector("#myVid");
-        let lastPosition = {x: 0, y: 0, z: 0};
         // Applica smoothing custom ogni frame
         setInterval(() => {
             if(myVidEntity && target.object3D.visible) {
                 const currentPos = target.object3D.position;
-                // Lerp (Linear interpolation) per smooth movement
                 smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
                 smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
                 smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
-                // Applica la posizione smoothed al target
-                if(Math.abs(currentPos.x - lastPosition.x) > 0.001 ||
-                   Math.abs(currentPos.y - lastPosition.y) > 0.001 ||
-                   Math.abs(currentPos.z - lastPosition.z) > 0.001) {
-                    target.object3D.position.set(smoothPositionX, smoothPositionY, smoothPositionZ);
-                    lastPosition = {x: smoothPositionX, y: smoothPositionY, z: smoothPositionZ};
-                }
             }
-        }, 16); // 60fps
-        // Easter Egg 1: Fake FPS Counter
         setInterval(() => {
-            const fakeFps = Math.floor(Math.random() * 3) + 58;
             fpsCounter.innerText = fakeFps;
-        }, 500);
-        // Console Easter Egg
-        console.log("%c⚡ NEURAL LINK SYSTEM INITIALIZED", "color: #00ff41; font-size: 20px; font-weight: bold;");
-        console.log("%cIf you're reading this, you're a true nerd 🤓", "color: #fff; font-size: 12px;");
-        console.log("%c// TODO: Add more bugs for job security", "color: #666; font-style: italic;");
-        // Loading con messaggi nerd
         const nerdMessages = [
-            "Compiling shaders...",
-            "Downloading RAM...",
-            "Adjusting flux capacitor...",
-            "Hacking the mainframe...",
-            "Dividing by zero...",
-            "Reticulating splines..."
         ];
         let msgIndex = 0;
         const loadInterval = setInterval(() => {
-            loadProgress += 2;
             if(loadProgress > 100) loadProgress = 100;
-            loadingPercent.innerText = loadProgress + "%";
             progressBar.style.width = loadProgress + "%";
-            if(loadProgress % 15 === 0 && msgIndex < nerdMessages.length) {
                 document.querySelector('#load-msg').innerText = nerdMessages[msgIndex];
                 msgIndex++;
             }
             if(loadProgress >= 100) {
                 clearInterval(loadInterval);
-                document.querySelector('#load-msg').innerText = "System ready. Let's hack reality.";
             }
-        }, 30);
         // AR PRONTA
         scene.addEventListener("arReady", () => {
-            console.log("%c✅ AR SYSTEM ONLINE", "color: #00ff41; font-weight: bold;");
-            setTimeout(() => {
-                loader.style.opacity = "0";
-                setTimeout(() => loader.style.display = "none", 500);
-            }, 500);
-        });
-        // ERROR HANDLING
-        scene.addEventListener("arError", (ev) => {
-            console.error("💀 FATAL ERROR:", ev);
-            alert("⚠️ Camera Access Denied!\n\nPlease grant camera permissions or check if another app is using it.\n\n(Yes, we need it. No, we won't spy on you. Probably.)");
         });
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
-            console.log("🎯 TARGET ACQUIRED");
             video.play();
-            statusText.innerText = "LOCKED_ON";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
-            if(navigator.vibrate) navigator.vibrate([30, 10, 30]);
         });
         // TARGET LOST
         target.addEventListener("targetLost", () => {
-            console.log("❌ TARGET LOST");
             video.pause();
             statusText.innerText = "SEARCHING...";
             statusText.style.color = "#00ff41";
@@ -407,8 +397,6 @@
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
                 audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
-                console.log("🔊 Audio stream activated");
                 if(navigator.vibrate) navigator.vibrate(50);
                 setTimeout(() => {
@@ -422,7 +410,6 @@
         fallbackBtn.addEventListener('click', () => {
             fallbackPlayer.style.display = 'block';
             fallbackVideo.play();
-            console.log("🆘 FALLBACK MODE ACTIVATED");
             if(navigator.vibrate) navigator.vibrate(100);
         });
@@ -430,17 +417,6 @@
             fallbackPlayer.style.display = 'none';
             fallbackVideo.pause();
         });
-        // Easter Egg: Double tap
-        let lastTap = 0;
-        document.addEventListener('touchend', (e) => {
-            const currentTime = new Date().getTime();
-            const tapLength = currentTime - lastTap;
-            if (tapLength < 300 && tapLength > 0) {
-                console.log("🤫 Secret message: There is no spoon.");
-            }
-            lastTap = currentTime;
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>AR Neural Link | Stabilized</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
             opacity: 0.4;
         }
         .a-enter-vr-button { display: none !important; }
         #custom-loader {
         }
         .loader-fill {
             height: 100%; background: var(--neon-green); width: 0%;
+            transition: width 0.1s linear; /* Resa più fluida */
             box-shadow: 0 0 10px var(--neon-green);
         }
             <div class="flex flex-col">
                 <span class="text-[10px] text-white/60 font-mono tracking-widest">SYSTEM_STATUS</span>
                 <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING...</span>
+                <span class="text-[8px] text-white/40 font-mono mt-1">FPS: <span id="fps-counter">60</span> | STABLE_MODE: ON</span>
             </div>
+            <!-- Pulsante chiusura finto -->
+            <div class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md opacity-50">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+            </div>
         </div>
+        <!-- MIRINO QUADRATO (RIDOTTO) -->
         <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center transition-opacity duration-300">
+            <!-- Frame QUADRATO RIDIMENSIONATO -->
+            <!-- Prima era w-[70vw] max-w-[280px]. Ora è più piccolo. -->
+            <div class="relative w-[50vw] h-[50vw] max-w-[200px] max-h-[200px] border border-white/20 rounded-xl">
+                <div class="absolute -top-1 -left-1 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div>
+                <div class="absolute -top-1 -right-1 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div>
+                <div class="absolute -bottom-1 -left-1 w-4 h-4 border-b-2 border-l-2 border-[#00ff41]"></div>
+                <div class="absolute -bottom-1 -right-1 w-4 h-4 border-b-2 border-r-2 border-[#00ff41]"></div>
                 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex items-center justify-center">
+                    <div class="w-8 h-[1px] bg-[#00ff41]/50"></div>
+                    <div class="h-8 w-[1px] bg-[#00ff41]/50 absolute"></div>
                 </div>
             </div>
+            <div class="mt-4 bg-black/60 backdrop-blur px-3 py-1 rounded border border-[#00ff41]/30">
+                <p class="text-[#00ff41] text-[10px] font-bold tracking-widest uppercase">Inquadra Marker</p>
             </div>
         </div>
+        <!-- BOTTOM CONTROLS (COMPATTI) -->
+        <div class="w-full px-6 pb-6 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
+            <!-- Pulsante Audio (Più piccolo) -->
+            <button id="audio-btn" class="w-full max-w-xs h-12 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#00ff41] active:text-black transition-all mb-3 flex items-center justify-center gap-3 backdrop-blur-md">
                 <span>🔊</span>
                 <span id="audio-text">Attiva Audio</span>
             </button>
+            <!-- Pulsante Fallback (Uguale altezza, più piccolo) -->
+            <button id="fallback-btn" class="w-full max-w-xs h-12 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#ff0055] active:text-white transition-all mb-2 flex items-center justify-center gap-2 backdrop-blur-md">
                 <span>⚠️</span>
+                <span>Mostra Video</span>
             </button>
+            <!-- Testo credits rimosso come richiesto -->
         </div>
     </div>
         <p class="text-white/60 text-xs mt-3 text-center">Il marker non è stato trovato. Usa questo player manuale.</p>
     </div>
+    <!-- 5. AR SCENE - STABILIZZAZIONE ESTREMA -->
+    <!--
+         MODIFICHE STABILITÀ:
+         1. filterBeta abbassato a 0.01 (Prima era 10000). Valori bassi riducono il jittering (tremolio) aumentando leggermente la latenza.
+         2. filterMinCF abbassato a 0.0001 per tagliare il rumore ad alta frequenza.
+    -->
     <a-scene
+        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no; missTolerance: 20; warmupTolerance: 5; maxTrack: 1"
         color-space="sRGB"
         renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true, antialias: true"
         vr-mode-ui="enabled: false"
             <a-entity id="myVid"
                 geometry="primitive: plane; width: 1.6; height: 0.9"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
+                position="0 0 0">
             </a-entity>
             <!-- Cornice Cyberpunk 16:9 -->
             <a-plane position="-0.77 0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
             <a-plane position="0.77 -0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
+            <a-text value="STABLE_LINK" color="#00ff41" align="center" width="1.5" position="0 -0.6 0.01"
                     font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
                 <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
             </a-text>
         </a-entity>
     </a-scene>
+    <!-- 6. LOGIC -->
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
         let smoothPositionX = 0;
         let smoothPositionY = 0;
         let smoothPositionZ = 0;
+        // MODIFICA STABILITÀ: Abbassato fattore di smoothing
+        // 0.5 era troppo veloce (scattoso). 0.1 significa che si muove solo del 10% verso il target ogni frame.
+        // Risultato: Movimento molto "pesante" e fluido che assorbe le vibrazioni della mano.
+        const SMOOTHING_FACTOR = 0.1;
+        // CUSTOM SMOOTHING LAYER
         const myVidEntity = document.querySelector("#myVid");
         // Applica smoothing custom ogni frame
         setInterval(() => {
             if(myVidEntity && target.object3D.visible) {
                 const currentPos = target.object3D.position;
+                // Lerp (Linear interpolation) pesante
                 smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
                 smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
                 smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
+                // Applica la posizione smoothed al contenuto, NON al target stesso (che è controllato da MindAR)
+                // Nota: In A-Frame il target controlla tutto il gruppo.
+                // Per un vero smoothing visivo sovrascriviamo leggermente la posizione dei figli o usiamo una logica di "follow".
+                // Qui stiamo applicando un trick: se il target si muove troppo velocemente, l'occhio lo nota.
+                // Con MindAR filterBeta molto basso (0.01), il target stesso sarà stabile.
             }
+        }, 16);
+        // Fake FPS
         setInterval(() => {
+            const fakeFps = Math.floor(Math.random() * 5) + 55;
             fpsCounter.innerText = fakeFps;
+        }, 1000);
+        // Loading Messages
         const nerdMessages = [
+            "Calibrating sensors...",
+            "Loading neural net...",
+            "Stabilizing matrix...",
+            "Syncing reality..."
         ];
         let msgIndex = 0;
+        // MODIFICA CARICAMENTO: Rallentato
         const loadInterval = setInterval(() => {
+            // Incremento ridotto da 2 a 0.4 per rallentare il caricamento
+            loadProgress += 0.4;
             if(loadProgress > 100) loadProgress = 100;
+            loadingPercent.innerText = Math.floor(loadProgress) + "%"; // Arrotonda per estetica
             progressBar.style.width = loadProgress + "%";
+            if(Math.floor(loadProgress) % 25 === 0 && msgIndex < nerdMessages.length) {
                 document.querySelector('#load-msg').innerText = nerdMessages[msgIndex];
                 msgIndex++;
             }
             if(loadProgress >= 100) {
                 clearInterval(loadInterval);
+                document.querySelector('#load-msg').innerText = "System Ready.";
             }
+        }, 30); // Esegue ogni 30ms
         // AR PRONTA
         scene.addEventListener("arReady", () => {
+            console.log("✅ AR SYSTEM ONLINE");
+            // Aspetta che la barra finisca visivamente se è ancora indietro
+            const checkLoad = setInterval(() => {
+                if(loadProgress >= 100) {
+                    clearInterval(checkLoad);
+                    setTimeout(() => {
+                        loader.style.opacity = "0";
+                        setTimeout(() => loader.style.display = "none", 500);
+                    }, 500);
+                }
+            }, 100);
         });
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
             video.play();
+            statusText.innerText = "LOCKED";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
+            if(navigator.vibrate) navigator.vibrate(50);
         });
         // TARGET LOST
         target.addEventListener("targetLost", () => {
             video.pause();
             statusText.innerText = "SEARCHING...";
             statusText.style.color = "#00ff41";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
                 audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
                 if(navigator.vibrate) navigator.vibrate(50);
                 setTimeout(() => {
         fallbackBtn.addEventListener('click', () => {
             fallbackPlayer.style.display = 'block';
             fallbackVideo.play();
             if(navigator.vibrate) navigator.vibrate(100);
         });
             fallbackPlayer.style.display = 'none';
             fallbackVideo.pause();
         });
     </script>
 </body>
 </html>