npm - p5-phone - Versions diffs - 1.4.4 - Mend

p5-phone 1.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/examples/Phone Sensor Examples - Minimal/microphone/01_mic_level/sketch.js ADDED Viewed

@@ -0,0 +1,72 @@
+// MINIMAL VERSION - Mic Level
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Reading microphone input level with threshold detection
+// Global variables for microphone
+let mic;
+let micLevel = 0;
+let micMultiplier = 3;  // Increase sensitivity
+let threshold = 0.3;    // Threshold for loud sound detection
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable microphone with tap permission
+    enableMicTap();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Mic Level - Minimal Version");
+    debug("Tap to enable microphone");
+    debug("Threshold: " + threshold);
+    debug("Waiting for microphone...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Check if microphone is enabled
+    if (mic && mic.enabled)
+    {
+        // Get current microphone level (0.0 to 1.0)
+        micLevel = mic.getLevel() * micMultiplier;
+        // Constrain to 0-1 range
+        micLevel = constrain(micLevel, 0, 1);
+        // Output to debug panel
+        debug("--- Microphone Level ---");
+        debug("Raw Level: " + nf(micLevel, 1, 3));
+        debug("Percentage: " + int(micLevel * 100) + "%");
+        // Check against threshold
+        if (micLevel > threshold)
+        {
+            debug("STATUS: LOUD! (Above threshold)");
+        }
+        else
+        {
+            debug("STATUS: Quiet (Below threshold)");
+        }
+        // Add visual bar representation using text
+        let barLength = int(micLevel * 20);
+        let bar = "";
+        for (let i = 0; i < barLength; i++)
+        {
+            bar = bar + "▮";
+        }
+        debug("Level: " + bar);
+    }
+    else
+    {
+        debug("Waiting for microphone permissions...");
+        debug("Tap the screen to enable microphone");
+    }
+}

package/examples/Phone Sensor Examples - Minimal/movement/01_orientation_basic/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Orientation Basic (Minimal)</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.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 - Minimal/movement/01_orientation_basic/sketch.js ADDED Viewed

@@ -0,0 +1,51 @@
+// MINIMAL VERSION - Orientation Basic
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Reading device orientation (rotationX, rotationY, rotationZ)
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable motion sensors with tap permission (iOS)
+    enableGyroTap();
+    // Lock mobile gestures
+    lockGestures();
+    // Set to show in Degrees
+    angleMode(DEGREES);
+    debug("Orientation Basic - Minimal Version");
+    debug("Tilt your device to see orientation values");
+    debug("Waiting for sensor data...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Check if motion sensors are enabled
+    if (window.sensorsEnabled)
+    {
+        // Get current orientation values
+        let rx = rotationX;
+        let ry = rotationY;
+        let rz = rotationZ;
+        // Output to debug panel
+        debug("--- Device Orientation ---");
+        debug("Rotation X (Tilt Forward/Back): " + int(rx) + "°");
+        debug("Rotation Y (Tilt Left/Right): " + int(ry) + "°");
+        debug("Rotation Z (Turn/Compass): " + int(rz) + "°");
+    }
+    else
+    {
+        debug("Waiting for sensor permissions...");
+        debug("Tap the screen to enable sensors");
+    }
+}

package/examples/Phone Sensor Examples - Minimal/movement/02_rotational_velocity/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Rotational Velocity (Minimal)</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.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 - Minimal/movement/02_rotational_velocity/sketch.js ADDED Viewed

@@ -0,0 +1,70 @@
+// MINIMAL VERSION - Rotational Velocity
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Calculating velocity of rotation by comparing current and previous rotation values
+// Global variables for tracking previous rotation
+let prevRotationX = 0;
+let prevRotationY = 0;
+let prevRotationZ = 0;
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable motion sensors with tap permission (iOS)
+    enableGyroTap();
+    // Lock mobile gestures
+    lockGestures();
+    // Set to show in Degrees
+    angleMode(DEGREES);
+    debug("Rotational Velocity - Minimal Version");
+    debug("Move your device quickly to see velocity");
+    debug("Waiting for sensor data...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Check if motion sensors are enabled
+    if (window.sensorsEnabled)
+    {
+        // Get current rotation values
+        let currentX = rotationX;
+        let currentY = rotationY;
+        let currentZ = rotationZ;
+        // Calculate velocity (change since last frame)
+        let velocityX = currentX - prevRotationX;
+        let velocityY = currentY - prevRotationY;
+        let velocityZ = currentZ - prevRotationZ;
+        // Calculate total velocity magnitude
+        let totalVelocity = sqrt(velocityX * velocityX + velocityY * velocityY + velocityZ * velocityZ);
+        // Output to debug panel
+        debug("--- Rotational Velocity ---");
+        debug("Velocity X: " + nf(velocityX, 1, 2) + "°/frame");
+        debug("Velocity Y: " + nf(velocityY, 1, 2) + "°/frame");
+        debug("Velocity Z: " + nf(velocityZ, 1, 2) + "°/frame");
+        debug("Total Velocity: " + nf(totalVelocity, 1, 2) + "°/frame");
+        // Store current rotation for next frame
+        prevRotationX = currentX;
+        prevRotationY = currentY;
+        prevRotationZ = currentZ;
+    }
+    else
+    {
+        debug("Waiting for sensor permissions...");
+        debug("Tap the screen to enable sensors");
+    }
+}

