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 and Gif/fetch/sketch.js ADDED Viewed

@@ -0,0 +1,139 @@
+// Touch with GIF example
+// Demonstrates GIF moving toward touch points with rotation
+// Corgi fetches the ball wherever you touch
+// Global variables
+let corgiGif;
+let corgiX;
+let corgiY;
+let targetX;
+let targetY;
+let moveSpeed = 0.05; // Speed multiplier for movement (0.0 - 1.0)
+let corgiRotation = 0;
+let corgiScale = 1.2; // Size multiplier for corgi
+let touchCounter = 0;
+let backgroundColor;
+function preload()
+{
+    // Load the corgi swimming GIF
+    corgiGif = loadImage('gifs/corgiswimflip.gif');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    backgroundColor = color(200, 255, 200);
+    // Lock mobile gestures to prevent browser interference
+    lockGestures();
+    textAlign(CENTER, CENTER);
+    // Start corgi at center
+    corgiX = width / 2;
+    corgiY = height / 2;
+    targetX = corgiX;
+    targetY = corgiY;
+}
+function draw()
+{
+    background(backgroundColor);
+    // Calculate angle to target
+    let angleToTarget = atan2(targetY - corgiY, targetX - corgiX);
+    // Smoothly move corgi toward target position
+    corgiX = lerp(corgiX, targetX, moveSpeed);
+    corgiY = lerp(corgiY, targetY, moveSpeed);
+    // Smoothly rotate toward movement direction
+    corgiRotation = angleToTarget;
+    // Display GIF with rotation and scale
+    push();
+    translate(corgiX, corgiY);
+    rotate(corgiRotation);
+    imageMode(CENTER);
+    image(corgiGif, 0, 0, 200 * corgiScale, 200 * corgiScale);
+    pop();
+    // Draw ball (target point) when different from current position
+    let distance = dist(corgiX, corgiY, targetX, targetY);
+    if (distance > 5)
+    {
+        // Corgi is moving - play the GIF
+        corgiGif.play();
+        // Draw ball
+        fill(255, 200, 50);
+        stroke(200, 150, 0);
+        strokeWeight(3);
+        circle(targetX, targetY, 30);
+        // Add shine to ball
+        fill(255, 255, 200, 150);
+        noStroke();
+        circle(targetX - 5, targetY - 5, 12);
+    }
+    else
+    {
+        // Ball caught! Pause the GIF and show celebration
+        corgiGif.pause();
+        fill(100, 255, 100);
+        noStroke();
+        textSize(32);
+        text("BALL CAUGHT!", width/2, 100);
+    }
+    // Display information
+    fill(50);
+    textSize(24);
+    text("Fetches: " + touchCounter, width/2, 40);
+    // Instructions
+    textSize(20);
+    fill(100);
+    text("Touch to throw the ball!", width/2, height - 30);
+}
+function touchStarted()
+{
+    touchCounter = touchCounter + 1;
+    // Set new target position
+    if (touches.length > 0)
+    {
+        targetX = touches[0].x;
+        targetY = touches[0].y;
+    }
+    // Start playing the GIF when new target is set
+    corgiGif.play();
+    return false;
+}
+function touchMoved()
+{
+    // Update target as touch moves
+    if (touches.length > 0)
+    {
+        targetX = touches[0].x;
+        targetY = touches[0].y;
+    }
+    return false;
+}
+function touchEnded()
+{
+    return false;
+}
+function windowResized()
+{
+    resizeCanvas(windowWidth, windowHeight);
+}

Gif/fly/gifs/comparison.gif ADDED Viewed

Binary file

package/examples/Phone and Gif/fly/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Fly Control</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 and Gif/fly/sketch.js ADDED Viewed

@@ -0,0 +1,103 @@
+// Fly control example
+// Demonstrates using device acceleration (accelerationY) to control GIF playback speed
+// Move phone up/down to simulate airplane motion and control cloud speed
+// Global variables
+let airplaneGif;
+let playbackSpeed = 1.0; // Speed multiplier for GIF playback
+let backgroundColor;
+// Mapping variables - easy to adjust
+let speedMultiplier = 3.0; // How much speed per unit of acceleration
+let maxSpeed = 270.0; // Maximum playback speed
+let minSpeedToPlay = 0.25; // Minimum speed before pausing
+let movementThreshold = 0.1; // Minimum acceleration needed to play (below this = paused)
+function preload()
+{
+    // Load the airplane window GIF
+    airplaneGif = loadImage('gifs/comparison.gif');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    backgroundColor = color(200, 220, 255);
+    // Lock mobile gestures to prevent browser interference
+    lockGestures();
+    textAlign(CENTER, CENTER);
+    // Request permission for motion sensors on iOS
+    enableGyroTap();
+}
+function draw()
+{
+    background(backgroundColor);
+    // Check if motion sensors are available
+    if (window.sensorsEnabled)
+    {
+        // Map absolute value of accelerationY to playback speed
+        // When still (accelerationY = 0), speed is low/paused
+        // As you move phone up/down, speed increases
+        let moveAmount = abs(accelerationY);
+        // Check if movement is below threshold
+        if (moveAmount < movementThreshold)
+        {
+            // Below threshold - pause the GIF
+            airplaneGif.pause();
+            playbackSpeed = 0;
+        }
+        else
+        {
+            // Above threshold - calculate and set playback speed
+            playbackSpeed = moveAmount * speedMultiplier;
+            // Constrain to max speed
+            playbackSpeed = constrain(playbackSpeed, 0.0, maxSpeed);
+            airplaneGif.play();
+            airplaneGif.delay(int(100 / playbackSpeed));
+        }
+        // Display GIF rotated 90 degrees for portrait mode, filling the canvas
+        push();
+        translate(width/2, height/2);
+        rotate(HALF_PI); // Rotate 90 degrees
+        imageMode(CENTER);
+        // After rotation, width becomes height and height becomes width
+        image(airplaneGif, 0, 0, height, width);
+        pop();
+        // Display acceleration value over the image
+        fill(255, 150, 0); // Orange
+        stroke(0);
+        strokeWeight(4);
+        textSize(64);
+       // text("Accel Y: " + nf(accelerationY, 1, 2), width/2, 80);
+        // Instructions
+        // textSize(18);
+        // fill(100);
+        // noStroke();
+        // text("Move phone up/down to control flight speed", width/2, height - 50);
+        // text("Still = paused, more movement = faster", width/2, height - 25);
+    }
+    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);
+    }
+}
+function windowResized()
+{
+    resizeCanvas(windowWidth, windowHeight);
+}

