p5-phone 1.4.4

package/examples/Phone Sensor Examples/touch/02_touch_zones/sketch.js

@@ -0,0 +1,220 @@
+// ==============================================
+// TOUCH ZONES EXAMPLE
+// ==============================================
+// This example splits the screen into 4 zones
+// Each zone detects touches and counts them separately
+// 
+// CONCEPTS COVERED:
+// - Touch position detection
+// - Zone-based interaction
+// - Multiple counters
+// - Conditional logic for zones
+// ==============================================
+
+// Variables for each zone's state
+let zone1Touched = false;  // Top-left zone
+let zone2Touched = false;  // Top-right zone
+let zone3Touched = false;  // Bottom-left zone
+let zone4Touched = false;  // Bottom-right zone
+
+// Counter for each zone
+let zone1Counter = 0;
+let zone2Counter = 0;
+let zone3Counter = 0;
+let zone4Counter = 0;
+
+// ==============================================
+// 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();
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(24);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    background(240, 240, 240);  // Light gray background
+    
+    // Draw lines to divide screen into 4 zones
+    stroke(100, 100, 100);  // Gray lines
+    strokeWeight(2);
+    
+    // Vertical line (middle of screen)
+    line(width/2, 0, width/2, height);
+    // Horizontal line (middle of screen)
+    line(0, height/2, width, height/2);
+    
+    // ==============================================
+    // ZONE 1 - TOP LEFT
+    // ==============================================
+    if (zone1Touched) 
+    {
+        fill(200, 255, 200);  // Light green when touched
+        rect(0, 0, width/2, height/2);
+        fill(0, 100, 0);  // Dark green text
+        text("TOUCHED", width/4, height/4 - 20);
+    } 
+    else 
+    {
+        fill(255, 255, 255);  // White when not touched
+        rect(0, 0, width/2, height/2);
+        fill(100, 100, 100);  // Gray text
+        text("NOT TOUCHED", width/4, height/4 - 20);
+    }
+    fill(50, 50, 50);  // Dark text for counter
+    text("Count: " + zone1Counter, width/4, height/4 + 20);
+    
+    // ==============================================
+    // ZONE 2 - TOP RIGHT
+    // ==============================================
+    if (zone2Touched) 
+    {
+        fill(255, 200, 200);  // Light red when touched
+        rect(width/2, 0, width/2, height/2);
+        fill(150, 0, 0);  // Dark red text
+        text("TOUCHED", width/2 + width/4, height/4 - 20);
+    } 
+    else 
+    {
+        fill(255, 255, 255);  // White when not touched
+        rect(width/2, 0, width/2, height/2);
+        fill(100, 100, 100);  // Gray text
+        text("NOT TOUCHED", width/2 + width/4, height/4 - 20);
+    }
+    fill(50, 50, 50);  // Dark text for counter
+    text("Count: " + zone2Counter, width/2 + width/4, height/4 + 20);
+    
+    // ==============================================
+    // ZONE 3 - BOTTOM LEFT
+    // ==============================================
+    if (zone3Touched) 
+    {
+        fill(200, 200, 255);  // Light blue when touched
+        rect(0, height/2, width/2, height/2);
+        fill(0, 0, 150);  // Dark blue text
+        text("TOUCHED", width/4, height/2 + height/4 - 20);
+    } 
+    else 
+    {
+        fill(255, 255, 255);  // White when not touched
+        rect(0, height/2, width/2, height/2);
+        fill(100, 100, 100);  // Gray text
+        text("NOT TOUCHED", width/4, height/2 + height/4 - 20);
+    }
+    fill(50, 50, 50);  // Dark text for counter
+    text("Count: " + zone3Counter, width/4, height/2 + height/4 + 20);
+    
+    // ==============================================
+    // ZONE 4 - BOTTOM RIGHT
+    // ==============================================
+    if (zone4Touched) 
+    {
+        fill(255, 255, 200);  // Light yellow when touched
+        rect(width/2, height/2, width/2, height/2);
+        fill(150, 150, 0);  // Dark yellow text
+        text("TOUCHED", width/2 + width/4, height/2 + height/4 - 20);
+    } 
+    else 
+    {
+        fill(255, 255, 255);  // White when not touched
+        rect(width/2, height/2, width/2, height/2);
+        fill(100, 100, 100);  // Gray text
+        text("NOT TOUCHED", width/2 + width/4, height/2 + height/4 - 20);
+    }
+    fill(50, 50, 50);  // Dark text for counter
+    text("Count: " + zone4Counter, width/2 + width/4, height/2 + height/4 + 20);
+}
+
+// ==============================================
+// HELPER FUNCTION - Which zone was touched?
+// ==============================================
+function getZone(x, y) 
+{
+    // This function takes an x and y position and figures out
+    // which of the 4 zones that position falls into
+    
+    // Set the division points - these variables make it easy to change later
+    let xDivision = width / 2;   // Where to split left/right (middle of screen)
+    let yDivision = height / 2;  // Where to split top/bottom (middle of screen)
+    
+    // We divide the screen into 4 equal rectangles:
+    // - Left half vs Right half (check if x < xDivision)
+    // - Top half vs Bottom half (check if y < yDivision)
+    
+    // Check if touch is in the LEFT half of screen
+    if (x < xDivision && y < yDivision) 
+    {
+        return 1;  // Top-left zone
+    } 
+    else if (x >= xDivision && y < yDivision) 
+    {
+        return 2;  // Top-right zone (x is >= middle, y is < middle)
+    } 
+    else if (x < xDivision && y >= yDivision) 
+    {
+        return 3;  // Bottom-left zone (x is < middle, y is >= middle)
+    } 
+    else 
+    {
+        return 4;  // Bottom-right zone (everything else)
+    }
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// This function runs when a touch begins
+function touchStarted() 
+{
+    // Find out which zone was touched
+    let touchedZone = getZone(touches[0].x, touches[0].y);
+    
+    // Update the correct zone
+    if (touchedZone == 1) 
+    {
+        zone1Touched = true;
+        zone1Counter = zone1Counter + 1;
+    } 
+    else if (touchedZone == 2) 
+    {
+        zone2Touched = true;
+        zone2Counter = zone2Counter + 1;
+    } 
+    else if (touchedZone == 3) 
+    {
+        zone3Touched = true;
+        zone3Counter = zone3Counter + 1;
+    } 
+    else if (touchedZone == 4) 
+    {
+        zone4Touched = true;
+        zone4Counter = zone4Counter + 1;
+    }
+    
+    return false;  // Prevent default browser behavior
+}
+
+// This function runs when a touch ends
+function touchEnded() 
+{
+    // Reset all zones to not touched
+    zone1Touched = false;
+    zone2Touched = false;
+    zone3Touched = false;
+    zone4Touched = false;
+    
+    return false;
+}
+

package/examples/Phone Sensor Examples/touch/03_touch_count/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 Count - 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/03_touch_count/sketch.js

@@ -0,0 +1,93 @@
+// ==============================================
+// TOUCH COUNT EXAMPLE
+// ==============================================
+// This example counts how many fingers are
+// currently touching the screen at the same time
+// 
+// CONCEPTS COVERED:
+// - Multi-touch detection
+// - touches array
+// - Real-time touch counting
+// - Simple display of numbers
+// 
+// HARDWARE LIMITATIONS:
+// - iPhone: Usually max 5 simultaneous touches
+// - iPad: Usually max 10-11 simultaneous touches  
+// - Android: Varies by device (typically 5-10)
+
+// ==============================================
+
+// Variables to store touch information
+let currentTouchCount = 0;    // How many fingers are touching right now
+let previousTouchCount = 0;   // Previous number of touches to detect changes
+let backgroundColor = [255, 255, 255];  // Current background color [red, green, blue]
+
+// ==============================================
+// 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();
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(48);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    // Always check the actual number of current touches for accuracy
+    currentTouchCount = touches.length;
+    
+    // Check if the number of touches has changed
+    if (currentTouchCount != previousTouchCount) 
+    {
+        // Generate a new random background color
+        backgroundColor[0] = random(150, 255);  // Red component
+        backgroundColor[1] = random(150, 255);  // Green component  
+        backgroundColor[2] = random(150, 255);  // Blue component
+        
+        // Update previous count to current count
+        previousTouchCount = currentTouchCount;
+    }
+    
+    // Use the stored background color
+    background(backgroundColor[0], backgroundColor[1], backgroundColor[2]);
+    
+    // Display current touch count (big number in center)
+    fill(50, 50, 50);
+    textSize(120);
+    text(currentTouchCount, width/2, height/2);
+    
+    // Display label
+    textSize(32);
+    text("Current Touches", width/2, height/2 + 100);
+    
+
+}
+
+// ==============================================
+// TOUCH EVENT FUNCTIONS
+// ==============================================
+
+// This function runs when a new touch begins
+function touchStarted() 
+{
+    // Touch count will be updated in draw() function
+    return false;
+}
+
+// This function runs when a touch ends
+function touchEnded() 
+{
+    // Touch count will be updated in draw() function  
+    return false;
+}
+