package/examples/Phone Sensor Examples - Minimal/movement/03_acceleration/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Acceleration (Minimal)</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.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 - Minimal/movement/03_acceleration/sketch.js ADDED Viewed

@@ -0,0 +1,83 @@
+// MINIMAL VERSION - Acceleration
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Reading device acceleration (accelerationX, accelerationY, accelerationZ)
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable motion sensors with tap permission (iOS)
+    enableGyroTap();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Acceleration - Minimal Version");
+    debug("Move your device to see acceleration values");
+    debug("Waiting for sensor data...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Check if motion sensors are enabled
+    if (window.sensorsEnabled)
+    {
+        // Get current acceleration values
+        let ax = accelerationX;
+        let ay = accelerationY;
+        let az = accelerationZ;
+        // Calculate total acceleration magnitude
+        let totalAccel = sqrt(ax * ax + ay * ay + az * az);
+        // Output to debug panel
+        debug("--- Device Acceleration ---");
+        debug("Acceleration X: " + nf(ax, 1, 2));
+        debug("Acceleration Y: " + nf(ay, 1, 2));
+        debug("Acceleration Z: " + nf(az, 1, 2));
+        debug("Total Magnitude: " + nf(totalAccel, 1, 2));
+        // Add movement indicators
+        if (totalAccel > 5)
+        {
+            debug("MOVING FAST!");
+        }
+        else if (totalAccel > 2)
+        {
+            debug("Moving moderately");
+        }
+        else if (totalAccel > 0.5)
+        {
+            debug("Gentle movement");
+        }
+        else
+        {
+            debug("Still or very slow");
+        }
+        // Show dominant direction
+        let maxVal = max(abs(ax), abs(ay), abs(az));
+        if (maxVal === abs(ax))
+        {
+            debug("Dominant axis: X " + (ax > 0 ? "(Right)" : "(Left)"));
+        }
+        else if (maxVal === abs(ay))
+        {
+            debug("Dominant axis: Y " + (ay > 0 ? "(Forward)" : "(Backward)"));
+        }
+        else
+        {
+            debug("Dominant axis: Z " + (az > 0 ? "(Up)" : "(Down)"));
+        }
+    }
+    else
+    {
+        debug("Waiting for sensor permissions...");
+        debug("Tap the screen to enable sensors");
+    }
+}

