p5-phone 1.4.4 → 1.5.0

package/README.md

@@ -1,15 +1,14 @@
 # p5-phone
-![P5Phone.png](P5Phone.png)
+![P5Phone.png](p5-phone.png)
+*Illustration by [Angela Torchio](https://angelatorchio.com/)*
 
-**Simplified mobile hardware access for p5.js** - handle sensors, microphone, touch, and browser gestures with ease.
-
-##  [Link for Interactive Examples](https://digitalfuturesocadu.github.io/P5-Phone-Interactions/examples/homepage)
+##  [Link for Interactive Examples](https://npuckett.github.io/p5-phone/examples/homepage)
 
 # Overview
 P5.js on mobile provides unique opportunities and challenges. The main P5 framework does an excellent job of making it easy to read data from various phone inputs and sensors, however it doesn't deal with the realities of contemporary browser's built in gestures and security protocols.
 That's where this library comes in:
 
-- Simplifies accessing phone hardware from the browser (accelerometers, gyroscopes, microphone)
+- Simplifies accessing phone hardware from the browser (accelerometers, gyroscopes, microphone, vibration motor)
 - Simplifies disabling default phone gestures (Zoom, refresh, back, etc)
 - Simplifies enabling audio output
 - Simplifies using an on-screen console to display errors and debug info
@@ -61,6 +60,7 @@ This library simplifies access to the following p5.js mobile sensor and audio co
   - [Motion Sensor Activation](#motion-sensor-activation)
   - [Microphone Activation](#microphone-activation)
   - [Sound Output Activation](#sound-output-activation)
+  - [Vibration Motor (Android Only)](#vibration-motor-android-only)
   - [Debug System](#debug-system)
 
 ### CDN (Recommended)
@@ -192,10 +192,17 @@ enableMicButton(text)     // Button-based microphone activation
 enableSoundTap(message)   // Tap anywhere to enable sound playback
 enableSoundButton(text)   // Button-based sound activation
 
+// Vibration motor (Android only)
+enableVibrationTap(message)   // Tap anywhere to enable vibration
+enableVibrationButton(text)   // Button-based vibration activation
+vibrate(pattern)              // Trigger vibration (duration or pattern array)
+stopVibration()               // Stop any ongoing vibration
+
 // Status variables (check these in your code)
 window.sensorsEnabled     // Boolean: true when motion sensors are active
 window.micEnabled         // Boolean: true when microphone is active
 window.soundEnabled       // Boolean: true when sound output is active
+window.vibrationEnabled   // Boolean: true when vibration is available (Android only)
 
 // Debug system (enhanced in v1.4.0)
 showDebug()       // Show on-screen debug panel with automatic error catching
@@ -226,6 +233,7 @@ this.enableGyroTap('Tap to start');
 - `window.sensorsEnabled` - Boolean indicating if motion sensors are active
 - `window.micEnabled` - Boolean indicating if microphone is active
 - `window.soundEnabled` - Boolean indicating if sound output is active
+- `window.vibrationEnabled` - Boolean indicating if vibration is available (Android only)
 
 **Usage:**
 ```javascript
@@ -245,6 +253,11 @@ function draw() {
     // Safe to play sounds
     mySound.play();
   }
+  
+  if (window.vibrationEnabled) {
+    // Safe to use vibration (Android only)
+    vibrate(50);
+  }
 }
 
 // You can also use them for conditional UI
@@ -454,6 +467,109 @@ function mousePressed() {
 }
 ```
 
+### Vibration Motor (Android Only)
+
+**Purpose:** Access the device's vibration motor for haptic feedback and tactile interactions.
+
+**⚠️ Platform Support:**
+- ✅ **Android** - Full support in Chrome and most Android browsers
+- ❌ **iOS** - Not supported (Vibration API not available on iOS devices)
+
+**Important:** The vibration feature will automatically detect if the device supports vibration. On iOS or unsupported devices, `window.vibrationEnabled` will be `false` and vibration calls will be safely ignored with console warnings.
+
+**Commands:**
+- `enableVibrationTap(message)` - Tap anywhere on screen to enable vibration
+- `enableVibrationButton(text)` - Creates a button with custom text to enable vibration
+- `vibrate(pattern)` - Trigger vibration with a duration (ms) or pattern array
+- `stopVibration()` - Stop any ongoing vibration
+
+**Usage:**
+```javascript
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  
+  // Enable vibration with tap (Android only)
+  enableVibrationTap('Tap to enable vibration');
+  
+  // Or use a button
+  // enableVibrationButton('Enable Haptics');
+}
+
+function draw() {
+  background(220);
+  
+  if (window.vibrationEnabled) {
+    text('Vibration ready! Tap anywhere', 20, 20);
+  } else {
+    text('Vibration not available', 20, 20);
+  }
+}
+
+function mousePressed() {
+  if (window.vibrationEnabled) {
+    // Simple vibration - 50ms pulse
+    vibrate(50);
+  }
+}
+```
+
+**Vibration Patterns:**
+```javascript
+// Single vibration (duration in milliseconds)
+vibrate(100);  // Vibrate for 100ms
+
+// Pattern: [vibrate, pause, vibrate, pause, ...]
+vibrate([100, 50, 100]);           // Short-short pattern
+vibrate([200, 100, 200, 100, 200]); // Triple pulse
+vibrate([50, 50, 50, 50, 500]);     // Quick taps then long
+
+// Stop any ongoing vibration
+stopVibration();
+```
+
+**Common Use Cases:**
+```javascript
+// Haptic feedback for button presses
+function mousePressed() {
+  if (window.vibrationEnabled) {
+    vibrate(20);  // Quick tap feedback
+  }
+}
+
+// Touch zones with different haptic patterns
+function touchStarted() {
+  if (window.vibrationEnabled) {
+    if (mouseX < width/2) {
+      vibrate(50);  // Left side - short pulse
+    } else {
+      vibrate([50, 30, 50]);  // Right side - double pulse
+    }
+  }
+  return false;
+}
+
+// Collision detection
+function checkCollision() {
+  if (collision && window.vibrationEnabled) {
+    vibrate([100, 50, 100, 50, 200]);  // Alert pattern
+  }
+}
+
+// Game events
+function gameOver() {
+  if (window.vibrationEnabled) {
+    vibrate(500);  // Long vibration for game over
+  }
+}
+```
+
+**Best Practices:**
+- Use short vibrations (20-100ms) for subtle feedback
+- Use patterns for more complex haptic responses
+- Always check `window.vibrationEnabled` before calling `vibrate()`
+- Don't overuse - vibration can quickly drain battery
+- Test on Android devices as iOS doesn't support vibration
+
 ### Debug System
 
 **Purpose:** Essential on-screen debugging system for mobile development where traditional browser dev tools aren't accessible. Provides automatic error catching, timestamped logging, and color-coded messages.

package/dist/p5-phone.js

@@ -1,7 +1,7 @@
 /*!
- * p5-phone v1.4.4
+ * p5-phone v1.5.0
  * Simplified mobile hardware access for p5.js - handle sensors, microphone, touch, and browser gestures with ease
- * https://github.com/DigitalFuturesOCADU/p5-phone
+ * https://github.com/npuckett/p5-phone
  * 
  * Copyright (c) 2025 Nick Puckett
  * Released under the MIT License
@@ -85,6 +85,7 @@ window.sensorsEnabled = false;
 window.micEnabled = false;
 window.soundEnabled = false;
 window.gesturesLocked = false;
+window.vibrationEnabled = false;
 
 // Internal state
 let _permissionsInitialized = false;
@@ -176,6 +177,30 @@ function enableSoundTap(message = 'Tap screen to enable sound') {
   });
 }
 
+/**
+ * Enable vibration motor with a button interface
+ * Creates a start button that user must click
+ * Note: Vibration API is supported on Android, but not iOS
+ */
+function enableVibrationButton(buttonText = 'ENABLE VIBRATION', statusText = 'Enabling vibration...') {
+  _createPermissionButton(buttonText, statusText, async () => {
+    await _requestVibrationPermission();
+    console.log('✅ Vibration enabled via button');
+  });
+}
+
+/**
+ * Enable vibration motor with tap-to-start
+ * User taps anywhere on screen to enable
+ * Note: Vibration API is supported on Android, but not iOS
+ */
+function enableVibrationTap(message = 'Tap screen to enable vibration') {
+  _createTapToEnable(message, async () => {
+    await _requestVibrationPermission();
+    console.log('✅ Vibration enabled via tap');
+  });
+}
+
 /**
  * Enable both motion sensors and microphone with a button interface
  * Creates a start button that user must click to enable both
@@ -200,6 +225,39 @@ function enableAllTap(message = 'Tap screen to enable motion sensors & microphon
   });
 }
 
+/**
+ * Trigger vibration on device
+ * @param {number|number[]} pattern - Duration in ms or pattern array [vibrate, pause, vibrate, ...]
+ * 
+ * Examples:
+ *   vibrate(200);              // Single 200ms vibration
+ *   vibrate([100, 50, 100]);   // Pattern: vibrate 100ms, pause 50ms, vibrate 100ms
+ * 
+ * Note: Only works if vibrationEnabled is true and device supports vibration
+ */
+function vibrate(pattern) {
+  if (!window.vibrationEnabled) {
+    console.warn('⚠️ Vibration not enabled. Call enableVibrationTap() or enableVibrationButton() first.');
+    return false;
+  }
+  
+  if (!navigator.vibrate) {
+    console.warn('⚠️ Vibration API not supported on this device');
+    return false;
+  }
+  
+  return navigator.vibrate(pattern);
+}
+
+/**
+ * Stop any ongoing vibration
+ */
+function stopVibration() {
+  if (navigator.vibrate) {
+    navigator.vibrate(0);
+  }
+}
+
 // =========================================
 // INTERNAL PERMISSION HANDLERS
 // =========================================
@@ -281,6 +339,42 @@ async function _requestSoundOutput() {
   }
 }
 
+async function _requestVibrationPermission() {
+  try {
+    // Check if Vibration API is supported
+    if (!navigator.vibrate) {
+      console.warn('⚠️ Vibration API not supported on this device (likely iOS)');
+      if (_debugVisible) {
+        debugWarn('Vibration API not supported on this device');
+      }
+      window.vibrationEnabled = false;
+      _notifySketchReady();
+      return;
+    }
+    
+    // Test vibration with a short pulse
+    const vibrateSuccess = navigator.vibrate(1);
+    
+    if (vibrateSuccess) {
+      window.vibrationEnabled = true;
+      console.log('✅ Vibration enabled');
+    } else {
+      console.warn('⚠️ Vibration API available but vibration failed');
+      window.vibrationEnabled = false;
+    }
+    
+    _notifySketchReady();
+    
+  } catch (error) {
+    console.error('Vibration permission error:', error);
+    if (_debugVisible) {
+      debugError('Vibration permission error:', error);
+    }
+    window.vibrationEnabled = false;
+    _notifySketchReady();
+  }
+}
+
 function _notifySketchReady() {
   // Call userSetupComplete if it exists
   if (typeof userSetupComplete === 'function') {
@@ -293,6 +387,7 @@ function _notifySketchReady() {
       sensors: window.sensorsEnabled,
       microphone: window.micEnabled,
       sound: window.soundEnabled,
+      vibration: window.vibrationEnabled,
       gestures: window.gesturesLocked
     }
   }));
@@ -835,6 +930,10 @@ window.enableMicTap = enableMicTap;
 window.enableMicButton = enableMicButton;
 window.enableSoundTap = enableSoundTap;
 window.enableSoundButton = enableSoundButton;
+window.enableVibrationTap = enableVibrationTap;
+window.enableVibrationButton = enableVibrationButton;
+window.vibrate = vibrate;
+window.stopVibration = stopVibration;
 window.enableAllTap = enableAllTap;
 window.enableAllButton = enableAllButton;
 
@@ -1047,6 +1146,10 @@ if (typeof p5 !== 'undefined' && p5.prototype) {
   p5.prototype.enableMicButton = enableMicButton;
   p5.prototype.enableSoundTap = enableSoundTap;
   p5.prototype.enableSoundButton = enableSoundButton;
+  p5.prototype.enableVibrationTap = enableVibrationTap;
+  p5.prototype.enableVibrationButton = enableVibrationButton;
+  p5.prototype.vibrate = vibrate;
+  p5.prototype.stopVibration = stopVibration;
   p5.prototype.enableAllTap = enableAllTap;
   p5.prototype.enableAllButton = enableAllButton;
   

package/dist/p5-phone.min.js

@@ -1,10 +1,10 @@
 /*!
- * p5-phone v1.4.4
+ * p5-phone v1.5.0
  * Simplified mobile hardware access for p5.js - handle sensors, microphone, touch, and browser gestures with ease
- * https://github.com/DigitalFuturesOCADU/p5-phone
+ * https://github.com/npuckett/p5-phone
  * 
  * Copyright (c) 2025 Nick Puckett
  * Released under the MIT License
  * https://opensource.org/licenses/MIT
  */
-window._originalConsoleError=console.error,window._originalConsoleWarn=console.warn,window._debugErrorHandlersSet||(window._debugErrorHandlersSet=!0,window._earlyErrors=window._earlyErrors||[],window.addEventListener("error",function(e){const n=`${e.error?.message||e.message||"Unknown error"} (${e.filename?e.filename.split("/").pop():"unknown file"}:${e.lineno||"unknown line"})`;console.error("🚨 Error caught:",n),e.error?.stack&&console.error("Stack:",e.error.stack),window._earlyErrors.push({type:"error",message:"JavaScript Error: "+n,stack:e.error?.stack}),!1===window.SHOW_DEBUG||window._debugVisible||"function"==typeof showDebug&&showDebug(),window._debugVisible&&"function"==typeof debugError&&(debugError("JavaScript Error:",n),e.error?.stack&&debugError("Stack trace:",e.error.stack))}),window.addEventListener("unhandledrejection",function(e){const n=e.reason?.message||e.reason||"Unknown promise rejection";console.error("🚨 Promise rejection caught:",n),window._earlyErrors.push({type:"error",message:"Unhandled Promise Rejection: "+n}),window._debugVisible&&"function"==typeof debugError&&debugError("Unhandled Promise Rejection:",n)})),window.sensorsEnabled=!1,window.micEnabled=!1,window.soundEnabled=!1,window.gesturesLocked=!1;let _permissionsInitialized=!1,_micInstance=null;function lockGestures(){window.gesturesLocked||(console.log("🔒 Locking mobile gestures..."),_initializeGestureBlocking(),_initializeP5TouchOverrides(),window.gesturesLocked=!0,console.log("✅ Mobile gestures locked"))}function enableGyroButton(e="ENABLE MOTION SENSORS",n="Requesting motion sensors..."){_createPermissionButton(e,n,async()=>{await _requestMotionPermissions(),console.log("✅ Gyroscope enabled via button")})}function enableGyroTap(e="Tap screen to enable motion sensors"){_createTapToEnable(e,async()=>{await _requestMotionPermissions(),console.log("✅ Gyroscope enabled via tap")})}function enableMicButton(e="ENABLE MICROPHONE",n="Requesting microphone access..."){_createPermissionButton(e,n,async()=>{await _requestMicrophonePermissions(),console.log("✅ Microphone enabled via button")})}function enableMicTap(e="Tap screen to enable microphone"){_createTapToEnable(e,async()=>{await _requestMicrophonePermissions(),console.log("✅ Microphone enabled via tap")})}function enableSoundButton(e="ENABLE SOUND",n="Enabling audio..."){_createPermissionButton(e,n,async()=>{await _requestSoundOutput(),console.log("✅ Sound output enabled via button")})}function enableSoundTap(e="Tap screen to enable sound"){_createTapToEnable(e,async()=>{await _requestSoundOutput(),console.log("✅ Sound output enabled via tap")})}function enableAllButton(e="ENABLE MOTION & MICROPHONE",n="Requesting permissions..."){_createPermissionButton(e,n,async()=>{await _requestMotionPermissions(),await _requestMicrophonePermissions(),console.log("✅ Motion sensors and microphone enabled via button")})}function enableAllTap(e="Tap screen to enable motion sensors & microphone"){_createTapToEnable(e,async()=>{await _requestMotionPermissions(),await _requestMicrophonePermissions(),console.log("✅ Motion sensors and microphone enabled via tap")})}async function _requestMotionPermissions(){try{if("undefined"!=typeof DeviceOrientationEvent&&"function"==typeof DeviceOrientationEvent.requestPermission){const e=await DeviceOrientationEvent.requestPermission();if(console.log("Orientation permission:",e),"undefined"!=typeof DeviceMotionEvent&&"function"==typeof DeviceMotionEvent.requestPermission){const e=await DeviceMotionEvent.requestPermission();console.log("Motion permission:",e)}}window.sensorsEnabled=!0,_notifySketchReady()}catch(e){console.error("Motion sensor permission error:",e),_debugVisible&&debugError("Motion sensor permission error:",e),window.sensorsEnabled=!0,_notifySketchReady()}}async function _requestMicrophonePermissions(){try{"undefined"!=typeof userStartAudio&&await userStartAudio(),"undefined"!=typeof mic&&mic&&mic.start?(mic.start(),_micInstance=mic,window.micEnabled=!0):console.warn("No microphone object found. Create one with: mic = new p5.AudioIn();"),_notifySketchReady()}catch(e){console.error("Microphone permission error:",e),_debugVisible&&debugError("Microphone permission error:",e),_notifySketchReady()}}async function _requestSoundOutput(){try{"undefined"!=typeof userStartAudio&&await userStartAudio(),window.soundEnabled=!0,_notifySketchReady()}catch(e){console.error("Sound output error:",e),_debugVisible&&debugError("Sound output error:",e),window.soundEnabled=!0,_notifySketchReady()}}function _notifySketchReady(){"function"==typeof userSetupComplete&&userSetupComplete(),window.dispatchEvent(new CustomEvent("permissionsReady",{detail:{sensors:window.sensorsEnabled,microphone:window.micEnabled,sound:window.soundEnabled,gestures:window.gesturesLocked}}))}function _createPermissionButton(e,n,o){_removeExistingUI();const t=document.createElement("button");t.id="permissionButton",t.textContent=e,t.style.cssText="\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    padding: 20px 40px;\n    font-size: 18px;\n    font-weight: bold;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    z-index: 999999;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n    transition: transform 0.2s ease;\n    touch-action: manipulation;\n  ";const i=document.createElement("div");i.id="permissionStatus",i.textContent=n,i.style.cssText="\n    position: fixed;\n    top: 60%;\n    left: 50%;\n    transform: translate(-50%, 0);\n    color: white;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    text-align: center;\n    z-index: 999998;\n    display: none;\n  ",t.addEventListener("mouseenter",()=>{t.style.transform="translate(-50%, -50%) scale(1.05)"}),t.addEventListener("mouseleave",()=>{t.style.transform="translate(-50%, -50%) scale(1)"});const r=async()=>{t.parentNode&&(t.style.display="none",i.style.display="block",await o(),i.style.display="none",_removeExistingUI())};t.addEventListener("click",r),t.addEventListener("touchend",function(e){e.preventDefault(),e.stopPropagation(),r()}),t.addEventListener("pointerup",function(e){e.preventDefault(),e.stopPropagation(),r()}),document.body.appendChild(t),document.body.appendChild(i)}function _createTapToEnable(e,n){_removeExistingUI();const o=document.createElement("div");o.id="tapOverlay",o.style.cssText="\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 999999;\n    cursor: pointer;\n    touch-action: manipulation;\n  ";const t=document.createElement("div");t.textContent=e,t.style.cssText="\n    color: white;\n    font-size: 24px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    text-align: center;\n    padding: 40px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-radius: 12px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n  ",o.appendChild(t);const i=async()=>{o.parentNode&&(t.textContent="Enabling...",await n(),o.parentNode&&document.body.removeChild(o))};o.addEventListener("click",i),o.addEventListener("touchend",function(e){e.preventDefault(),e.stopPropagation(),i()}),o.addEventListener("pointerup",function(e){e.preventDefault(),e.stopPropagation(),i()}),document.body.appendChild(o)}function _removeExistingUI(){const e=document.getElementById("permissionButton"),n=document.getElementById("permissionStatus"),o=document.getElementById("tapOverlay");e&&e.remove(),n&&n.remove(),o&&o.remove()}function _initializeGestureBlocking(){window.history.pushState(null,"",window.location.href),window.onpopstate=function(){window.history.pushState(null,"",window.location.href)},window.addEventListener("beforeunload",function(e){e.preventDefault(),e.returnValue=""}),_initializeEdgeSwipePrevention(),_initializeOtherGesturePrevention()}function _initializeEdgeSwipePrevention(){let e=0,n=0;document.addEventListener("touchstart",function(o){o.touches&&o.touches.length>0&&(e=o.touches[0].clientX,n=o.touches[0].clientY,(e<20||e>window.innerWidth-20)&&o.preventDefault())},{passive:!1,capture:!0}),document.addEventListener("touchmove",function(o){if(!o.touches||0===o.touches.length)return;let t=o.touches[0].clientX,i=o.touches[0].clientY,r=t-e,s=i-n;(e<20&&r>0||e>window.innerWidth-20&&r<0)&&(o.preventDefault(),o.stopPropagation()),0===window.pageYOffset&&s>0&&o.preventDefault(),!o.target||"CANVAS"!==o.target.tagName||document.getElementById("tapOverlay")||document.getElementById("permissionButton")||o.preventDefault()},{passive:!1,capture:!0})}function _initializeOtherGesturePrevention(){document.addEventListener("gesturestart",function(e){e.preventDefault()}),document.addEventListener("gesturechange",function(e){e.preventDefault()}),document.addEventListener("gestureend",function(e){e.preventDefault()});let e=0;document.addEventListener("touchend",function(n){if(n.target&&("tapOverlay"===n.target.id||n.target.closest("#tapOverlay")||"permissionButton"===n.target.id||"permissionStatus"===n.target.id||n.target.closest("#permissionButton")||n.target.closest("#permissionStatus")))return;const o=Date.now();o-e<=300&&n.preventDefault(),e=o},!1),window.oncontextmenu=function(e){return e.preventDefault(),e.stopPropagation(),!1}}function _initializeP5TouchOverrides(){setTimeout(()=>{if(window._setupDone)_overrideP5Touch();else{const e=setInterval(()=>{window._setupDone&&(_overrideP5Touch(),clearInterval(e))},100)}},100)}function _overrideP5Touch(){const e=window.touchStarted||function(){},n=window.touchMoved||function(){},o=window.touchEnded||function(){},t=window.mousePressed||function(){},i=window.mouseDragged||function(){},r=window.mouseReleased||function(){};window.touchStarted=function(n){return e(n),!1},window.touchMoved=function(e){return n(e),!1},window.touchEnded=function(e){return o(e),!1},window.mousePressed=function(e){return t(e),!1},window.mouseDragged=function(e){return i(e),!1},window.mouseReleased=function(e){return r(e),!1}}document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("startButton"),n=document.getElementById("statusText");e&&n&&(console.warn("⚠️  Legacy HTML elements detected. Consider using the new API functions instead."),e.addEventListener("click",async()=>{e.classList.add("hidden"),n.classList.remove("hidden"),n.textContent="Requesting permissions...",await _requestMotionPermissions(),await _requestMicrophonePermissions(),n.classList.add("hidden")}),lockGestures())});let _debugPanel=null,_debugVisible=!1,_debugMessages=[];const MAX_DEBUG_MESSAGES=20;function showDebug(){_createDebugPanel(),_debugPanel.style.display="block",_debugVisible=!0,window._debugVisible=!0,_setupConsoleOverrides(),_displayEarlyErrors()}function hideDebug(){_debugPanel&&(_debugPanel.style.display="none",_debugVisible=!1)}function toggleDebug(){_debugVisible?hideDebug():showDebug()}function debug(...e){console.log(...e);_addDebugMessage(e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" "),"log")}function debugError(...e){(window._originalConsoleError||console.error).apply(console,e);_addDebugMessage(`❌ ERROR: ${e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" ")}`,"error")}function debugWarn(...e){(window._originalConsoleWarn||console.warn).apply(console,e);_addDebugMessage(`⚠️ WARNING: ${e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" ")}`,"warning")}function _addDebugMessage(e,n="log"){const o={text:`[${(new Date).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}] ${e}`,type:n};_debugMessages.push(o),_debugMessages.length>20&&_debugMessages.shift(),_debugPanel&&_updateDebugDisplay()}function _setupConsoleOverrides(){window._consoleOverrideSet||(window._consoleOverrideSet=!0,window._originalConsoleError=console.error,window._originalConsoleWarn=console.warn,console.error=function(...e){window._originalConsoleError.apply(console,e),_debugVisible&&debugError(...e)},console.warn=function(...e){window._originalConsoleWarn.apply(console,e),_debugVisible&&debugWarn(...e)})}function _displayEarlyErrors(){window._earlyErrors&&window._earlyErrors.length>0&&(debugError(`🚨 Found ${window._earlyErrors.length} early error(s):`),window._earlyErrors.forEach(e=>{debugError(e.message),e.stack&&debugError("Stack trace:",e.stack)}),window._earlyErrors=[])}function _createDebugPanel(){if(_debugPanel)return;_debugPanel=document.createElement("div"),_debugPanel.id="mobile-debug-panel",_debugPanel.innerHTML='\n    <div id="mobile-debug-header">\n      <span>Debug</span>\n      <button id="mobile-debug-close">×</button>\n    </div>\n    <div id="mobile-debug-content"></div>\n  ';const e=document.createElement("style");e.textContent="\n    #mobile-debug-panel {\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      width: 350px;\n      max-width: calc(100vw - 40px);\n      max-height: 400px;\n      background: rgba(0, 0, 0, 0.9);\n      color: #ffffff;\n      font-family: 'Courier New', monospace;\n      font-size: 12px;\n      border-radius: 8px;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n      z-index: 10000;\n      display: none;\n    }\n    \n    #mobile-debug-header {\n      background: rgba(255, 255, 255, 0.1);\n      padding: 8px 12px;\n      border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-radius: 8px 8px 0 0;\n    }\n    \n    #mobile-debug-header span {\n      font-weight: bold;\n      font-size: 13px;\n    }\n    \n    #mobile-debug-close {\n      background: none;\n      border: none;\n      color: #ffffff;\n      font-size: 18px;\n      cursor: pointer;\n      padding: 0;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    #mobile-debug-close:hover {\n      background: rgba(255, 255, 255, 0.1);\n      border-radius: 4px;\n    }\n    \n    #mobile-debug-content {\n      padding: 12px;\n      max-height: 340px;\n      overflow-y: auto;\n      word-wrap: break-word;\n      line-height: 1.4;\n    }\n    \n    .debug-message {\n      margin-bottom: 4px;\n      white-space: pre-wrap;\n    }\n    \n    .debug-message.error {\n      color: #ff6b6b;\n      background: rgba(255, 107, 107, 0.1);\n      padding: 4px;\n      border-radius: 3px;\n      border-left: 3px solid #ff6b6b;\n    }\n    \n    .debug-message.warning {\n      color: #ffd93d;\n      background: rgba(255, 217, 61, 0.1);\n      padding: 4px;\n      border-radius: 3px;\n      border-left: 3px solid #ffd93d;\n    }\n    \n    .debug-timestamp {\n      color: #888;\n      font-size: 10px;\n    }\n    \n    @media (max-width: 480px) {\n      #mobile-debug-panel {\n        width: calc(100vw - 20px);\n        right: 10px;\n        top: 10px;\n      }\n    }\n  ",document.head.appendChild(e),document.body.appendChild(_debugPanel),document.getElementById("mobile-debug-close").onclick=hideDebug,_updateDebugDisplay()}function _updateDebugDisplay(){if(!_debugPanel)return;const e=document.getElementById("mobile-debug-content");e&&(e.innerHTML=_debugMessages.map(e=>"string"==typeof e?`<div class="debug-message">${e}</div>`:`<div class="debug-message ${e.type}">${e.text}</div>`).join(""),e.scrollTop=e.scrollHeight)}debug.clear=function(){_debugMessages=[],_debugPanel&&_updateDebugDisplay(),console.clear()},window.debug=debug,window.debugError=debugError,window.debugWarn=debugWarn,window.showDebug=showDebug,window.hideDebug=hideDebug,window.toggleDebug=toggleDebug,window.lockGestures=lockGestures,window.enableGyroTap=enableGyroTap,window.enableGyroButton=enableGyroButton,window.enableMicTap=enableMicTap,window.enableMicButton=enableMicButton,window.enableSoundTap=enableSoundTap,window.enableSoundButton=enableSoundButton,window.enableAllTap=enableAllTap,window.enableAllButton=enableAllButton,"undefined"!=typeof p5&&p5.prototype&&(p5.prototype.lockGestures=lockGestures,p5.prototype.enableGyroTap=enableGyroTap,p5.prototype.enableGyroButton=enableGyroButton,p5.prototype.enableMicTap=enableMicTap,p5.prototype.enableMicButton=enableMicButton,p5.prototype.enableSoundTap=enableSoundTap,p5.prototype.enableSoundButton=enableSoundButton,p5.prototype.enableAllTap=enableAllTap,p5.prototype.enableAllButton=enableAllButton,p5.prototype.showDebug=showDebug,p5.prototype.hideDebug=hideDebug,p5.prototype.toggleDebug=toggleDebug,p5.prototype.debug=debug,p5.prototype.debugError=debugError,p5.prototype.debugWarn=debugWarn,console.log("✅ Mobile p5.js Permissions: p5.prototype functions registered"));
+window._originalConsoleError=console.error,window._originalConsoleWarn=console.warn,window._debugErrorHandlersSet||(window._debugErrorHandlersSet=!0,window._earlyErrors=window._earlyErrors||[],window.addEventListener("error",function(e){const n=`${e.error?.message||e.message||"Unknown error"} (${e.filename?e.filename.split("/").pop():"unknown file"}:${e.lineno||"unknown line"})`;console.error("🚨 Error caught:",n),e.error?.stack&&console.error("Stack:",e.error.stack),window._earlyErrors.push({type:"error",message:"JavaScript Error: "+n,stack:e.error?.stack}),!1===window.SHOW_DEBUG||window._debugVisible||"function"==typeof showDebug&&showDebug(),window._debugVisible&&"function"==typeof debugError&&(debugError("JavaScript Error:",n),e.error?.stack&&debugError("Stack trace:",e.error.stack))}),window.addEventListener("unhandledrejection",function(e){const n=e.reason?.message||e.reason||"Unknown promise rejection";console.error("🚨 Promise rejection caught:",n),window._earlyErrors.push({type:"error",message:"Unhandled Promise Rejection: "+n}),window._debugVisible&&"function"==typeof debugError&&debugError("Unhandled Promise Rejection:",n)})),window.sensorsEnabled=!1,window.micEnabled=!1,window.soundEnabled=!1,window.gesturesLocked=!1,window.vibrationEnabled=!1;let _permissionsInitialized=!1,_micInstance=null;function lockGestures(){window.gesturesLocked||(console.log("🔒 Locking mobile gestures..."),_initializeGestureBlocking(),_initializeP5TouchOverrides(),window.gesturesLocked=!0,console.log("✅ Mobile gestures locked"))}function enableGyroButton(e="ENABLE MOTION SENSORS",n="Requesting motion sensors..."){_createPermissionButton(e,n,async()=>{await _requestMotionPermissions(),console.log("✅ Gyroscope enabled via button")})}function enableGyroTap(e="Tap screen to enable motion sensors"){_createTapToEnable(e,async()=>{await _requestMotionPermissions(),console.log("✅ Gyroscope enabled via tap")})}function enableMicButton(e="ENABLE MICROPHONE",n="Requesting microphone access..."){_createPermissionButton(e,n,async()=>{await _requestMicrophonePermissions(),console.log("✅ Microphone enabled via button")})}function enableMicTap(e="Tap screen to enable microphone"){_createTapToEnable(e,async()=>{await _requestMicrophonePermissions(),console.log("✅ Microphone enabled via tap")})}function enableSoundButton(e="ENABLE SOUND",n="Enabling audio..."){_createPermissionButton(e,n,async()=>{await _requestSoundOutput(),console.log("✅ Sound output enabled via button")})}function enableSoundTap(e="Tap screen to enable sound"){_createTapToEnable(e,async()=>{await _requestSoundOutput(),console.log("✅ Sound output enabled via tap")})}function enableVibrationButton(e="ENABLE VIBRATION",n="Enabling vibration..."){_createPermissionButton(e,n,async()=>{await _requestVibrationPermission(),console.log("✅ Vibration enabled via button")})}function enableVibrationTap(e="Tap screen to enable vibration"){_createTapToEnable(e,async()=>{await _requestVibrationPermission(),console.log("✅ Vibration enabled via tap")})}function enableAllButton(e="ENABLE MOTION & MICROPHONE",n="Requesting permissions..."){_createPermissionButton(e,n,async()=>{await _requestMotionPermissions(),await _requestMicrophonePermissions(),console.log("✅ Motion sensors and microphone enabled via button")})}function enableAllTap(e="Tap screen to enable motion sensors & microphone"){_createTapToEnable(e,async()=>{await _requestMotionPermissions(),await _requestMicrophonePermissions(),console.log("✅ Motion sensors and microphone enabled via tap")})}function vibrate(e){return window.vibrationEnabled?navigator.vibrate?navigator.vibrate(e):(console.warn("⚠️ Vibration API not supported on this device"),!1):(console.warn("⚠️ Vibration not enabled. Call enableVibrationTap() or enableVibrationButton() first."),!1)}function stopVibration(){navigator.vibrate&&navigator.vibrate(0)}async function _requestMotionPermissions(){try{if("undefined"!=typeof DeviceOrientationEvent&&"function"==typeof DeviceOrientationEvent.requestPermission){const e=await DeviceOrientationEvent.requestPermission();if(console.log("Orientation permission:",e),"undefined"!=typeof DeviceMotionEvent&&"function"==typeof DeviceMotionEvent.requestPermission){const e=await DeviceMotionEvent.requestPermission();console.log("Motion permission:",e)}}window.sensorsEnabled=!0,_notifySketchReady()}catch(e){console.error("Motion sensor permission error:",e),_debugVisible&&debugError("Motion sensor permission error:",e),window.sensorsEnabled=!0,_notifySketchReady()}}async function _requestMicrophonePermissions(){try{"undefined"!=typeof userStartAudio&&await userStartAudio(),"undefined"!=typeof mic&&mic&&mic.start?(mic.start(),_micInstance=mic,window.micEnabled=!0):console.warn("No microphone object found. Create one with: mic = new p5.AudioIn();"),_notifySketchReady()}catch(e){console.error("Microphone permission error:",e),_debugVisible&&debugError("Microphone permission error:",e),_notifySketchReady()}}async function _requestSoundOutput(){try{"undefined"!=typeof userStartAudio&&await userStartAudio(),window.soundEnabled=!0,_notifySketchReady()}catch(e){console.error("Sound output error:",e),_debugVisible&&debugError("Sound output error:",e),window.soundEnabled=!0,_notifySketchReady()}}async function _requestVibrationPermission(){try{if(!navigator.vibrate)return console.warn("⚠️ Vibration API not supported on this device (likely iOS)"),_debugVisible&&debugWarn("Vibration API not supported on this device"),window.vibrationEnabled=!1,void _notifySketchReady();navigator.vibrate(1)?(window.vibrationEnabled=!0,console.log("✅ Vibration enabled")):(console.warn("⚠️ Vibration API available but vibration failed"),window.vibrationEnabled=!1),_notifySketchReady()}catch(e){console.error("Vibration permission error:",e),_debugVisible&&debugError("Vibration permission error:",e),window.vibrationEnabled=!1,_notifySketchReady()}}function _notifySketchReady(){"function"==typeof userSetupComplete&&userSetupComplete(),window.dispatchEvent(new CustomEvent("permissionsReady",{detail:{sensors:window.sensorsEnabled,microphone:window.micEnabled,sound:window.soundEnabled,vibration:window.vibrationEnabled,gestures:window.gesturesLocked}}))}function _createPermissionButton(e,n,o){_removeExistingUI();const t=document.createElement("button");t.id="permissionButton",t.textContent=e,t.style.cssText="\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    padding: 20px 40px;\n    font-size: 18px;\n    font-weight: bold;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    z-index: 999999;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n    transition: transform 0.2s ease;\n    touch-action: manipulation;\n  ";const i=document.createElement("div");i.id="permissionStatus",i.textContent=n,i.style.cssText="\n    position: fixed;\n    top: 60%;\n    left: 50%;\n    transform: translate(-50%, 0);\n    color: white;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    text-align: center;\n    z-index: 999998;\n    display: none;\n  ",t.addEventListener("mouseenter",()=>{t.style.transform="translate(-50%, -50%) scale(1.05)"}),t.addEventListener("mouseleave",()=>{t.style.transform="translate(-50%, -50%) scale(1)"});const r=async()=>{t.parentNode&&(t.style.display="none",i.style.display="block",await o(),i.style.display="none",_removeExistingUI())};t.addEventListener("click",r),t.addEventListener("touchend",function(e){e.preventDefault(),e.stopPropagation(),r()}),t.addEventListener("pointerup",function(e){e.preventDefault(),e.stopPropagation(),r()}),document.body.appendChild(t),document.body.appendChild(i)}function _createTapToEnable(e,n){_removeExistingUI();const o=document.createElement("div");o.id="tapOverlay",o.style.cssText="\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 999999;\n    cursor: pointer;\n    touch-action: manipulation;\n  ";const t=document.createElement("div");t.textContent=e,t.style.cssText="\n    color: white;\n    font-size: 24px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    text-align: center;\n    padding: 40px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-radius: 12px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n  ",o.appendChild(t);const i=async()=>{o.parentNode&&(t.textContent="Enabling...",await n(),o.parentNode&&document.body.removeChild(o))};o.addEventListener("click",i),o.addEventListener("touchend",function(e){e.preventDefault(),e.stopPropagation(),i()}),o.addEventListener("pointerup",function(e){e.preventDefault(),e.stopPropagation(),i()}),document.body.appendChild(o)}function _removeExistingUI(){const e=document.getElementById("permissionButton"),n=document.getElementById("permissionStatus"),o=document.getElementById("tapOverlay");e&&e.remove(),n&&n.remove(),o&&o.remove()}function _initializeGestureBlocking(){window.history.pushState(null,"",window.location.href),window.onpopstate=function(){window.history.pushState(null,"",window.location.href)},window.addEventListener("beforeunload",function(e){e.preventDefault(),e.returnValue=""}),_initializeEdgeSwipePrevention(),_initializeOtherGesturePrevention()}function _initializeEdgeSwipePrevention(){let e=0,n=0;document.addEventListener("touchstart",function(o){o.touches&&o.touches.length>0&&(e=o.touches[0].clientX,n=o.touches[0].clientY,(e<20||e>window.innerWidth-20)&&o.preventDefault())},{passive:!1,capture:!0}),document.addEventListener("touchmove",function(o){if(!o.touches||0===o.touches.length)return;let t=o.touches[0].clientX,i=o.touches[0].clientY,r=t-e,a=i-n;(e<20&&r>0||e>window.innerWidth-20&&r<0)&&(o.preventDefault(),o.stopPropagation()),0===window.pageYOffset&&a>0&&o.preventDefault(),!o.target||"CANVAS"!==o.target.tagName||document.getElementById("tapOverlay")||document.getElementById("permissionButton")||o.preventDefault()},{passive:!1,capture:!0})}function _initializeOtherGesturePrevention(){document.addEventListener("gesturestart",function(e){e.preventDefault()}),document.addEventListener("gesturechange",function(e){e.preventDefault()}),document.addEventListener("gestureend",function(e){e.preventDefault()});let e=0;document.addEventListener("touchend",function(n){if(n.target&&("tapOverlay"===n.target.id||n.target.closest("#tapOverlay")||"permissionButton"===n.target.id||"permissionStatus"===n.target.id||n.target.closest("#permissionButton")||n.target.closest("#permissionStatus")))return;const o=Date.now();o-e<=300&&n.preventDefault(),e=o},!1),window.oncontextmenu=function(e){return e.preventDefault(),e.stopPropagation(),!1}}function _initializeP5TouchOverrides(){setTimeout(()=>{if(window._setupDone)_overrideP5Touch();else{const e=setInterval(()=>{window._setupDone&&(_overrideP5Touch(),clearInterval(e))},100)}},100)}function _overrideP5Touch(){const e=window.touchStarted||function(){},n=window.touchMoved||function(){},o=window.touchEnded||function(){},t=window.mousePressed||function(){},i=window.mouseDragged||function(){},r=window.mouseReleased||function(){};window.touchStarted=function(n){return e(n),!1},window.touchMoved=function(e){return n(e),!1},window.touchEnded=function(e){return o(e),!1},window.mousePressed=function(e){return t(e),!1},window.mouseDragged=function(e){return i(e),!1},window.mouseReleased=function(e){return r(e),!1}}document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("startButton"),n=document.getElementById("statusText");e&&n&&(console.warn("⚠️  Legacy HTML elements detected. Consider using the new API functions instead."),e.addEventListener("click",async()=>{e.classList.add("hidden"),n.classList.remove("hidden"),n.textContent="Requesting permissions...",await _requestMotionPermissions(),await _requestMicrophonePermissions(),n.classList.add("hidden")}),lockGestures())});let _debugPanel=null,_debugVisible=!1,_debugMessages=[];const MAX_DEBUG_MESSAGES=20;function showDebug(){_createDebugPanel(),_debugPanel.style.display="block",_debugVisible=!0,window._debugVisible=!0,_setupConsoleOverrides(),_displayEarlyErrors()}function hideDebug(){_debugPanel&&(_debugPanel.style.display="none",_debugVisible=!1)}function toggleDebug(){_debugVisible?hideDebug():showDebug()}function debug(...e){console.log(...e);_addDebugMessage(e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" "),"log")}function debugError(...e){(window._originalConsoleError||console.error).apply(console,e);_addDebugMessage(`❌ ERROR: ${e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" ")}`,"error")}function debugWarn(...e){(window._originalConsoleWarn||console.warn).apply(console,e);_addDebugMessage(`⚠️ WARNING: ${e.map(e=>{if("object"==typeof e&&null!==e)try{return JSON.stringify(e,null,2)}catch(n){return String(e)}return String(e)}).join(" ")}`,"warning")}function _addDebugMessage(e,n="log"){const o={text:`[${(new Date).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit",fractionalSecondDigits:3})}] ${e}`,type:n};_debugMessages.push(o),_debugMessages.length>20&&_debugMessages.shift(),_debugPanel&&_updateDebugDisplay()}function _setupConsoleOverrides(){window._consoleOverrideSet||(window._consoleOverrideSet=!0,window._originalConsoleError=console.error,window._originalConsoleWarn=console.warn,console.error=function(...e){window._originalConsoleError.apply(console,e),_debugVisible&&debugError(...e)},console.warn=function(...e){window._originalConsoleWarn.apply(console,e),_debugVisible&&debugWarn(...e)})}function _displayEarlyErrors(){window._earlyErrors&&window._earlyErrors.length>0&&(debugError(`🚨 Found ${window._earlyErrors.length} early error(s):`),window._earlyErrors.forEach(e=>{debugError(e.message),e.stack&&debugError("Stack trace:",e.stack)}),window._earlyErrors=[])}function _createDebugPanel(){if(_debugPanel)return;_debugPanel=document.createElement("div"),_debugPanel.id="mobile-debug-panel",_debugPanel.innerHTML='\n    <div id="mobile-debug-header">\n      <span>Debug</span>\n      <button id="mobile-debug-close">×</button>\n    </div>\n    <div id="mobile-debug-content"></div>\n  ';const e=document.createElement("style");e.textContent="\n    #mobile-debug-panel {\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      width: 350px;\n      max-width: calc(100vw - 40px);\n      max-height: 400px;\n      background: rgba(0, 0, 0, 0.9);\n      color: #ffffff;\n      font-family: 'Courier New', monospace;\n      font-size: 12px;\n      border-radius: 8px;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n      z-index: 10000;\n      display: none;\n    }\n    \n    #mobile-debug-header {\n      background: rgba(255, 255, 255, 0.1);\n      padding: 8px 12px;\n      border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-radius: 8px 8px 0 0;\n    }\n    \n    #mobile-debug-header span {\n      font-weight: bold;\n      font-size: 13px;\n    }\n    \n    #mobile-debug-close {\n      background: none;\n      border: none;\n      color: #ffffff;\n      font-size: 18px;\n      cursor: pointer;\n      padding: 0;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    #mobile-debug-close:hover {\n      background: rgba(255, 255, 255, 0.1);\n      border-radius: 4px;\n    }\n    \n    #mobile-debug-content {\n      padding: 12px;\n      max-height: 340px;\n      overflow-y: auto;\n      word-wrap: break-word;\n      line-height: 1.4;\n    }\n    \n    .debug-message {\n      margin-bottom: 4px;\n      white-space: pre-wrap;\n    }\n    \n    .debug-message.error {\n      color: #ff6b6b;\n      background: rgba(255, 107, 107, 0.1);\n      padding: 4px;\n      border-radius: 3px;\n      border-left: 3px solid #ff6b6b;\n    }\n    \n    .debug-message.warning {\n      color: #ffd93d;\n      background: rgba(255, 217, 61, 0.1);\n      padding: 4px;\n      border-radius: 3px;\n      border-left: 3px solid #ffd93d;\n    }\n    \n    .debug-timestamp {\n      color: #888;\n      font-size: 10px;\n    }\n    \n    @media (max-width: 480px) {\n      #mobile-debug-panel {\n        width: calc(100vw - 20px);\n        right: 10px;\n        top: 10px;\n      }\n    }\n  ",document.head.appendChild(e),document.body.appendChild(_debugPanel),document.getElementById("mobile-debug-close").onclick=hideDebug,_updateDebugDisplay()}function _updateDebugDisplay(){if(!_debugPanel)return;const e=document.getElementById("mobile-debug-content");e&&(e.innerHTML=_debugMessages.map(e=>"string"==typeof e?`<div class="debug-message">${e}</div>`:`<div class="debug-message ${e.type}">${e.text}</div>`).join(""),e.scrollTop=e.scrollHeight)}debug.clear=function(){_debugMessages=[],_debugPanel&&_updateDebugDisplay(),console.clear()},window.debug=debug,window.debugError=debugError,window.debugWarn=debugWarn,window.showDebug=showDebug,window.hideDebug=hideDebug,window.toggleDebug=toggleDebug,window.lockGestures=lockGestures,window.enableGyroTap=enableGyroTap,window.enableGyroButton=enableGyroButton,window.enableMicTap=enableMicTap,window.enableMicButton=enableMicButton,window.enableSoundTap=enableSoundTap,window.enableSoundButton=enableSoundButton,window.enableVibrationTap=enableVibrationTap,window.enableVibrationButton=enableVibrationButton,window.vibrate=vibrate,window.stopVibration=stopVibration,window.enableAllTap=enableAllTap,window.enableAllButton=enableAllButton,"undefined"!=typeof p5&&p5.prototype&&(p5.prototype.lockGestures=lockGestures,p5.prototype.enableGyroTap=enableGyroTap,p5.prototype.enableGyroButton=enableGyroButton,p5.prototype.enableMicTap=enableMicTap,p5.prototype.enableMicButton=enableMicButton,p5.prototype.enableSoundTap=enableSoundTap,p5.prototype.enableSoundButton=enableSoundButton,p5.prototype.enableVibrationTap=enableVibrationTap,p5.prototype.enableVibrationButton=enableVibrationButton,p5.prototype.vibrate=vibrate,p5.prototype.stopVibration=stopVibration,p5.prototype.enableAllTap=enableAllTap,p5.prototype.enableAllButton=enableAllButton,p5.prototype.showDebug=showDebug,p5.prototype.hideDebug=hideDebug,p5.prototype.toggleDebug=toggleDebug,p5.prototype.debug=debug,p5.prototype.debugError=debugError,p5.prototype.debugWarn=debugWarn,console.log("✅ Mobile p5.js Permissions: p5.prototype functions registered"));

