{"id":16508602,"url":"https://github.com/osteele/p5-orientation-and-motion-example","last_synced_at":"2025-06-28T20:04:06.856Z","repository":{"id":38995216,"uuid":"372404957","full_name":"osteele/p5-orientation-and-motion-example","owner":"osteele","description":null,"archived":false,"fork":false,"pushed_at":"2021-06-01T04:23:16.000Z","size":27,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T20:03:25.701Z","etag":null,"topics":["demo","device-motion","device-orientation","example","orientation-events","p5js"],"latest_commit_sha":null,"homepage":"https://osteele.github.io/p5-orientation-and-motion-example/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/osteele.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-31T06:29:47.000Z","updated_at":"2024-07-08T14:43:30.000Z","dependencies_parsed_at":"2022-09-02T21:42:55.284Z","dependency_job_id":null,"html_url":"https://github.com/osteele/p5-orientation-and-motion-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osteele%2Fp5-orientation-and-motion-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osteele%2Fp5-orientation-and-motion-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osteele%2Fp5-orientation-and-motion-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osteele%2Fp5-orientation-and-motion-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osteele","download_url":"https://codeload.github.com/osteele/p5-orientation-and-motion-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252427806,"owners_count":21746276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","device-motion","device-orientation","example","orientation-events","p5js"],"created_at":"2024-10-11T15:46:31.902Z","updated_at":"2025-05-05T02:31:12.781Z","avatar_url":"https://github.com/osteele.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Motion and Orientation Demo (in P5)\n\nThis is a demonstration of the [device motion and orientation JavaScript\nAPIs][Detecting Device Orientation], that read accelerometer data from a mobile\ndevice.\n\nYou may interact with the page at \u003chttps://osteele.github.io/p5-orientation-and-motion-example/\u003e.\n\nThe motion and orientation data is displayed in three ways:\n\n1. All motion and orientation values are displayed in textual form\n2. A ball moves around the screen in response to the accelerometer\n3. A compass displays the heading and the heading accuracy\n\n(The ball rotation is simply a frill. It does not directly relate to any sensor\nvalue.)\n\nThe code uses [p5.js](https://p5js.org).\n\n## Development Instructions\n\nNote that the page needs to *served* over HTTPS, and *viewed* on a mobile device.\n\nSome ways to do this are:\n\n- Run the code on the [P5 Web Editor](https://editor.p5js.org), or (untested)\n  JSFiddle or CodePen.\n\n- Serve the project from your laptop. For example: (a) Open the project in\n  Visual Studio Code; (b) use the Live Server extension; (c) Use ngrok to create\n  an HTTPS address for it; (d) visit the `https://` URL on your phone.\n\n- Publish the file to GitHub Pages, Netlify, or Vercel. (This is a very slow\n  development cycle.)\n\nThis doesn't work:\n\n- Run the program in OpenProcessing.org. This doesn't work because “Source frame\n  did not have the same security origin as the main page.” Example:\n  \u003chttps://openprocessing.org/sketch/1208470\u003e\n\n## Gotchas\n\n- The `devicemotion` and `deviceorientation` event listeners may only be added\n  from then `then` of a call to `DeviceMotionEvent.requestPermission`.\n- The call to `DeviceMotionEvent.requestPermission` needs to occur the handler\n  of a user gesture, such as a mouse click or key press.\n- Some example code on the web assigns to `window.ondevicemotion` instead of\n  adding calling `addEventListener`. This has the same limitations as calling\n  `addEventListener` with these event names.\n- JavaScript code that listens to the motion and orientation events only works\n  if it is (1) served from `localhost` or `127.0.0.1`, *or* (2) served via\n  HTTPS. See the Instructions, above.\n\n## References\n\nMDN Articles:\n\n- [Detecting Device\n  Orientation]\n- [Orientation and Motion Data\n  Explained](https://developer.mozilla.org/en-US/docs/Web/Events/Orientation_and_motion_data_explained)\n- [DeviceOrientationEvent\n  reference](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)\n- [DeviceMotionEvent\n  reference](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)\n\nOther documentation:\n\n- [Google Developer Docs: Device Orientation \u0026 Motion](https://developers.google.com/web/fundamentals/native-hardware/device-orientation/)\n- [Apple Developer Documentation: Device Orientation Event](https://developer.apple.com/documentation/webkitjs/deviceorientationevent)\n- [Apple Developer Documentation: Device Motion Event](https://developer.apple.com/documentation/webkitjs/devicemotionevent)\n\n[Detecting Device Orientation]: https://developer.mozilla.org/en-US/docs/Web/Events/Detecting_device_orientation\n\n## Credits\n\nThe “View Source” CSS is adapted from Christian Heilmann and Ildar Sagdejev's\n[Pure CSS responsive \"Fork me on GitHub\"\nribbon](http://codepo8.github.io/css-fork-on-github-ribbon/).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosteele%2Fp5-orientation-and-motion-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosteele%2Fp5-orientation-and-motion-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosteele%2Fp5-orientation-and-motion-example/lists"}