package/examples/Phone Sensor Examples - Minimal/sound/01_sound_basic/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Sound Basic (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>

package/examples/Phone Sensor Examples - Minimal/sound/01_sound_basic/sketch.js ADDED Viewed

@@ -0,0 +1,96 @@
+// MINIMAL VERSION - Sound Basic
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Loading and playing audio, touch to play/pause control
+// Global variables for audio
+let audioTrack;
+let isPlaying = false;
+let playCount = 0;
+function preload()
+{
+    // Load audio file
+    audioTrack = loadSound('tracks/audio1.mp3');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable sound with tap permission
+    enableSoundTap();
+    // Lock mobile gestures
+    lockGestures();
+    // Set audio to loop
+    audioTrack.loop();
+    audioTrack.pause();
+    debug("Sound Basic - Minimal Version");
+    debug("Touch to play/pause audio");
+    debug("Waiting for audio permissions...");
+}
+function draw()
+{
+    // Check if sound system is enabled
+    if (window.soundEnabled)
+    {
+        // Output audio state to debug panel
+        debug("--- Audio Status ---");
+        debug("Is Playing: " + audioTrack.isPlaying());
+        debug("Play Count: " + playCount);
+        debug("Current Time: " + audioTrack.currentTime().toFixed(2) + "s");
+        debug("Duration: " + audioTrack.duration().toFixed(2) + "s");
+        debug("Volume: " + int(audioTrack.getVolume() * 100) + "%");
+        if (audioTrack.isPlaying())
+        {
+            debug("STATUS: PLAYING ▶");
+        }
+        else
+        {
+            debug("STATUS: PAUSED ⏸");
+        }
+        debug("Touch anywhere to toggle play/pause");
+    }
+    else
+    {
+        debug("Waiting for audio permissions...");
+        debug("Touch the screen to enable audio");
+    }
+}
+// Toggle play/pause on touch
+function touchStarted()
+{
+    if (window.soundEnabled)
+    {
+        if (audioTrack.isPlaying())
+        {
+            audioTrack.pause();
+            isPlaying = false;
+            debug("--- Touch: PAUSED ---");
+        }
+        else
+        {
+            audioTrack.play();
+            isPlaying = true;
+            playCount = playCount + 1;
+            debug("--- Touch: PLAYING ---");
+        }
+    }
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior
+function touchEnded()
+{
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/sound/01_sound_basic/tracks/audio1.mp3 ADDED Viewed

Binary file

package/examples/Phone Sensor Examples - Minimal/sound/02_sound_amplitude/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Sound Amplitude (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>

package/examples/Phone Sensor Examples - Minimal/sound/02_sound_amplitude/sketch.js ADDED Viewed

@@ -0,0 +1,118 @@
+// MINIMAL VERSION - Sound Amplitude
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Reading audio amplitude levels in real-time with p5.Amplitude
+// Global variables for audio
+let audioTrack;
+let amplitude;
+let currentLevel = 0;
+let peakLevel = 0;
+let threshold = 0.2;  // Threshold for "loud" detection
+function preload()
+{
+    // Load audio file
+    audioTrack = loadSound('tracks/audio1.mp3');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Enable sound with tap permission
+    enableSoundTap();
+    // Lock mobile gestures
+    lockGestures();
+    // Create amplitude analyzer
+    amplitude = new p5.Amplitude();
+    amplitude.setInput(audioTrack);
+    // Set audio to loop
+    audioTrack.loop();
+    audioTrack.pause();
+    debug("Sound Amplitude - Minimal Version");
+    debug("Touch & hold to play and analyze audio");
+    debug("Amplitude Threshold: " + threshold);
+}
+function draw()
+{
+    // Check if sound system is enabled
+    if (window.soundEnabled)
+    {
+        // Get current amplitude level
+        currentLevel = amplitude.getLevel();
+        // Track peak level
+        if (currentLevel > peakLevel)
+        {
+            peakLevel = currentLevel;
+        }
+        // Output amplitude data to debug panel
+        debug("--- Audio Amplitude ---");
+        debug("Is Playing: " + audioTrack.isPlaying());
+        debug("Current Level: " + nf(currentLevel, 1, 3));
+        debug("Peak Level: " + nf(peakLevel, 1, 3));
+        debug("Percentage: " + int(currentLevel * 100) + "%");
+        // Check against threshold
+        if (currentLevel > threshold)
+        {
+            debug("STATUS: LOUD! (Above threshold)");
+        }
+        else
+        {
+            debug("STATUS: Quiet (Below threshold)");
+        }
+        // Add visual bar representation using text
+        let barLength = int(currentLevel * 30);
+        let bar = "";
+        for (let i = 0; i < barLength; i++)
+        {
+            bar = bar + "▮";
+        }
+        debug("Level: " + bar);
+        debug("Touch & hold to play audio");
+    }
+    else
+    {
+        debug("Waiting for audio permissions...");
+        debug("Touch the screen to enable audio");
+    }
+}
+// Play audio when touched
+function touchStarted()
+{
+    if (window.soundEnabled)
+    {
+        if (!audioTrack.isPlaying())
+        {
+            audioTrack.play();
+            debug("--- Touch: PLAYING ---");
+        }
+    }
+    return false;  // Prevents default behavior
+}
+// Pause audio when touch ends
+function touchEnded()
+{
+    if (window.soundEnabled)
+    {
+        audioTrack.pause();
+        debug("--- Touch: PAUSED ---");
+    }
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/sound/02_sound_amplitude/tracks/audio1.mp3 ADDED Viewed

Binary file

package/examples/Phone Sensor Examples - Minimal/touch/01_touch_basic/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Basic (Minimal)</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.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 - Minimal/touch/01_touch_basic/sketch.js ADDED Viewed

@@ -0,0 +1,58 @@
+// MINIMAL VERSION - Touch Basic
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Basic touch detection, duration tracking, and touch counting
+// Global variables for touch state
+let isCurrentlyTouching = false;  // Track if screen is being touched
+let touchCounter = 0;             // Count total number of touches
+let touchStartTime = 0;           // When current touch started (milliseconds)
+let touchDuration = 0;            // How long current touch has been active (seconds)
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST to display all touch data
+    showDebug();
+    // Lock mobile gestures to prevent browser interference
+    lockGestures();
+    debug("Touch Basic - Minimal Version");
+    debug("Touch the screen to see data in this panel");
+}
+function draw()
+{
+    // Update touch duration while touching
+    if (isCurrentlyTouching)
+    {
+        touchDuration = (millis() - touchStartTime) / 1000;  // Convert to seconds
+    }
+}
+// Prevent default touch behavior and unwanted gestures
+function touchStarted()
+{
+    isCurrentlyTouching = true;
+    touchCounter = touchCounter + 1;
+    touchStartTime = millis();
+    // Output touch data to debug panel
+    debug("--- Touch Started ---");
+    debug("Touch Count: " + touchCounter);
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior and unwanted gestures
+function touchEnded()
+{
+    isCurrentlyTouching = false;
+    // Output final touch duration to debug panel
+    debug("Touch Duration: " + touchDuration.toFixed(2) + " seconds");
+    debug("--- Touch Ended ---");
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/touch/02_touch_zones/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Zones (Minimal)</title>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.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>