![](https://github.com/stalgiag/p5.xr/workflows/test/badge.svg) [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)

🌀🌀 WEBSITE 🌀🌀

## What is it? p5.xr is an add-on for [p5.js](https://p5js.org/), a Javascript library that makes coding accessible for artists, designers, educators, and beginners. p5.xr adds the ability to __run p5 sketches in Augmented Reality or Virtual Reality__. It does this with the help of [WebXR](https://www.w3.org/TR/webxr/). This enables anyone familiar with p5 to start experimenting with these technologies with little setup. ## Features p5.xr sketches can be run with [p5's online editor.](https://editor.p5js.org/) All of the existing p5 functionality works, and in addition, p5.xr allows you to: - __Virtual Reality__ - Run any 2D or 3D p5 sketch in mobile VR with Google Cardboard - Do the above but with Desktop VR (Vive and Oculus) - __Augmented Reality__ - Make sketches that use Augmented Reality with any device that supports ARCore. - Use marker-based AR on any mobile device Coming Soon - Set anchors and detects planes in your environment --- Coming Soon - __Raycasting__ - Do some simple raycasting for gaze-based interaction in both AR and VR ## Getting Started 1. Make sure that you have [the most recent version of p5.js](https://p5js.org/download/). 2. Check out the [Device and Browser Support Section](https://stalgiag.github.io/p5.xr/#/quick-start/device-support). 3. Add p5.xr to your project. This can be done most easily by adding the script link to a CDN in the `` of your HTML file underneath the p5 link: ``` ``` 4. Change the `createCanvas()` call in your p5 WEBGL sketch to `createVRCanvas()` and put it in `preload()` -or- 5. [Try out one of the Examples](https://stalgiag.github.io/p5.xr/#/quick-start/examples)! ## Contributors ✨ Interested in contributing to this project? [Check out the contributor docs.](https://github.com/stalgiag/p5.xr/tree/master/contributor-docs) Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Vedhant Agarwal}
🚇 ⚠️ 💻

_{Stalgia Grigg}
⚠️ 🚇 🚧 💻

_{Daniel Adams}
💻 💡 🎨

_anagondesign
💡

_{Samir Ghosh}
💻 🎨 📖

_{Tibor Udvari}
💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!