cpu demo

Author: cazala

packages/playground/src/App.tsx

@@ -9,9 +9,9 @@ import { ModulesSidebar } from "./components/ModulesSidebar";
 import { Toolbar } from "./components/ToolBar";
 import { SystemSidebar } from "./components/SystemSidebar";
 import { GlobalHotkeys } from "./components/GlobalHotkeys";
-import { GyroscopeDebugLabel } from "./components/GyroscopeDebugLabel";
 import { Homepage } from "./components/Homepage";
 import { Stats } from "./components/Stats";
+import { CpuGyroDemoController } from "./components/CpuGyroDemoController";
 import { useUI } from "./hooks/useUI";
 import { useRender } from "./hooks/useRender";
 import { useDemo } from "./hooks/useDemo";
@@ -36,7 +36,7 @@ import "./App.css";
 function AppContent() {
   const { barsVisible, restoreBarsFromFullscreenMode, setBarsVisibility } = useUI();
   const { invertColors, setInvertColors } = useRender();
-  const { hasStarted, isPlaying: isDemoPlaying, stop, play: playDemo, gyroData } = useDemo();
+  const { hasStarted, isPlaying: isDemoPlaying, stop, play: playDemo } = useDemo();
   const { spawnParticles, play: playEngine } = useEngine();
   const { clearModuleOscillators } = useOscillators();
   const { setIsResetting } = useReset();
@@ -167,6 +167,7 @@ function AppContent() {
       className={`app ${barsVisible && hasStarted ? "bars-visible" : "bars-hidden"
         }`}
     >
+      <CpuGyroDemoController isHomepage={isHomepage} />
       <TopBar
         isDemoPlaying={isDemoPlaying}
         stopDemo={stop}
@@ -184,7 +185,6 @@ function AppContent() {
               <Canvas className="canvas" isPlaying={isDemoPlaying} />
               <Overlay isPlaying={isDemoPlaying} />
             <Homepage onPlay={handlePlay} isVisible={isHomepage} />
-            <GyroscopeDebugLabel gyroData={gyroData} />
             <Stats isVisible={isHomepage} />
           </div>
         </div>

packages/playground/src/components/CpuGyroDemoController.tsx

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEngine } from "../hooks/useEngine";
+import { useEnvironment } from "../hooks/modules/useEnvironment";
+import { GyroscopePermissionBanner } from "./GyroscopePermissionBanner";
+import { useGyroscope } from "../hooks/useGyroscope";
+import { isMobileDevice } from "../utils/deviceCapabilities";
+
+/**
+ * CPU fallback demo controller:
+ * - Only active on the homepage when WebGPU is not available
+ * - Uses device orientation (gyroscope) to drive gravity direction
+ * - Shows a small top banner to request permission (iOS) only when needed
+ */
+export function CpuGyroDemoController(props: { isHomepage: boolean }) {
+  const { isHomepage } = props;
+  const { isWebGPU, isInitialized, isInitializing, spawnParticles } = useEngine();
+  const { setGravityStrength, setMode, setCustomAngleDegrees } = useEnvironment();
+  const [hasRequestedPermission, setHasRequestedPermission] = useState<boolean> (false);
+
+  const enabled = useMemo(
+    () => isHomepage && isInitialized && !isInitializing && !isWebGPU,
+    [isHomepage, isInitialized, isInitializing, isWebGPU]
+  );
+
+  const gyro = useGyroscope({ enabled });
+
+  // Configure CPU fallback "demo" gravity settings once when enabled.
+  useEffect(() => {
+    if (!enabled) return;
+    setGravityStrength(1000);
+    setMode("custom");
+    setCustomAngleDegrees(90);
+    setTimeout(() => {
+    spawnParticles({
+            numParticles: isMobileDevice() ? 600 : 1000,
+            shape: "circle",
+            spacing: 0,
+            particleSize: 5,
+            radius: 100,
+        })
+    }, 16);
+  }, [enabled, setGravityStrength, setMode, setCustomAngleDegrees,spawnParticles]);
+
+  // Drive gravity direction from gyroscope angle.
+  useEffect(() => {
+    if (!enabled) return;
+    if (!gyro.data) return;
+    setCustomAngleDegrees(gyro.data.angle);
+  }, [enabled, gyro.data, setCustomAngleDegrees]);
+
+  const shouldShowBanner =
+    enabled &&
+    gyro.requiresPermission &&
+    !hasRequestedPermission &&
+    gyro.permissionState !== "granted" &&
+    gyro.permissionState !== "unsupported" &&
+    gyro.permissionState !== "insecure_context" 
+    && gyro.isSecureContext;
+
+
+
+  const onRequestPermission = useCallback(() => {
+    gyro
+      .requestPermission()
+      .catch((err: unknown) => {
+        const msg =
+          err instanceof Error ? err.message : "Failed to request permission.";
+        alert(msg);
+      }).then(() => {
+        setHasRequestedPermission(true);
+      });
+  }, [gyro]);
+
+  return (
+    <GyroscopePermissionBanner
+      isVisible={shouldShowBanner}
+      onRequestPermission={onRequestPermission}
+      message="Enable Gyroscope"
+    />
+
+  );
+}
+
+

packages/playground/src/components/GyroscopeDebugLabel.css

@@ -0,0 +1,40 @@
+.gyro-banner {
+  position: absolute;
+  top: 0;
+  z-index: 500;
+  width: 100%;
+  background: rgba(20, 20, 20, 0.92);
+  color: #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(8px);
+}
+
+.gyro-banner__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+}
+
+.gyro-banner__text {
+  font-size: 13px;
+  line-height: 1.2;
+  opacity: 0.95;
+}
+
+.gyro-banner__button {
+  font-size: 12px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  cursor: pointer;
+}
+
+.gyro-banner__button:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+

packages/playground/src/components/GyroscopeDebugLabel.tsx

@@ -0,0 +1,26 @@
+import "./GyroscopePermissionBanner.css";
+
+export function GyroscopePermissionBanner(props: {
+  isVisible: boolean;
+  onRequestPermission: () => void;
+  message?: string;
+}) {
+  const { isVisible, onRequestPermission, message } = props;
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="gyro-banner" role="region" aria-label="Gyroscope permission">
+      <div className="gyro-banner__content">
+        <div className="gyro-banner__text">
+          {message ?? "Enable gyroscope for tilt controls."}
+        </div>
+        <button className="gyro-banner__button" onClick={onRequestPermission}>
+          Enable
+        </button>
+      </div>
+    </div>
+  );
+}
+
+

