p5-phone 1.4.4

package/examples/Phone Sensor Examples/sound/01_dual_audio/sketch.js

@@ -0,0 +1,225 @@
+// ==============================================
+// DUAL AUDIO PLAYBACK EXAMPLE (TOUCH VERSION)
+// ==============================================
+// This example shows how to enable audio playback
+// on mobile devices and play different sounds
+// based on screen touch zones
+// 
+// CONCEPTS COVERED:
+// - Audio playback on mobile (enableSoundTap)
+// - Loading audio files
+// - Touch zone detection
+// - Audio visualization with amplitude
+// - Mobile gesture locking
+// ==============================================
+
+// Global variables to store our audio files
+// We declare these at the top so they can be accessed by all functions
+let audioTrack1;
+let audioTrack2;
+
+// Global variables for audio level detection
+// Amplitude analyzes the volume level of audio in real-time
+let amplitude1;
+let amplitude2;
+
+// ==============================================
+// PRELOAD FUNCTION - Runs before setup
+// ==============================================
+// preload() function runs BEFORE setup()
+// This is the best place to load external assets like images, sounds, or fonts
+// p5.js will wait for all preload operations to complete before moving to setup()
+function preload() 
+{
+    // Load both audio files from the tracks folder
+    // The paths are relative to where our HTML file is located
+    audioTrack1 = loadSound('tracks/audio1.mp3');
+    audioTrack2 = loadSound('tracks/audio2.mp3');
+    
+    // Note: Audio files must be loaded in preload() to ensure they're ready
+    // Modern browsers require user interaction before playing audio
+}
+
+// ==============================================
+// SETUP FUNCTION - Runs once when page loads
+// ==============================================
+// setup() runs once after preload() is complete
+// This is where we configure our canvas and initial settings
+function setup() 
+{
+    // Create a canvas that fills the entire screen
+    createCanvas(windowWidth, windowHeight);
+    
+    // Lock mobile gestures to prevent scrolling, zooming, etc.
+    lockGestures();
+    
+    // Enable audio playback on mobile devices
+    // This creates a tap-to-start overlay for iOS/mobile browsers
+    enableSoundTap();
+    
+    // Set the background to a dark color
+    background(50);
+    
+    // Set text properties for displaying instructions
+    textAlign(CENTER, CENTER);
+    textSize(16);
+    fill(255);
+    
+    // Set the volume of both audio tracks (0.0 to 1.0)
+    audioTrack1.setVolume(0.7);
+    audioTrack2.setVolume(0.7);
+    
+    // Set both tracks to loop continuously
+    audioTrack1.loop();
+    audioTrack2.loop();
+    // Pause them initially (they will start looped when played)
+    audioTrack1.pause();
+    audioTrack2.pause();
+    
+    // Create amplitude objects to analyze audio levels for both tracks
+    amplitude1 = new p5.Amplitude();
+    amplitude2 = new p5.Amplitude();
+    // Connect the amplitude analyzers to our audio tracks
+    amplitude1.setInput(audioTrack1);
+    amplitude2.setInput(audioTrack2);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously (like a loop)
+// ==============================================
+function draw() 
+{
+    // Clear the background each frame
+    background(50);
+    
+    // Draw the split screen zones
+    drawSplitScreen();
+    
+    // Show instruction text if audio context hasn't been started yet
+    // window.soundEnabled is set by enableSoundTap() after user interaction
+    if (!window.soundEnabled) 
+    {
+        fill(255, 255, 0); // yellow text
+        textSize(24);
+        text("Touch anywhere to start", width/2, height/2);
+        return; // don't draw anything else until audio is started
+    }
+    
+    // Draw audio visualizers once sound is enabled
+    drawVisualizers();
+}
+
+// ==============================================
+// HELPER FUNCTIONS
+// ==============================================
+
+function drawSplitScreen() 
+{
+    // Top half - Audio 1 zone (light blue)
+    noStroke();
+    fill(150, 200, 255);
+    rect(0, 0, width, height/2);
+    
+    // Bottom half - Audio 2 zone (light green)
+    fill(150, 255, 200);
+    rect(0, height/2, width, height/2);
+    
+    // Draw a horizontal line to divide the canvas in half
+    stroke(255);
+    strokeWeight(2);
+    line(0, height/2, width, height/2);
+    noStroke();
+    
+    // Draw labels if audio has been enabled
+    if (window.soundEnabled) 
+    {
+        fill(50);
+        textSize(20);
+        text("AUDIO 1", width/2, height/4 - 60);
+        text("Touch & hold to play", width/2, height/4 - 35);
+        
+        text("AUDIO 2", width/2, (height/4) * 3 - 60);
+        text("Touch & hold to play", width/2, (height/4) * 3 - 35);
+    }
+}
+
+function drawVisualizers() 
+{
+    // Visual audio level feedback for track 1
+    if (audioTrack1.isPlaying()) 
+    {
+        let level1 = amplitude1.getLevel();
+        let circleSize1 = map(level1, 0, 0.3, 30, 200);
+        fill(255, 150, 100, 200); // Orange, semi-transparent
+        noStroke();
+        ellipse(width/2, height/4, circleSize1, circleSize1);
+    }
+    
+    // Visual audio level feedback for track 2
+    if (audioTrack2.isPlaying()) 
+    {
+        let level2 = amplitude2.getLevel();
+        let circleSize2 = map(level2, 0, 0.3, 30, 200);
+        fill(255, 100, 200, 200); // Magenta, semi-transparent
+        noStroke();
+        ellipse(width/2, 3*height/4, circleSize2, circleSize2);
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// touchStarted() runs when a touch begins
+// This function starts playing audio based on which zone is touched
+function touchStarted() 
+{
+    // Only process if sound system is enabled
+    if (!window.soundEnabled) 
+    {
+        return false;
+    }
+    
+    // Get the first touch point
+    if (touches.length > 0) 
+    {
+        let touchY = touches[0].y;
+        
+        // Check if touch is in top half (Audio 1 zone)
+        if (touchY < height/2) 
+        {
+            if (!audioTrack1.isPlaying()) 
+            {
+                audioTrack1.play();
+            }
+        }
+        // Check if touch is in bottom half (Audio 2 zone)
+        else 
+        {
+            if (!audioTrack2.isPlaying()) 
+            {
+                audioTrack2.play();
+            }
+        }
+    }
+    
+    // Prevent default touch behavior
+    return false;
+}
+
+// touchEnded() runs when a touch is released
+// This function stops the audio when touch is released
+function touchEnded() 
+{
+    // Only process if sound system is enabled
+    if (window.soundEnabled) 
+    {
+        // Pause both audio tracks when touch is released
+        audioTrack1.pause();
+        audioTrack2.pause();
+    }
+    
+    // Prevent default touch behavior
+    return false;
+}
+

package/examples/Phone Sensor Examples/sound/02_volume_touches/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>Touch Volume - 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>

package/examples/Phone Sensor Examples/sound/02_volume_touches/sketch.js

@@ -0,0 +1,269 @@
+// ==============================================
+// VOLUME BY TOUCHES EXAMPLE
+// ==============================================
+// This example demonstrates controlling audio volume
+// based on the number of simultaneous touches
+// 
+// CONCEPTS COVERED:
+// - Audio playback on mobile (enableSoundTap)
+// - Loading audio files
+// - Multi-touch detection (touches.length)
+// - Dynamic volume control based on touch count
+// - Audio visualization with amplitude
+// - Mobile gesture locking
+// ==============================================
+
+// Global variables to store our audio file
+let audioTrack;
+
+// Global variable for audio level detection
+// Amplitude analyzes the volume level of audio in real-time
+let amplitude;
+
+// Maximum number of touches to detect (for volume control)
+const MAX_TOUCHES = 5;
+
+// ==============================================
+// PRELOAD FUNCTION - Runs before setup
+// ==============================================
+function preload() 
+{
+    // Load the audio file from the tracks folder
+    // The path is relative to where our HTML file is located
+    audioTrack = loadSound('tracks/audio1.mp3');
+}
+
+// ==============================================
+// 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 audio playback on mobile devices
+    // This creates a tap-to-start overlay for iOS/mobile browsers
+    enableSoundTap();
+    
+    // Set the background to a dark color
+    background(30);
+    
+    // Set text properties for displaying instructions
+    textAlign(CENTER, CENTER);
+    textSize(16);
+    fill(255);
+    
+    // Set the audio track to loop continuously
+    audioTrack.loop();
+    // Pause it initially (will start when touched)
+    audioTrack.pause();
+    
+    // Create amplitude object to analyze audio level
+    amplitude = new p5.Amplitude();
+    // Connect the amplitude analyzer to our audio track
+    amplitude.setInput(audioTrack);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously (like a loop)
+// ==============================================
+function draw() 
+{
+    // Clear the background each frame with a gradient effect
+    background(30, 20, 50);
+    
+    // Show instruction text if audio hasn't been started yet
+    if (!window.soundEnabled) 
+    {
+        fill(255, 200, 100);
+        textSize(24);
+        text("Touch anywhere to start", width/2, height/2 - 40);
+        textSize(18);
+        text("Use 1-5 fingers to control volume", width/2, height/2 + 10);
+        return; // don't draw anything else until audio is started
+    }
+    
+    // Draw instructions at the top
+    fill(200, 200, 255);
+    textSize(16);
+    text("Touch & hold with 1-5 fingers to play", width/2, 30);
+    text("More fingers = Higher volume", width/2, 55);
+    
+    // Draw visualizer and touch feedback
+    drawVisualizer();
+    drawTouchInfo();
+}
+
+// ==============================================
+// HELPER FUNCTIONS
+// ==============================================
+
+function drawVisualizer() 
+{
+    // Only draw visualizer if audio is playing
+    if (audioTrack.isPlaying()) 
+    {
+        // Get the current audio level
+        let level = amplitude.getLevel();
+        
+        // Map the level to a circle size (30 to 400 pixels)
+        let circleSize = map(level, 0, 0.5, 30, 400);
+        
+        // Create a color that changes with the number of touches
+        let numTouches = min(touches.length, MAX_TOUCHES);
+        let hue = map(numTouches, 0, MAX_TOUCHES, 180, 300); // Blue to purple
+        
+        // Draw the main visualizer circle
+        push();
+        colorMode(HSB);
+        fill(hue, 80, 100, 0.7); // Semi-transparent
+        noStroke();
+        circle(width/2, height/2, circleSize);
+        
+        // Draw a smaller inner circle
+        fill(hue, 60, 100, 0.9);
+        circle(width/2, height/2, circleSize * 0.5);
+        pop();
+    }
+}
+
+function drawTouchInfo() 
+{
+    // Display current number of touches and volume level
+    if (window.soundEnabled) 
+    {
+        let numTouches = touches.length;
+        let volume = audioTrack.getVolume();
+        
+        fill(255);
+        textSize(20);
+        text("Touches: " + numTouches, width/2, height - 80);
+        
+        textSize(18);
+        text("Volume: " + (volume * 100).toFixed(0) + "%", width/2, height - 50);
+        
+        // Draw visual indicators for each possible touch
+        drawTouchIndicators(numTouches);
+    }
+}
+
+function drawTouchIndicators(currentTouches) 
+{
+    // Draw 5 circles representing the maximum touch count
+    let spacing = 50;
+    let startX = width/2 - (spacing * 2);
+    let y = height - 120;
+    
+    for (let i = 0; i < MAX_TOUCHES; i++) 
+    {
+        let x = startX + (i * spacing);
+        
+        push();
+        if (i < currentTouches) 
+        {
+            // Active touch - filled circle
+            fill(100, 200, 255);
+            stroke(255);
+        } 
+        else 
+        {
+            // Inactive touch - outline only
+            noFill();
+            stroke(100);
+        }
+        strokeWeight(2);
+        circle(x, y, 30);
+        
+        // Draw finger number
+        if (i < currentTouches) 
+        {
+            fill(255);
+            noStroke();
+            textSize(14);
+            text(i + 1, x, y);
+        }
+        pop();
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// touchStarted() runs when a touch begins
+function touchStarted() 
+{
+    // Only process if sound system is enabled
+    if (!window.soundEnabled) 
+    {
+        return false;
+    }
+    
+    // Start playing the audio if it's not already playing
+    if (!audioTrack.isPlaying()) 
+    {
+        audioTrack.play();
+    }
+    
+    // Update volume based on number of touches
+    updateVolume();
+    
+    // Prevent default touch behavior
+    return false;
+}
+
+// touchMoved() runs continuously while touches are moving
+function touchMoved() 
+{
+    // Update volume as touches are added or removed
+    if (window.soundEnabled) 
+    {
+        updateVolume();
+    }
+    
+    // Prevent default touch behavior
+    return false;
+}
+
+// touchEnded() runs when a touch is released
+function touchEnded() 
+{
+    // If no more touches, pause the audio
+    if (window.soundEnabled && touches.length === 0) 
+    {
+        audioTrack.pause();
+    }
+    
+    // Prevent default touch behavior
+    return false;
+}
+
+// ==============================================
+// VOLUME CONTROL FUNCTION
+// ==============================================
+
+function updateVolume() 
+{
+    // Get the number of current touches (capped at MAX_TOUCHES)
+    let numTouches = min(touches.length, MAX_TOUCHES);
+    
+    // Map number of touches (1-5) to volume (0.2 to 1.0)
+    // This ensures there's always some volume with 1 touch
+    let volume = map(numTouches, 1, MAX_TOUCHES, 0.2, 1.0);
+    
+    // Set the audio volume
+    audioTrack.setVolume(volume);
+}
+
+// ==============================================
+// RESPONSIVE CANVAS
+// ==============================================
+
+// Resize canvas when window size changes
+function windowResized() 
+{
+    resizeCanvas(windowWidth, windowHeight);
+}

package/examples/Phone Sensor Examples/touch/01_touch_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 Touch Detection - 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/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>

package/examples/Phone Sensor Examples/touch/01_touch_basic/sketch.js

@@ -0,0 +1,94 @@
+// ==============================================
+// BASIC TOUCH DETECTION EXAMPLE
+// ==============================================
+// This example shows how to detect when the user
+// is touching the screen and display appropriate text
+// 
+//  CONCEPTS COVERED:
+// - Touch detection (touchStarted, touchEnded)
+// - Visual feedback based on user interaction
+// - Basic p5.js setup and draw functions
+// - Mobile gesture locking
+// ==============================================
+
+// Variables to store our current state
+let isCurrentlyTouching = false;  // Track if screen is being touched
+let touchCounter = 0;             // Count how many times screen has been touched
+let textColor;                    // Color of the text
+let touchStartTime = 0;           // When the current touch started (in milliseconds)
+let touchDuration = 0;            // How long the current touch has been active (in seconds)
+
+// ==============================================
+// SETUP FUNCTION - Runs once when page loads
+// ==============================================
+function setup() {
+    // Create a canvas that fills the entire screen
+    // windowWidth and windowHeight are p5.js variables for screen size
+    createCanvas(windowWidth, windowHeight);
+    
+    // Lock mobile gestures to prevent scrolling, zooming, etc.
+    // This function comes from the mobile-p5-permissions library
+    lockGestures();
+    
+    // Set initial text properties
+    textAlign(CENTER, CENTER);  // Center the text horizontally and vertically
+    textSize(48);               // Make text large enough to read on mobile
+    
+    // Set initial colors
+    textColor = color(50, 50, 50);  // Dark gray text
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously (like a loop)
+// ==============================================
+function draw() 
+{
+    background(200, 255, 200);
+    
+    
+    // Clear the screen each frame
+    // Change background color based on touch state
+    if (isCurrentlyTouching) 
+    {
+        touchDuration = (millis() - touchStartTime) / 1000;  // Convert to seconds
+        text("TOUCHED",width/2,height/2);
+        
+        // Display the touch duration
+        textSize(24);
+        text("Touch Time: " + touchDuration.toFixed(1) + "s", width/2, height/2 + 60);
+        textSize(48);  // Reset to original size
+    } 
+    else 
+    {
+        text("NOT TOUCHED",width/2,height/2); 
+    }
+    
+    // Show the touch counter at the top of the screen
+    textSize(32);  // Smaller text for the counter
+    text("Touch Count: " + touchCounter, width/2, 60);
+    textSize(48);  // Reset to original size
+
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// This function runs when a touch begins (finger touches screen)
+function touchStarted() 
+{
+    isCurrentlyTouching = true;
+    touchCounter = touchCounter + 1;  // Add 1 to our counter each time screen is touched
+    touchStartTime = millis();        // Record when this touch started
+
+    return false;
+}
+
+// This function runs when a touch ends (finger lifts off screen)
+function touchEnded() 
+{
+    isCurrentlyTouching = false;
+
+    return false;
+}
+

package/examples/Phone Sensor Examples/touch/02_touch_zones/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>Touch Zones - 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/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>