package/examples/Phone Sensor Examples/microphone/01_mic_level/index.html

@@ -2,9 +2,9 @@
 <html>
 <head>
     <title>P5.js Mobile - Microphone Level</title>
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/addons/p5.sound.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     <style>
         body {
             margin: 0;

package/examples/Phone Sensor Examples/movement/01_orientation_basic/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-   <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.js"></script>
 
 </head>
 <body>

package/examples/Phone Sensor Examples/movement/02_rotational_velocity/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/movement/03_acceleration/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-   <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.js"></script>
 
 </head>
 <body>

package/examples/Phone Sensor Examples/sound/01_dual_audio/index.html

@@ -21,7 +21,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/addons/p5.sound.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/sound/02_volume_touches/index.html

@@ -21,7 +21,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/addons/p5.sound.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/touch/01_touch_basic/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/touch/02_touch_zones/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/touch/03_touch_count/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/touch/04_touch_distance/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/touch/05_touch_angle/index.html

@@ -18,7 +18,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
     
     <!-- Load the mobile p5.js permissions library -->
-    <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
     
 </head>
 <body>

package/examples/Phone Sensor Examples/vibration/01_haptic_feedback/README.md

@@ -0,0 +1,51 @@
+# Haptic Feedback Example
+
+This example demonstrates how to use the vibration motor on Android devices to provide haptic feedback for different touch interactions.
+
+## Features
+
+- **Four Touch Zones**: Screen divided into 2x2 grid with different vibration patterns
+- **Quick Tap**: 20ms single pulse for subtle feedback
+- **Double Tap**: Two 50ms pulses with 30ms pause between
+- **Triple Tap**: Three 50ms pulses for more prominent feedback
+- **Long Press**: 200ms extended pulse for significant actions
+
+## Android Only
+
+⚠️ **Important**: Vibration is only supported on Android devices. iOS does not support the Vibration API, so this example will not provide haptic feedback on iPhones or iPads.
+
+## How It Works
+
+1. Tap screen to enable vibration (browser security requirement)
+2. Touch different zones to experience different vibration patterns
+3. Each zone has a distinct pattern:
+   - Single number = duration in milliseconds
+   - Array = pattern of [vibrate, pause, vibrate, pause, ...]
+
+## Key Concepts
+
+- `enableVibrationTap()` - Request permission to use vibration
+- `window.vibrationEnabled` - Check if vibration is available
+- `vibrate(pattern)` - Trigger vibration with duration or pattern
+- Combining visual and haptic feedback for enhanced UX
+
+## Code Highlights
+
+```javascript
+// Enable vibration with tap
+enableVibrationTap('Tap to enable vibration');
+
+// Single vibration
+vibrate(50);  // 50ms pulse
+
+// Pattern vibration
+vibrate([100, 50, 100]);  // vibrate-pause-vibrate
+```
+
+## Use Cases
+
+- Button press feedback
+- Game interactions
+- Alert notifications
+- Touch zone confirmation
+- Gesture completion feedback

package/examples/Phone Sensor Examples/vibration/01_haptic_feedback/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Haptic Feedback - Mobile p5.js</title>
+    
+    <!-- Basic CSS to remove browser defaults and align canvas -->
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+    </style>
+    
+    <!-- Load p5.js library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.10/p5.min.js"></script>
+    
+    <!-- Load the mobile p5.js permissions library -->
+    <script src="https://cdn.jsdelivr.net/npm/p5-phone@1.4.4/dist/p5-phone.min.js"></script>
+    
+</head>
+<body>
+    <!-- Load the p5.js sketch -->
+    <script src="sketch.js"></script>
+</body>
+</html>