package/examples/Phone Sensor Examples/touch/04_touch_distance/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 Distance - 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/04_touch_distance/sketch.js

@@ -0,0 +1,120 @@
+// ==============================================
+// TOUCH DISTANCE EXAMPLE
+// ==============================================
+// This example measures the distance between
+// the first 2 touches and displays the line
+// with coordinates and distance
+// 
+// CONCEPTS COVERED:
+// - Multi-touch detection
+// - Distance calculation using dist() function
+// - Drawing lines between points
+// - Displaying coordinates
+// - Math.round() for cleaner numbers
+// ==============================================
+
+// Variables to store touch information
+let touch1X = 0;      // X position of first touch
+let touch1Y = 0;      // Y position of first touch
+let touch2X = 0;      // X position of second touch
+let touch2Y = 0;      // Y position of second touch
+let touchDistance = 0; // Distance between the two touches
+
+
+// ==============================================
+// 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();
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(24);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    // Clear the screen
+    background(240, 240, 240);
+    
+    // Check if we have at least 2 touches
+    if (touches.length >= 2) 
+    {
+
+        
+        // Get the positions of the first 2 touches
+        touch1X = touches[0].x;
+        touch1Y = touches[0].y;
+        touch2X = touches[1].x;
+        touch2Y = touches[1].y;
+        
+        // Calculate distance between the two touches
+        touchDistance = dist(touch1X, touch1Y, touch2X, touch2Y);
+        
+        // Draw a line between the two touches
+        stroke(100, 100, 100);
+        strokeWeight(3);
+        line(touch1X, touch1Y, touch2X, touch2Y);
+        
+        // Draw circles at each touch point
+        fill(255, 0, 0);  // Red circles
+        noStroke();
+        circle(touch1X, touch1Y, 30);
+        circle(touch2X, touch2Y, 30);
+        
+        // Draw distance text in the middle of the line
+        let midX = (touch1X + touch2X) / 2;
+        let midY = (touch1Y + touch2Y) / 2;
+        
+        fill(0, 0, 0);  // Black text
+        textSize(20);
+        text(Math.round(touchDistance) + " pixels", midX, midY - 30);
+        
+        // Display coordinates at the top of screen
+        textAlign(LEFT, TOP);
+        textSize(18);
+        text("Touch 1: (" + Math.round(touch1X) + ", " + Math.round(touch1Y) + ")", 20, 20);
+        text("Touch 2: (" + Math.round(touch2X) + ", " + Math.round(touch2Y) + ")", 20, 50);
+        text("Distance: " + Math.round(touchDistance) + " pixels", 20, 80);
+        
+    } 
+    else 
+    {
+        hasTwoTouches = false;
+        
+        // Instructions when not enough touches
+        textAlign(CENTER, CENTER);
+        textSize(32);
+        fill(100, 100, 100);
+        text("Touch 2 points on the screen", width/2, height/2);
+        
+
+    }
+}
+
+// ==============================================
+// 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/touch/05_touch_angle/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 Angle - 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/05_touch_angle/sketch.js