packages/playground/src/components/GyroscopePermissionBanner.css

@@ -13,7 +13,7 @@ interface HomepageProps {
 export function Homepage({ onPlay, isVisible }: HomepageProps) {
   const [showWarning, setShowWarning] = useState(false);
   const isMobile = isMobileDeviceSync();
-  const { canvasRef, screenToWorld } = useEngine();
+  const { canvasRef, screenToWorld, isWebGPU } = useEngine();
   const { setPosition, setActive, setMode, setStrength, setRadius } = useInteraction();
   const isMouseDownRef = useRef(false);
 
@@ -31,8 +31,13 @@ export function Homepage({ onPlay, isVisible }: HomepageProps) {
 
     // Configure interaction for homepage demo
     setMode("attract");
-    setStrength(50000);
-    setRadius(400);
+    if (isWebGPU) {
+      setStrength(50000);
+      setRadius(400);
+    } else {
+      setStrength(isMobile ? 5000 : 5000);
+      setRadius(isMobile ? 400 : 400);
+    }
 
     const handleMouseDown = (e: MouseEvent) => {
       // Only handle left mouse button
@@ -102,7 +107,7 @@ export function Homepage({ onPlay, isVisible }: HomepageProps) {
       setActive(false);
       isMouseDownRef.current = false;
     };
-  }, [isVisible, showWarning, canvasRef, screenToWorld, setPosition, setActive, setMode, setStrength, setRadius]);
+  }, [isVisible, showWarning, canvasRef, screenToWorld, setPosition, setActive, setMode, setStrength, setRadius, isWebGPU, isMobile]);
 
   if (!isVisible) return null;