Gif/roll/gifs/how-penciles-are-made.gif ADDED Viewed

Binary file

package/examples/Phone and Gif/roll/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Roll Control</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 and Gif/roll/sketch.js ADDED Viewed

@@ -0,0 +1,121 @@
+// Roll control example
+// Demonstrates using device rotation (rotationX) to control GIF playback speed
+// Tilt phone forward/backward to speed up or slow down the animation
+// Global variables
+let pencilGif;
+let playbackSpeed = 1.0; // Speed multiplier for GIF playback
+let backgroundColor;
+// Mapping variables - easy to adjust
+let speedMultiplier = 3.0; // How much speed per degree of tilt (1° = 3x speed)
+let maxSpeed = 270.0; // Maximum playback speed
+let minSpeedToPlay = 0.1; // Minimum speed before pausing
+function preload()
+{
+    // Load the pencil making GIF
+    pencilGif = loadImage('gifs/how-penciles-are-made.gif');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    backgroundColor = color(200, 255, 200);
+    // Lock mobile gestures to prevent browser interference
+    lockGestures();
+    textAlign(CENTER, CENTER);
+    // Request permission for motion sensors on iOS
+    enableGyroTap();
+}
+function draw()
+{
+    background(backgroundColor);
+    // Check if motion sensors are available
+    if (window.sensorsEnabled)
+    {
+        // Map absolute value of rotationX to playback speed
+        // When flat (rotationX = 0), speed is 0 (paused)
+        let tiltAmount = abs(rotationX);
+        playbackSpeed = tiltAmount * speedMultiplier;
+        // Constrain to max speed
+        playbackSpeed = constrain(playbackSpeed, 0.0, maxSpeed);
+        // Set the GIF playback speed (pause if speed is very low)
+        if (playbackSpeed < minSpeedToPlay)
+        {
+            pencilGif.pause();
+        }
+        else
+        {
+            pencilGif.play();
+            pencilGif.delay(int(100 / playbackSpeed));
+        }
+        // Display GIF rotated 90 degrees for portrait mode, filling the canvas
+        push();
+        translate(width/2, height/2);
+        rotate(HALF_PI); // Rotate 90 degrees
+        imageMode(CENTER);
+        // After rotation, width becomes height and height becomes width
+        image(pencilGif, 0, 0, height, width);
+        pop();
+        // Display rotation and speed information
+        // fill(50);
+        // textSize(24);
+        // text("Device Tilt (X): " + nf(rotationX, 1, 1) + "°", width/2, height/6);
+        // text("Playback Speed: " + nf(playbackSpeed, 1, 2) + "x", width/2, height/6 + 40);
+        // Visual speed indicator bar
+        // let barWidth = map(playbackSpeed, 0, 3, 0, width - 80);
+        // fill(100, 200, 255);
+        // noStroke();
+        // rect(40, height - 100, barWidth, 30);
+        // Bar outline
+        // noFill();
+        // stroke(50);
+        // strokeWeight(2);
+        // rect(40, height - 100, width - 80, 30);
+        // Instructions
+        // textSize(18);
+        // fill(100);
+        // noStroke();
+        // text("Tilt phone to make pencils roll", width/2, height - 50);
+        // text("Flat = paused, more tilt = faster", width/2, height - 25);
+    }
+    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/UXcompare/button-vs-movement/index.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>Button vs Movement Comparison</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      -webkit-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-touch-callout: none;
+    }
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: fixed;
+      touch-action: none;
+      background: #000;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    canvas {
+      display: block;
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+  </style>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mobile-p5-permissions@1.4.4/dist/p5.mobile-permissions.min.js"></script>
+</head>
+<body>
+  <script src="sketch.js"></script>
+</body>
+</html>