From 542da93842672b14abc33467d784a79585cce853 Mon Sep 17 00:00:00 2001
From: Tirthraj Chavan <tirthrajchavan07@gmail.com>
Date: Mon, 14 Sep 2026 23:09:21 +0530
Subject: [PATCH] fix: request DeviceMotionEvent permission on iOS for mobile
 device movement example (#1583)

---
 .../02_Mobile_Device_Movement/code.js         | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/code.js b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/code.js
index 3f24f2913d..c2fc870b1b 100644
--- a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/code.js
+++ b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/code.js
@@ -1,17 +1,39 @@
+let permissionGranted = false;
+
 function setup() {
   describe(
     'Available on mobile devices only: a white circle on a black background that moves and changes size based on the movement of the device.'
   );
-
-  // Make the canvas the full width and height of the
-  // device's viewport.
   createCanvas(displayWidth, displayHeight);
   background(0);
+
+  // iOS 13+ requires explicit user permission for device motion.
+  // Create a button so the user can grant access via a tap gesture.
+  if (
+    typeof DeviceMotionEvent !== 'undefined' &&
+    typeof DeviceMotionEvent.requestPermission === 'function'
+  ) {
+    let btn = createButton('Enable Motion');
+    btn.position(width / 2 - 60, height / 2 - 20);
+    btn.mousePressed(() => {
+      DeviceMotionEvent.requestPermission()
+        .then((response) => {
+          if (response === 'granted') {
+            permissionGranted = true;
+            btn.remove();
+            background(0);
+          }
+        })
+        .catch(console.error);
+    });
+  } else {
+    // Non-iOS devices — permission not required
+    permissionGranted = true;
+  }
 }
 
 function deviceMoved() {
-  // When the device is moved, draw a circle with its position and size
-  // based on the direction in which the device is moved.
+  if (!permissionGranted) return;
 
   // Map acceleration along x axis to position along canvas width
   let x = map(accelerationX, -10, 10, 0, width);
@@ -26,4 +48,4 @@ function deviceMoved() {
   background(0, 64);
   noStroke();
   circle(x, y, diameter);
-}
+}
\ No newline at end of file