[Mobile] Mobile Device Movement Sketch Not Working

[xinemata]

Most appropriate sections of the p5.js website?

Examples

What is your operating system?

iOS

Web browser and version

Duckduckgo for iOS, v7.233.02

Actual Behavior

The example sketch on Mobile Device Movement doesn’t seem to be working properly on my iPhone 16 pro (iOS 26.5.2).

Here’s a screen recording to show what I saw:
https://github.com/user-attachments/assets/e17a4f3e-b499-4e6c-b4af-90bb73f4b076

Expected Behavior

According to describe(), the sketch should display “a white circle on a black background that moves and changes size based on the movement of the device.”

Steps to reproduce

No response

Would you like to work on the issue?

I’d like help from others in the community.

[NisargJasani0602]

Quick question first — have you tried this on Safari (not DuckDuckGo) on the same iPhone? Since DuckDuckGo is a third-party browser (it wraps WebKit like all iOS browsers must, but isn't Safari itself), it may have its own motion-access permission handling distinct from Safari's, on top of iOS's system-level "Motion & Orientation Access" toggle in Settings → Safari → Privacy & Security. Worth isolating whether this is a general iOS/WebKit issue or specific to DuckDuckGo's privacy handling.

For context, the general root cause is already documented in processing/p5.js#5486 — iOS requires DeviceMotionEvent.requestPermission() to be called from a user gesture before devicemotion events fire at all, which p5.js example doesn't currently do.

[ksen0]

@NisargJasani0602 thanks for linking that and the root cause. Also I can confirm it doens't work on my safari ios devise either.
Opening this one for volunteers:)

[abhishekpanda-dev]

Hi, I'd like to work on this issue.

I went through the example and the related p5.js issue. From what I understand, iOS requires DeviceMotionEvent.requestPermission() to be triggered by a user interaction before the motion events start working.

I was thinking of adding an “Enable device motion” button to the example for browsers that require this permission, while keeping the current behavior for browsers that don't. I can also handle the denied/unsupported case so the user isn't left with an unresponsive sketch.

Should I keep this fix limited to the Mobile Device Movement example, or would you prefer the other motion examples to be updated as well?

If this approach sounds good, I'd be happy to work on it.

[doradocodes]

@abhishekpanda-dev Thanks for looking into this. I have also look at the logs through the Safari debugger and saw these warnings, which confirm your thought process:

I will assign this issue to you and you can go ahead with working on it. Thanks!

[tirthraj01]

Hi team! 👋

I've submitted a fix for this issue. The root cause as identified in the comments is that iOS 13+ requires DeviceMotionEvent.requestPermission() to be called from a user gesture before device motion events fire.

What I changed in code.js:

• Added an "Enable Motion" button that appears on iOS devices
• On tap, it calls DeviceMotionEvent.requestPermission() and removes itself once permission is granted
• On all other devices (Android, desktop), the sketch works exactly as before — no button shown
  You can review the PR here: fix: request DeviceMotionEvent permission on iOS for mobile device movement example #1602

Happy to make any changes based on your feedback. Thanks for maintaining this project! 🙏

[Nwakaego-Ego]

Hi @tirthraj01, thank you for your interest in helping with this issue. This issue was already assigned to @abhishekpanda-dev after they described their proposed approach and received approval to begin working on it.

Before starting work or opening a pull request, please read through the full issue discussion, share your intended approach, and wait to be assigned. You can find more information about our contribution process in the [community guidelines]. Following this process helps prevent duplicated work and respects the contributor who has already been assigned.

[tirthraj01]

Hi @Nwakaego-Ego, thank you for pointing this out. My apologies to you and @abhishekpanda-dev, I jumped in without realizing it was already assigned.

I completely respect the community process and the work @abhishekpanda-dev is doing. Please feel free to close #1602 or use it as a reference if it helps. I’ll make sure to follow the proposal and assignment process moving forward!