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/UXcompare/button-vs-shake/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 Shake 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>

package/examples/UXcompare/button-vs-shake/sketch.js ADDED Viewed

@@ -0,0 +1,320 @@
+// Button vs Shake Comparison
+// Shows traditional button UI vs mobile device shake interaction
+// Color states
+let isBlueBackground = true; // true = blue, false = orange
+let buttonColor1 = '#3498db'; // Blue
+let buttonColor2 = '#e67e22'; // Orange
+// Counters
+let buttonClickCount = 0;
+let shakeCount = 0;
+// Button properties
+let buttonWidth = 200;
+let buttonHeight = 60;
+let buttonX, buttonY;
+// Slider properties
+let sliderX, sliderY;
+let sliderWidth = 200;
+let sliderHeight = 20;
+let sliderValue = 100; // Default shake threshold (higher = less sensitive)
+let sliderMin = 30;
+let sliderMax = 150;
+let isDraggingSlider = false;
+// Simple shake debounce
+let lastShakeFrame = 0;
+// Layout properties
+let topSectionHeight;
+let bottomSectionHeight;
+let dividerY;
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  // Enable gesture locking and motion sensors
+  lockGestures();
+  enableGyroTap('Tap to enable shake detection');
+  // Calculate layout for portrait orientation
+  topSectionHeight = height * 0.5;
+  bottomSectionHeight = height * 0.5;
+  dividerY = height * 0.5;
+  // Position button in top section
+  buttonX = width / 2 - buttonWidth / 2;
+  buttonY = topSectionHeight / 2 - buttonHeight / 2;
+  // Position slider in bottom section
+  sliderX = width / 2 - sliderWidth / 2;
+  sliderY = height - 120;
+  // Set initial shake threshold (higher value = less sensitive)
+  setShakeThreshold(sliderValue);
+  textAlign(CENTER, CENTER);
+}
+function draw() {
+  // Set background color based on current state
+  if (isBlueBackground) {
+    background(buttonColor1);
+  } else {
+    background(buttonColor2);
+  }
+  // Draw divider line
+  stroke(255, 255, 255, 100);
+  strokeWeight(2);
+  line(0, dividerY, width, dividerY);
+  // Draw top section - Traditional Button UI
+  drawTopSection();
+  // Draw bottom section - Shake Interaction
+  drawBottomSection();
+}
+function drawTopSection() {
+  // Section title
+  fill(255);
+  textSize(24);
+  text('TRADITIONAL UI', width / 2, 40);
+  // Draw button
+  drawButton();
+  // Draw counter
+  textSize(20);
+  text('Button pressed: ' + buttonClickCount + ' times', width / 2, buttonY + buttonHeight + 40);
+}
+function drawBottomSection() {
+  // Section title
+  fill(255);
+  textSize(24);
+  text('MOBILE INTERACTION', width / 2, dividerY + 40);
+  // Instructions or shake indicator
+  textSize(18);
+  if (window.sensorsEnabled) {
+    text('Shake your device!', width / 2, dividerY + 80);
+  } else {
+    text('Enable motion sensors first', width / 2, dividerY + 80);
+  }
+  // Draw shake visualization
+  if (window.sensorsEnabled) {
+    drawShakeIndicator();
+  }
+  // Draw shake threshold slider
+  drawSlider();
+  // Draw counter
+  textSize(20);
+  text('Device shaken: ' + shakeCount + ' times', width / 2, height - 30);
+}
+function drawButton() {
+  // Button shadow
+  fill(0, 0, 0, 50);
+  noStroke();
+  rect(buttonX + 3, buttonY + 3, buttonWidth, buttonHeight, 8);
+  // Button background
+  if (isBlueBackground) {
+    fill(255, 255, 255, 200);
+  } else {
+    fill(255, 255, 255, 200);
+  }
+  // Check if button is being pressed
+  if (isButtonPressed()) {
+    fill(255, 255, 255, 255); // Brighter when pressed
+  }
+  rect(buttonX, buttonY, buttonWidth, buttonHeight, 8);
+  // Button text
+  fill(0);
+  textSize(18);
+  text('TOGGLE COLOR', width / 2, buttonY + buttonHeight / 2);
+}
+function drawShakeIndicator() {
+  // Simple shake visualization - concentric circles
+  let centerX = width / 2;
+  let centerY = dividerY + (bottomSectionHeight / 2) - 20;
+  // Get motion intensity for visualization
+  let motionIntensity = 0;
+  if (typeof accelerationX !== 'undefined') {
+    motionIntensity = abs(accelerationX) + abs(accelerationY) + abs(accelerationZ);
+    motionIntensity = constrain(motionIntensity, 0, 10);
+  }
+  // Draw concentric circles that respond to motion
+  noFill();
+  stroke(255, 150);
+  strokeWeight(2);
+  for (let i = 1; i <= 3; i++) {
+    let radius = 30 + (i * 20) + (motionIntensity * 2);
+    circle(centerX, centerY, radius);
+  }
+  // Center dot
+  fill(255);
+  noStroke();
+  circle(centerX, centerY, 10);
+}
+function drawSlider() {
+  // Slider label
+  fill(255);
+  textSize(16);
+  text('Shake Sensitivity: ' + sliderValue, width / 2, sliderY - 25);
+  // Slider track (background)
+  fill(255, 255, 255, 100);
+  noStroke();
+  rect(sliderX, sliderY, sliderWidth, sliderHeight, sliderHeight / 2);
+  // Calculate slider handle position
+  let handleX = map(sliderValue, sliderMin, sliderMax, sliderX, sliderX + sliderWidth - 20);
+  // Slider handle
+  fill(255);
+  if (isDraggingSlider) {
+    fill(255, 255, 0); // Yellow when dragging
+  }
+  // Handle shadow
+  fill(0, 0, 0, 50);
+  circle(handleX + 12, sliderY + sliderHeight / 2 + 2, 24);
+  // Handle
+  if (isDraggingSlider) {
+    fill(255, 255, 0);
+  } else {
+    fill(255);
+  }
+  circle(handleX + 10, sliderY + sliderHeight / 2, 24);
+  // Handle indicator
+  fill(0);
+  circle(handleX + 10, sliderY + sliderHeight / 2, 8);
+}
+function isButtonPressed() {
+  return mouseIsPressed &&
+         mouseX >= buttonX &&
+         mouseX <= buttonX + buttonWidth &&
+         mouseY >= buttonY &&
+         mouseY <= buttonY + buttonHeight;
+}
+function isSliderPressed() {
+  let handleX = map(sliderValue, sliderMin, sliderMax, sliderX, sliderX + sliderWidth - 20);
+  return mouseX >= handleX &&
+         mouseX <= handleX + 20 &&
+         mouseY >= sliderY - 10 &&
+         mouseY <= sliderY + sliderHeight + 10;
+}
+// Handle button clicks
+function mousePressed() {
+  // Check button press
+  if (mouseX >= buttonX &&
+      mouseX <= buttonX + buttonWidth &&
+      mouseY >= buttonY &&
+      mouseY <= buttonY + buttonHeight) {
+    // Toggle background color
+    isBlueBackground = !isBlueBackground;
+    // Increment counter
+    buttonClickCount++;
+    console.log('Button clicked! Count:', buttonClickCount);
+    return false; // Prevent default
+  }
+  // Check slider press
+  if (isSliderPressed()) {
+    isDraggingSlider = true;
+    updateSliderValue();
+    return false;
+  }
+}
+function mouseDragged() {
+  if (isDraggingSlider) {
+    updateSliderValue();
+    return false;
+  }
+}
+function mouseReleased() {
+  isDraggingSlider = false;
+}
+function updateSliderValue() {
+  // Calculate new slider value based on mouse position
+  let newValue = map(mouseX, sliderX, sliderX + sliderWidth, sliderMin, sliderMax);
+  newValue = constrain(newValue, sliderMin, sliderMax);
+  sliderValue = round(newValue);
+  // Update shake threshold
+  setShakeThreshold(sliderValue);
+  console.log('Shake threshold set to:', sliderValue);
+}
+// Handle device shake (built-in p5.js function)
+function deviceShaken() {
+  // Only respond if motion sensors are enabled
+  if (window.sensorsEnabled) {
+    // Simple debounce - ignore if shake happened in last 10 frames (about 1/6 second)
+    if (frameCount - lastShakeFrame > 10) {
+      // Toggle background color
+      isBlueBackground = !isBlueBackground;
+      // Increment counter
+      shakeCount++;
+      // Update last shake frame
+      lastShakeFrame = frameCount;
+      console.log('Device shaken! Count:', shakeCount);
+    }
+  }
+}
+// Handle screen rotation
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  // Recalculate layout
+  topSectionHeight = height * 0.5;
+  bottomSectionHeight = height * 0.5;
+  dividerY = height * 0.5;
+  // Reposition button
+  buttonX = width / 2 - buttonWidth / 2;
+  buttonY = topSectionHeight / 2 - buttonHeight / 2;
+  // Reposition slider
+  sliderX = width / 2 - sliderWidth / 2;
+  sliderY = height - 120;
+}
+// Called when permissions are ready
+function userSetupComplete() {
+  console.log('Motion sensors enabled! You can now shake the device.');
+}

