p5-phone 1.4.4

package/dist/p5-phone.min.js

@@ -0,0 +1,10 @@
+/*!
+ * p5-phone v1.4.4
+ * Simplified mobile hardware access for p5.js - handle sensors, microphone, touch, and browser gestures with ease
+ * https://github.com/DigitalFuturesOCADU/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"));

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<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://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>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <script src="sketch.js"></script>
+</body>
+</html>

package/examples/Phone Sensor Examples/microphone/01_mic_level/sketch.js

@@ -0,0 +1,117 @@
+// Microphone level example
+// Demonstrates reading microphone input level with visual feedback
+// Shows text display and full-width bar graph with threshold detection
+
+// Global variables - easy to adjust for different use cases
+let mic;
+let micLevel = 0;
+let micMultiplier = 5; // Multiplier to amplify mic sensitivity
+let threshold = 0.3; // Threshold for background color change (0.0 - 1.0)
+let backgroundColor;
+let backgroundColorQuiet;
+let backgroundColorLoud;
+
+function setup() 
+{
+    createCanvas(windowWidth, windowHeight);
+    
+    // Set up colors
+    backgroundColorQuiet = color(50, 50, 50); // Dark gray when quiet
+    backgroundColorLoud = color(255, 100, 50); // Orange when loud
+    backgroundColor = backgroundColorQuiet;
+    
+    // Create microphone input (global variable for library to use)
+    mic = new p5.AudioIn();
+    
+    textAlign(CENTER, CENTER);
+    textSize(16);
+    
+    // lock Gesturs
+    lockGestures();
+
+    // Request permission for microphone on iOS
+    enableMicTap();
+}
+
+function draw() 
+{
+    background(backgroundColor);
+    
+    // Check if microphone is available
+    if (window.micEnabled) 
+    {
+        // Get current microphone level (0.0 to 1.0) and apply multiplier
+        micLevel = mic.getLevel() * micMultiplier;
+        
+        // Check if level exceeds threshold and change background
+        if (micLevel > threshold) 
+        {
+            backgroundColor = backgroundColorLoud;
+        } 
+        else 
+        {
+            backgroundColor = backgroundColorQuiet;
+        }
+        
+        // Display microphone level as text
+        fill(255);
+        text("Microphone Level", width/2, height/6);
+        
+        // Display numeric value with more precision
+        text("Level: " + nf(micLevel, 1, 3), width/2, height/6 + 40);
+        
+        // Display threshold value
+        fill(150);
+        text("Threshold: " + nf(threshold, 1, 2), width/2, height/6 + 70);
+        
+        // Calculate bar height based on mic level
+        let barHeight = map(micLevel, 0, 1, 0, height);
+        
+        // Draw full-width bar graph from bottom
+        fill(100, 200, 255);
+        noStroke();
+        rect(0, height - barHeight, width, barHeight);
+        
+        // Draw threshold line
+        let thresholdY = height - map(threshold, 0, 1, 0, height);
+        stroke(255, 200, 0);
+        strokeWeight(2);
+        line(0, thresholdY, width, thresholdY);
+        
+        // Label the threshold line
+        fill(255, 200, 0);
+        noStroke();
+        text("Threshold", width/2, thresholdY - 15);
+        
+        // Instructions
+        fill(255);
+        text("Make noise or speak to see the level change", width/2, height - 60);
+        text("When level exceeds threshold, background changes color", width/2, height - 30);
+    }
+    else 
+    {
+        // Microphone not available or permission not granted
+        fill(255, 100, 100);
+        text("Microphone not available", width/2, height/2);
+        text("On iOS: Tap to request microphone permission", width/2, height/2 + 30);
+        text("Check device compatibility", width/2, height/2 + 60);
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// This function runs when a new touch begins
+function touchStarted() 
+{
+    // Touch positions will be updated in draw() function
+    return false;
+}
+
+// This function runs when a touch ends
+function touchEnded() 
+{
+    // Touch positions will be updated in draw() function
+    return false;
+}

package/examples/Phone Sensor Examples/movement/01_orientation_basic/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>Basic Orientation - 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.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>
+
+</head>
+<body>
+    <!-- Load the p5.js sketch -->
+    <script src="sketch.js"></script>
+</body>
+</html>

package/examples/Phone Sensor Examples/movement/01_orientation_basic/sketch.js

@@ -0,0 +1,123 @@
+// ==============================================
+// BASIC ORIENTATION EXAMPLE
+// ==============================================
+// This example shows the device orientation
+// values for x, y, and z rotation
+// 
+// CONCEPTS COVERED:
+// - Device orientation detection
+// - Motion sensor permissions with enableGyroTap
+// - rotationX, rotationY, rotationZ values
+// - Simple display of sensor data
+// - Global variables for sensor values
+// ==============================================
+
+// Variables to store orientation data
+let orientationX = 0;  // Rotation around X axis (front/back tilt)
+let orientationY = 0;  // Rotation around Y axis (left/right tilt)
+let orientationZ = 0;  // Rotation around Z axis (device rotation)
+
+// ==============================================
+// SETUP FUNCTION - Runs once when page loads
+// ==============================================
+function setup() 
+{
+    // Create a canvas that fills the entire screen
+    createCanvas(windowWidth, windowHeight);
+
+    // Set to show in Degrees
+    angleMode(DEGREES);
+    
+    // Lock mobile gestures to prevent scrolling, zooming, etc.
+    lockGestures();
+    
+    // Show debug panel to see what's happening
+    //showDebug();
+    
+    // Try button instead of tap (more reliable)
+    enableGyroTap('ENABLE MOTION SENSORS', 'Requesting motion sensors...');
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(32);
+    
+
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    // Clear the screen
+    background(240, 240, 240);
+    
+
+    
+    // Check if sensors are working
+    if (window.sensorsEnabled) 
+    {
+        background(200, 255, 200);  // Light green when sensors active
+        
+        // Update orientation values from device sensors ONLY when enabled
+        orientationX = rotationX;
+        orientationY = rotationY;
+        orientationZ = rotationZ;
+        
+        // NOTE: You can use constrain() to keep values within a specific range
+        // Example: orientationX = constrain(rotationX, -90, 90);
+        // This would limit the X rotation to between -90 and 90 degrees
+        // Useful for mapping sensor values to specific ranges for animations or controls
+        // Learn more: https://p5js.org/reference/p5/constrain/
+
+        debug('angles',orientationX,orientationY,orientationZ);
+        
+        // Display orientation values
+        fill(50, 50, 50);  // Dark text
+        textAlign(CENTER, CENTER);
+        
+        // Show current orientation values
+        textSize(24);
+        text("Device Orientation", width/2, height/2 - 100);
+        
+        textSize(20);
+        text("X (Tilt Forward/Back): " + orientationX.toFixed(1) + "°", width/2, height/2 - 40);
+        text("Y (Tilt Left/Right): " + orientationY.toFixed(1) + "°", width/2, height/2);
+        text("Z (Rotation): " + orientationZ.toFixed(1) + "°", width/2, height/2 + 40);
+        
+        // Instructions
+        textSize(16);
+        fill(100, 100, 100);
+        text("Tilt and rotate your device!", width/2, height/2 + 100);
+    } 
+    else 
+    {
+        // Instructions to enable sensors
+        fill(50, 50, 50);  // Dark text
+        textAlign(CENTER, CENTER);
+        textSize(28);
+        fill(150, 50, 50);  // Red text
+        text("Motion Sensors Disabled", width/2, height/2 - 40);
+        
+        textSize(20);
+        fill(100, 100, 100);
+        text("Tap the screen to enable\\nmotion sensors", width/2, height/2 + 20);
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+// Note: Touch events are handled by enableGyroTap for permissions
+
+function touchStarted() 
+{
+    // Permission handling is done by enableGyroTap
+    return false;
+}
+
+function touchEnded() 
+{
+    return false;
+}
+

package/examples/Phone Sensor Examples/movement/02_rotational_velocity/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>Rotational Velocity - 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.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>
+    
+</head>
+<body>
+    <!-- Load the p5.js sketch -->
+    <script src="sketch.js"></script>
+</body>
+</html>

package/examples/Phone Sensor Examples/movement/02_rotational_velocity/sketch.js

@@ -0,0 +1,144 @@
+// ==============================================
+// ROTATIONAL VELOCITY EXAMPLE
+// ==============================================
+// This example shows the rotational velocity
+// by comparing current rotation with previous rotation
+// 
+// CONCEPTS COVERED:
+// - Device rotational velocity detection
+// - Motion sensor permissions with enableGyroTap
+// - rotationX, rotationY, rotationZ values
+// - pRotationX, pRotationY, pRotationZ (previous frame values)
+// - Calculating velocity as change over time
+// - Global variables for velocity values
+// ==============================================
+
+// Variables to store current rotation data
+let orientationX = 0;  // Current rotation around X axis (front/back tilt)
+let orientationY = 0;  // Current rotation around Y axis (left/right tilt)
+let orientationZ = 0;  // Current rotation around Z axis (device rotation)
+
+// Variables to store rotational velocity
+let velocityX = 0;     // Change in X rotation per frame
+let velocityY = 0;     // Change in Y rotation per frame
+let velocityZ = 0;     // Change in Z rotation per frame
+
+// ==============================================
+// SETUP FUNCTION - Runs once when page loads
+// ==============================================
+function setup() 
+{
+    // Create a canvas that fills the entire screen
+    createCanvas(windowWidth, windowHeight);
+    
+    // Lock mobile gestures to prevent scrolling, zooming, etc.
+    lockGestures();
+    
+    // Enable motion sensors with tap-to-start
+    enableGyroTap('Tap screen to enable motion sensors');
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(32);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    // Clear the screen
+    background(240, 240, 240);
+    
+    // Check if sensors are working
+    if (window.sensorsEnabled) 
+    {
+        background(200, 255, 200);  // Light green when sensors active
+        
+        // Update orientation values from device sensors ONLY when enabled
+        orientationX = rotationX;
+        orientationY = rotationY;
+        orientationZ = rotationZ;
+        
+        // Calculate rotational velocity (change from previous frame)
+        // p5.js provides pRotationX, pRotationY, pRotationZ for previous frame values
+        velocityX = orientationX - pRotationX;
+        velocityY = orientationY - pRotationY;
+        velocityZ = orientationZ - pRotationZ;
+        
+        // NOTE: You can use constrain() to keep velocity values within a specific range
+        // Example: velocityX = constrain(velocityX, -10, 10);
+        // This would limit the X velocity to between -10 and 10 degrees per frame
+        // Useful for creating smooth animations or preventing extreme values
+        // Learn more: https://p5js.org/reference/p5/constrain/
+        
+        // Display current orientation values
+        fill(50, 50, 50);  // Dark text
+        textAlign(CENTER, CENTER);
+        
+        // Show current orientation title
+        textSize(24);
+        text("Device Rotational Velocity", width/2, height/2 - 140);
+        
+        // Show current rotation values
+        textSize(18);
+        fill(80, 80, 80);
+        text("Current Rotation:", width/2, height/2 - 100);
+        
+        textSize(16);
+        text("X: " + orientationX.toFixed(1) + "°", width/2, height/2 - 80);
+        text("Y: " + orientationY.toFixed(1) + "°", width/2, height/2 - 60);
+        text("Z: " + orientationZ.toFixed(1) + "°", width/2, height/2 - 40);
+        
+        // Show velocity values (change per frame)
+        textSize(18);
+        fill(150, 50, 50);  // Red text for velocity
+        text("Rotational Velocity (°/frame):", width/2, height/2);
+        
+        textSize(16);
+        text("X Velocity: " + velocityX.toFixed(2) + "°/frame", width/2, height/2 + 20);
+        text("Y Velocity: " + velocityY.toFixed(2) + "°/frame", width/2, height/2 + 40);
+        text("Z Velocity: " + velocityZ.toFixed(2) + "°/frame", width/2, height/2 + 60);
+        
+        // Show velocity magnitude (total rotational speed)
+        let totalVelocity = sqrt(velocityX * velocityX + velocityY * velocityY + velocityZ * velocityZ);
+        textSize(18);
+        fill(50, 100, 150);  // Blue text for total
+        text("Total Velocity: " + totalVelocity.toFixed(2) + "°/frame", width/2, height/2 + 90);
+        
+        // Instructions
+        textSize(14);
+        fill(100, 100, 100);
+        text("Rotate your device quickly to see velocity changes!", width/2, height/2 + 130);
+    } 
+    else 
+    {
+        // Instructions to enable sensors
+        fill(50, 50, 50);  // Dark text
+        textAlign(CENTER, CENTER);
+        textSize(28);
+        fill(150, 50, 50);  // Red text
+        text("Motion Sensors Disabled", width/2, height/2 - 40);
+        
+        textSize(20);
+        fill(100, 100, 100);
+        text("Tap the screen to enable\\nmotion sensors", width/2, height/2 + 20);
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+// Note: Touch events are handled by enableGyroTap for permissions
+
+function touchStarted() 
+{
+    // Permission handling is done by enableGyroTap
+    return false;
+}
+
+function touchEnded() 
+{
+    return false;
+}
+

package/examples/Phone Sensor Examples/movement/03_acceleration/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>Basic Velocity - 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.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>
+
+</head>
+<body>
+    <!-- Load the p5.js sketch -->
+    <script src="sketch.js"></script>
+</body>
+</html>

package/examples/Phone Sensor Examples/movement/03_acceleration/sketch.js

@@ -0,0 +1,87 @@
+// Device acceleration example
+// Demonstrates reading accelerationX, Y, Z values from device motion sensors
+// Acceleration is measured in m/s² (meters per second squared)
+
+let backgroundColor;
+
+function setup() 
+{
+    createCanvas(windowWidth, windowHeight);
+    backgroundColor = color(50, 50, 50);
+    textAlign(CENTER, CENTER);
+    textSize(16);
+    
+    // Request permission for motion sensors on iOS
+    enableGyroTap();
+}
+
+function draw() 
+{
+    background(backgroundColor);
+    
+    // Check if motion sensors are available
+    if (window.sensorsEnabled) 
+    {
+        // Display current acceleration values
+        fill(255);
+        text("Device Acceleration", width/2, height/6);
+        
+        // Display individual acceleration values
+        text("X: " + nf(accelerationX, 1, 2) + " m/s²", width/2, height/6 + 40);
+        text("Y: " + nf(accelerationY, 1, 2) + " m/s²", width/2, height/6 + 70);
+        text("Z: " + nf(accelerationZ, 1, 2) + " m/s²", width/2, height/6 + 100);
+        
+        // Calculate total acceleration magnitude using 3D distance formula
+        let totalAcceleration = sqrt(accelerationX * accelerationX + 
+                                   accelerationY * accelerationY + 
+                                   accelerationZ * accelerationZ);
+        
+        text("Total: " + nf(totalAcceleration, 1, 2) + " m/s²", width/2, height/6 + 140);
+        
+        // Visual representation using bars
+        fill(255, 100, 100); // Red for X
+        rect(width/2 - 120, height/2, map(abs(accelerationX), 0, 20, 0, 100), 20);
+        
+        fill(100, 255, 100); // Green for Y
+        rect(width/2 - 120, height/2 + 30, map(abs(accelerationY), 0, 20, 0, 100), 20);
+        
+        fill(100, 100, 255); // Blue for Z
+        rect(width/2 - 120, height/2 + 60, map(abs(accelerationZ), 0, 20, 0, 100), 20);
+        
+        // Labels for the bars
+        fill(255);
+        text("X", width/2 - 140, height/2 + 10);
+        text("Y", width/2 - 140, height/2 + 40);
+        text("Z", width/2 - 140, height/2 + 70);
+        
+        // Instructions
+        text("Move your device to see acceleration changes", width/2, height - 60);
+        text("Shake, tilt, or move the device in different directions", width/2, height - 30);
+    }
+    else 
+    {
+        // Motion sensors not available or permission not granted
+        fill(255, 100, 100);
+        text("Motion sensors not available", width/2, height/2);
+        text("On iOS: Tap to request motion permission", width/2, height/2 + 30);
+        text("Check device compatibility", width/2, height/2 + 60);
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// This function runs when a new touch begins
+function touchStarted() 
+{
+    // Touch positions will be updated in draw() function
+    return false;
+}
+
+// This function runs when a touch ends
+function touchEnded() 
+{
+    // Touch positions will be updated in draw() function
+    return false;
+}

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

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dual Audio Playback - 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 p5.sound library for audio -->
+    <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>
+    
+</head>
+<body>
+    <!-- Load the p5.js sketch -->
+    <script src="sketch.js"></script>
+</body>
+</html>