@@ -0,0 +1,117 @@
+// ==============================================
+// TOUCH ANGLE EXAMPLE
+// ==============================================
+// This example measures the angle between
+// the first 2 touches and displays the line
+// with coordinates and angle
+// 
+// CONCEPTS COVERED:
+// - Multi-touch detection
+// - Angle calculation using atan2() function
+// - Converting radians to degrees
+// - Drawing lines between points
+// - Displaying coordinates
+// - Math.round() for cleaner numbers
+// ==============================================
+
+// Variables to store touch information
+let touch1X = 0;      // X position of first touch
+let touch1Y = 0;      // Y position of first touch
+let touch2X = 0;      // X position of second touch
+let touch2Y = 0;      // Y position of second touch
+let touchAngle = 0;   // Angle between the two touches (in degrees)
+
+// ==============================================
+// 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();
+    
+    // Set text properties
+    textAlign(CENTER, CENTER);
+    textSize(24);
+}
+
+// ==============================================
+// DRAW FUNCTION - Runs continuously
+// ==============================================
+function draw() 
+{
+    // Clear the screen
+    background(240, 240, 240);
+    
+    // Check if we have at least 2 touches
+    if (touches.length >= 2) 
+    {
+        // Get the positions of the first 2 touches
+        touch1X = touches[0].x;
+        touch1Y = touches[0].y;
+        touch2X = touches[1].x;
+        touch2Y = touches[1].y;
+        
+        // Calculate angle between the two touches
+        // atan2 gives us the angle in radians, so we convert to degrees
+        let angleInRadians = atan2(touch2Y - touch1Y, touch2X - touch1X);
+        touchAngle = degrees(angleInRadians);  // Convert to degrees
+        
+        // Draw a line between the two touches
+        stroke(100, 100, 100);
+        strokeWeight(3);
+        line(touch1X, touch1Y, touch2X, touch2Y);
+        
+        // Draw circles at each touch point
+        fill(255, 0, 0);  // Red circles
+        noStroke();
+        circle(touch1X, touch1Y, 30);
+        circle(touch2X, touch2Y, 30);
+        
+        // Draw angle text in the middle of the line
+        let midX = (touch1X + touch2X) / 2;
+        let midY = (touch1Y + touch2Y) / 2;
+        
+        fill(0, 0, 0);  // Black text
+        textSize(20);
+        text(Math.round(touchAngle) + "°", midX, midY - 30);
+        
+        // Display coordinates and angle at the top of screen
+        textAlign(LEFT, TOP);
+        textSize(18);
+        text("Touch 1: (" + Math.round(touch1X) + ", " + Math.round(touch1Y) + ")", 20, 20);
+        text("Touch 2: (" + Math.round(touch2X) + ", " + Math.round(touch2Y) + ")", 20, 50);
+        text("Angle: " + Math.round(touchAngle) + "° (degrees)", 20, 80);
+        
+    } 
+    else 
+    {
+        // Instructions when not enough touches
+        textAlign(CENTER, CENTER);
+        textSize(32);
+        fill(100, 100, 100);
+        text("Touch 2 points on the screen", width/2, height/2);
+    }
+}
+
+// ==============================================
+// 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 - Minimal/microphone/01_mic_level/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Mic Level (Minimal)</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>