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/touch/02_touch_zones/sketch.js ADDED Viewed

@@ -0,0 +1,78 @@
+// MINIMAL VERSION - Touch Zones
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Detecting which zone of the screen is touched (divided into 4 quadrants)
+// Global variables for zone detection
+let xDivision = 2;  // Number of columns (2 = left/right)
+let yDivision = 2;  // Number of rows (2 = top/bottom)
+let zoneCounters = [0, 0, 0, 0];  // Touch counters for each zone
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Touch Zones - Minimal Version");
+    debug("Screen divided into " + (xDivision * yDivision) + " zones");
+    debug("Zone 0: Top-Left");
+    debug("Zone 1: Top-Right");
+    debug("Zone 2: Bottom-Left");
+    debug("Zone 3: Bottom-Right");
+    debug("Touch anywhere to see which zone");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+}
+// Helper function to determine which zone a touch is in
+function getZone(x, y)
+{
+    // Calculate which column and row the touch is in
+    let col = floor(x / (width / xDivision));
+    let row = floor(y / (height / yDivision));
+    // Convert to zone number (0-3)
+    let zone = row * xDivision + col;
+    // Make sure zone is within valid range
+    zone = constrain(zone, 0, (xDivision * yDivision) - 1);
+    return zone;
+}
+// Prevent default touch behavior and unwanted gestures
+function touchStarted()
+{
+    // Check all active touches
+    for (let i = 0; i < touches.length; i++)
+    {
+        let x = touches[i].x;
+        let y = touches[i].y;
+        // Get zone for this touch
+        let zone = getZone(x, y);
+        // Increment counter for this zone
+        zoneCounters[zone] = zoneCounters[zone] + 1;
+        // Output to debug panel
+        debug("--- Touch in Zone " + zone + " ---");
+        debug("Position: (" + int(x) + ", " + int(y) + ")");
+        debug("Zone " + zone + " Total Touches: " + zoneCounters[zone]);
+    }
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior and unwanted gestures
+function touchEnded()
+{
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/touch/03_touch_count/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Count (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/03_touch_count/sketch.js ADDED Viewed

@@ -0,0 +1,64 @@
+// MINIMAL VERSION - Touch Count
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Counting simultaneous touches on the screen
+// Global variable for tracking touch count
+let currentTouchCount = 0;
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Touch Count - Minimal Version");
+    debug("Use multiple fingers to touch the screen");
+    debug("Waiting for touches...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Update touch count
+    let newTouchCount = touches.length;
+    // Only output to debug if count changed
+    if (newTouchCount !== currentTouchCount)
+    {
+        currentTouchCount = newTouchCount;
+        if (currentTouchCount > 0)
+        {
+            debug("--- Touch Count Changed ---");
+            debug("Current Touches: " + currentTouchCount);
+            // List all touch positions
+            for (let i = 0; i < touches.length; i++)
+            {
+                debug("Touch " + (i + 1) + ": (" + int(touches[i].x) + ", " + int(touches[i].y) + ")");
+            }
+        }
+        else
+        {
+            debug("All touches ended");
+            debug("Waiting for touches...");
+        }
+    }
+}
+// Prevent default touch behavior and unwanted gestures
+function touchStarted()
+{
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior and unwanted gestures
+function touchEnded()
+{
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/touch/04_touch_distance/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Distance (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/04_touch_distance/sketch.js ADDED Viewed

@@ -0,0 +1,69 @@
+// MINIMAL VERSION - Touch Distance
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Measuring distance between two simultaneous touches
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Touch Distance - Minimal Version");
+    debug("Use two fingers to touch the screen");
+    debug("Waiting for two touches...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Only measure when there are exactly 2 touches
+    if (touches.length === 2)
+    {
+        // Get positions of both touches
+        let x1 = touches[0].x;
+        let y1 = touches[0].y;
+        let x2 = touches[1].x;
+        let y2 = touches[1].y;
+        // Calculate distance using Pythagorean theorem
+        let distance = dist(x1, y1, x2, y2);
+        // Output to debug panel
+        debug("--- Distance Measurement ---");
+        debug("Touch 1: (" + int(x1) + ", " + int(y1) + ")");
+        debug("Touch 2: (" + int(x2) + ", " + int(y2) + ")");
+        debug("Distance: " + int(distance) + " pixels");
+    }
+    else if (touches.length === 0)
+    {
+        // No touches
+        debug("Waiting for two touches...");
+    }
+    else if (touches.length === 1)
+    {
+        // Only one touch
+        debug("Need one more finger (1/2 touches)");
+    }
+    else if (touches.length > 2)
+    {
+        // Too many touches
+        debug("Too many touches! Use only 2 fingers");
+    }
+}
+// Prevent default touch behavior and unwanted gestures
+function touchStarted()
+{
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior and unwanted gestures
+function touchEnded()
+{
+    return false;  // Prevents default behavior
+}

package/examples/Phone Sensor Examples - Minimal/touch/05_touch_angle/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Angle (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/05_touch_angle/sketch.js ADDED Viewed

@@ -0,0 +1,85 @@
+// MINIMAL VERSION - Touch Angle
+// No visual feedback - data displayed in debug panel only
+// Demonstrates: Calculating the angle between two simultaneous touches
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    // Show debug panel FIRST
+    showDebug();
+    // Lock mobile gestures
+    lockGestures();
+    debug("Touch Angle - Minimal Version");
+    debug("Use two fingers to touch the screen");
+    debug("Waiting for two touches...");
+}
+function draw()
+{
+    // No visual feedback in minimal version
+    // Only measure when there are exactly 2 touches
+    if (touches.length === 2)
+    {
+        // Get positions of both touches
+        let x1 = touches[0].x;
+        let y1 = touches[0].y;
+        let x2 = touches[1].x;
+        let y2 = touches[1].y;
+        // Calculate angle from touch 1 to touch 2
+        let angleRadians = atan2(y2 - y1, x2 - x1);
+        let angleDegrees = degrees(angleRadians);
+        // Normalize angle to 0-360 range
+        if (angleDegrees < 0)
+        {
+            angleDegrees = angleDegrees + 360;
+        }
+        // Output to debug panel
+        debug("--- Angle Measurement ---");
+        debug("Touch 1: (" + int(x1) + ", " + int(y1) + ")");
+        debug("Touch 2: (" + int(x2) + ", " + int(y2) + ")");
+        debug("Angle: " + int(angleDegrees) + "°");
+        debug("Radians: " + nf(angleRadians, 1, 2));
+        // Add directional hint
+        let direction = "";
+        if (angleDegrees < 45 || angleDegrees >= 315) direction = "Right";
+        else if (angleDegrees < 135) direction = "Down";
+        else if (angleDegrees < 225) direction = "Left";
+        else direction = "Up";
+        debug("Direction: " + direction);
+    }
+    else if (touches.length === 0)
+    {
+        // No touches
+        debug("Waiting for two touches...");
+    }
+    else if (touches.length === 1)
+    {
+        // Only one touch
+        debug("Need one more finger (1/2 touches)");
+    }
+    else if (touches.length > 2)
+    {
+        // Too many touches
+        debug("Too many touches! Use only 2 fingers");
+    }
+}
+// Prevent default touch behavior and unwanted gestures
+function touchStarted()
+{
+    return false;  // Prevents default behavior
+}
+// Prevent default touch behavior and unwanted gestures
+function touchEnded()
+{
+    return false;  // Prevents default behavior
+}

package/examples/Phone and Gif/collision/README.md ADDED Viewed

@@ -0,0 +1,31 @@
+# Touch Collision Detection Example
+This example demonstrates using `collidePointRect()` from the p5.collide2D library to detect touches on multiple moving objects.
+## Features
+- Multiple space people moving around the screen
+- Each object independently detects touches using collision detection
+- Objects bounce off screen edges
+- Individual and total touch counters
+- Visual feedback when touched
+## Setup
+1. The space suit image is already included at `gifs/spaceSuit2.png`
+2. Open `index.html` in a browser or on a mobile device
+If the image fails to load, the example will display simple placeholder astronaut shapes.
+## How It Works
+- **SpacePerson Class**: Simple class that handles position, movement, collision detection, and display
+- **collidePointRect()**: Detects if a touch point (x, y) is inside each object's rectangular bounds
+- **No Screen Division**: Each object can be touched anywhere without dividing the screen into zones
+## Customization
+In `sketch.js` you can change:
+- Number of space people: Modify the loop in `setup()` (currently 5)
+- Size: Change `this.width` and `this.height` in the class
+- Speed: Adjust the `random()` values for `speedX` and `speedY`
+- Colors: Modify the `backgroundColor` values

Gif/collision/gifs/spaceSuit2.png ADDED Viewed

Binary file

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch Collision with GIF</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>
+    <script src="https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D/p5.collide2d.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/collision/sketch.js ADDED Viewed

@@ -0,0 +1,226 @@
+// Touch Collision Detection with Multiple Objects
+// Demonstrates using collidePointRect() to detect touches on multiple moving objects
+// Each space person can be touched independently!
+// Global variables
+let spaceSuitImg;
+let spacePeople = []; // Array to hold multiple space person objects
+let totalTouches = 0;
+let backgroundColor;
+// Simple SpacePerson class
+class SpacePerson
+{
+    constructor(x, y)
+    {
+        this.x = x;
+        this.y = y;
+        this.width = 120;
+        this.height = 120;
+        this.speedX = random(-2, 2);
+        this.speedY = random(-2, 2);
+        this.isTouched = false;
+        this.celebrationTimer = 0;
+        this.touchCount = 0;
+    }
+    update()
+    {
+        // Move the space person
+        this.x = this.x + this.speedX;
+        this.y = this.y + this.speedY;
+        // Bounce off edges
+        if (this.x - this.width/2 < 0 || this.x + this.width/2 > width)
+        {
+            this.speedX = this.speedX * -1;
+        }
+        if (this.y - this.height/2 < 0 || this.y + this.height/2 > height)
+        {
+            this.speedY = this.speedY * -1;
+        }
+        // Update celebration timer
+        if (this.celebrationTimer > 0)
+        {
+            this.celebrationTimer = this.celebrationTimer - 1;
+        }
+    }
+    display()
+    {
+        // Draw border (green if touched, white otherwise)
+        if (this.isTouched || this.celebrationTimer > 0)
+        {
+            stroke(100, 255, 100);
+            strokeWeight(6);
+        }
+        else
+        {
+            stroke(255);
+            strokeWeight(2);
+        }
+        fill(255, 255, 255, 0);
+        rectMode(CORNER);
+        rect(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
+        // Display the space suit image (or placeholder if not loaded)
+        noStroke();
+        imageMode(CENTER);
+        if (spaceSuitImg.width > 0)
+        {
+            image(spaceSuitImg, this.x, this.y, this.width, this.height);
+        }
+        else
+        {
+            // Placeholder: draw a simple astronaut shape
+            fill(220);
+            circle(this.x, this.y - 15, 40); // helmet
+            fill(180);
+            rect(this.x - 20, this.y, 40, 50); // body
+            fill(220);
+            rect(this.x - 25, this.y + 10, 10, 30); // left arm
+            rect(this.x + 15, this.y + 10, 10, 30); // right arm
+            fill(100, 150, 255);
+            circle(this.x, this.y - 15, 25); // visor
+        }
+        // Show touch count for this space person
+        fill(255);
+        stroke(0);
+        strokeWeight(3);
+        textSize(20);
+        textAlign(CENTER, CENTER);
+        text(this.touchCount, this.x, this.y - this.height/2 - 20);
+        // Reset touched state
+        this.isTouched = false;
+    }
+    checkTouch(touchX, touchY)
+    {
+        // Calculate the top-left corner for collidePointRect
+        let rectX = this.x - this.width/2;
+        let rectY = this.y - this.height/2;
+        // Use collidePointRect to check if touch is inside bounds
+        if (collidePointRect(touchX, touchY, rectX, rectY, this.width, this.height))
+        {
+            this.isTouched = true;
+            this.touchCount = this.touchCount + 1;
+            this.celebrationTimer = 20;
+            return true;
+        }
+        return false;
+    }
+}
+function preload()
+{
+    // Load the space suit image
+    spaceSuitImg = loadImage('gifs/spaceSuit2.png');
+}
+function setup()
+{
+    createCanvas(windowWidth, windowHeight);
+    backgroundColor = color(20, 20, 40);
+    // Lock mobile gestures to prevent browser interference
+    lockGestures();
+    // Create 5 space people at random positions
+    for (let i = 0; i < 5; i = i + 1)
+    {
+        let x = random(100, width - 100);
+        let y = random(100, height - 100);
+        spacePeople.push(new SpacePerson(x, y));
+    }
+}
+function draw()
+{
+    background(backgroundColor);
+    // Update and display all space people
+    for (let i = 0; i < spacePeople.length; i = i + 1)
+    {
+        spacePeople[i].update();
+        spacePeople[i].display();
+    }
+    // Display total touch counter
+    fill(255);
+    stroke(0);
+    strokeWeight(4);
+    textSize(32);
+    textAlign(CENTER, CENTER);
+    text("Total Touches: " + totalTouches, width/2, 40);
+    // Instructions
+    textSize(20);
+    text("Touch the space people!", width/2, height - 50);
+    // Show collision detection info
+    textSize(16);
+    fill(200);
+    text("Using collidePointRect() - each object detects touches independently", width/2, height - 20);
+}
+function touchStarted()
+{
+    // Check all touch points
+    for (let i = 0; i < touches.length; i = i + 1)
+    {
+        let touchX = touches[i].x;
+        let touchY = touches[i].y;
+        // Check each space person for collision with this touch
+        for (let j = 0; j < spacePeople.length; j = j + 1)
+        {
+            if (spacePeople[j].checkTouch(touchX, touchY))
+            {
+                totalTouches = totalTouches + 1;
+                // Flash the background
+                backgroundColor = color(50, 50, 100);
+            }
+        }
+    }
+    // Prevent default touch behavior and unwanted gestures
+    return false;
+}
+function touchMoved()
+{
+    // Check touches during movement too
+    for (let i = 0; i < touches.length; i = i + 1)
+    {
+        let touchX = touches[i].x;
+        let touchY = touches[i].y;
+        // Check each space person
+        for (let j = 0; j < spacePeople.length; j = j + 1)
+        {
+            spacePeople[j].checkTouch(touchX, touchY);
+        }
+    }
+    // Prevent default touch behavior and unwanted gestures
+    return false;
+}
+function touchEnded()
+{
+    // Reset background color when touch ends
+    backgroundColor = color(20, 20, 40);
+    // Prevent default touch behavior and unwanted gestures
+    return false;
+}
+function windowResized()
+{
+    resizeCanvas(windowWidth, windowHeight);
+}

Gif/fetch/gifs/corgiswimflip.gif ADDED Viewed

Binary file

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

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P5.js Mobile - Touch with GIF</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>