package/examples/UXcompare/gyroscope-demo/index.html ADDED Viewed

@@ -0,0 +1,78 @@
+<!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>Tilt Ball Game</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;
+    }
+    canvas {
+      display: block;
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+    #startButton {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 40px 60px;
+      font-size: 24px;
+      font-weight: bold;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+      z-index: 10000;
+    }
+    #statusText {
+      position: fixed;
+      top: 60%;
+      left: 50%;
+      transform: translate(-50%, 0);
+      color: white;
+      font-family: Arial, sans-serif;
+      text-align: center;
+      z-index: 9999;
+    }
+    .hidden {
+      display: none;
+    }
+  </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>
+  <button id="startButton">START GAME</button>
+  <div id="statusText" class="hidden">Requesting motion sensors...</div>
+  <script src="sketch.js"></script>
+</body>
+</html>

package/examples/UXcompare/gyroscope-demo/sketch.js ADDED Viewed

@@ -0,0 +1,166 @@
+// Tilt Ball Game
+// Demonstrates gyroscope and accelerometer input
+let ball;
+let targets = [];
+let score = 0;
+let gameStarted = false;
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  // Initialize ball
+  ball = {
+    x: width / 2,
+    y: height / 2,
+    vx: 0,
+    vy: 0,
+    size: 30
+  };
+  // Create initial targets
+  createTargets();
+}
+function draw() {
+  background(20, 30, 50);
+  if (window.sensorsEnabled) {
+    gameStarted = true;
+    updateGame();
+  } else {
+    showWaitingScreen();
+  }
+}
+function updateGame() {
+  // Apply tilt forces to ball
+  let tiltX = rotationY || 0;
+  let tiltY = rotationX || 0;
+  // Scale the tilt input
+  ball.vx += tiltX * 0.3;
+  ball.vy += tiltY * 0.3;
+  // Apply friction
+  ball.vx *= 0.95;
+  ball.vy *= 0.95;
+  // Update ball position
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  // Bounce off walls
+  if (ball.x < ball.size/2 || ball.x > width - ball.size/2) {
+    ball.vx *= -0.8;
+    ball.x = constrain(ball.x, ball.size/2, width - ball.size/2);
+  }
+  if (ball.y < ball.size/2 || ball.y > height - ball.size/2) {
+    ball.vy *= -0.8;
+    ball.y = constrain(ball.y, ball.size/2, height - ball.size/2);
+  }
+  // Draw targets
+  for (let i = targets.length - 1; i >= 0; i--) {
+    let target = targets[i];
+    // Animate target
+    target.pulse += 0.1;
+    let pulseSize = target.size + sin(target.pulse) * 5;
+    fill(target.color[0], target.color[1], target.color[2], 150);
+    circle(target.x, target.y, pulseSize);
+    // Check collision with ball
+    let distance = dist(ball.x, ball.y, target.x, target.y);
+    if (distance < (ball.size + target.size) / 2) {
+      // Target hit!
+      score++;
+      targets.splice(i, 1);
+      // Create new target
+      if (targets.length < 3) {
+        createTarget();
+      }
+    }
+  }
+  // Draw ball
+  fill(255, 200, 100);
+  stroke(255, 255, 150);
+  strokeWeight(2);
+  circle(ball.x, ball.y, ball.size);
+  // Draw trail
+  fill(255, 200, 100, 50);
+  noStroke();
+  circle(ball.x - ball.vx * 2, ball.y - ball.vy * 2, ball.size * 0.8);
+  circle(ball.x - ball.vx * 4, ball.y - ball.vy * 4, ball.size * 0.6);
+  // Draw UI
+  drawUI();
+}
+function createTargets() {
+  targets = [];
+  for (let i = 0; i < 3; i++) {
+    createTarget();
+  }
+}
+function createTarget() {
+  let target = {
+    x: random(50, width - 50),
+    y: random(50, height - 50),
+    size: random(40, 80),
+    color: [random(100, 255), random(100, 255), random(100, 255)],
+    pulse: random(TWO_PI)
+  };
+  // Make sure target isn't too close to ball
+  while (dist(target.x, target.y, ball.x, ball.y) < 100) {
+    target.x = random(50, width - 50);
+    target.y = random(50, height - 50);
+  }
+  targets.push(target);
+}
+function drawUI() {
+  // Score
+  fill(255);
+  textAlign(LEFT, TOP);
+  textSize(24);
+  text("Score: " + score, 20, 20);
+  // Instructions
+  textAlign(CENTER, BOTTOM);
+  textSize(14);
+  text("Tilt your device to move the ball", width/2, height - 20);
+  // Tilt indicator
+  if (window.sensorsEnabled) {
+    textAlign(RIGHT, TOP);
+    textSize(12);
+    text("Tilt X: " + (rotationY || 0).toFixed(1), width - 20, 20);
+    text("Tilt Y: " + (rotationX || 0).toFixed(1), width - 20, 40);
+  }
+}
+function showWaitingScreen() {
+  fill(255, 150);
+  textAlign(CENTER, CENTER);
+  textSize(24);
+  text("Waiting for motion sensors...", width/2, height/2);
+  textSize(16);
+  text("Make sure to allow permissions!", width/2, height/2 + 40);
+}
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  // Keep ball in bounds
+  ball.x = constrain(ball.x, ball.size/2, width - ball.size/2);
+  ball.y = constrain(ball.y, ball.size/2, height - ball.size/2);
+}