<img src="https://github.com/stalgiag/p5.xr/raw/main/docs/assets/xr-tear.png" alt="drawing of a face with eyes that are the letter x and r with a tear coming out of one eye" style="max-width:40%; margin-left:30%; margin-bottom: -30px"/>

## 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__ <small><em>All AR features are waiting for the AR module spec to be implemented in browsers</em></small>
  - Make sketches that use Augmented Reality with any device that supports ARCore. <small><em>Coming Soon</em></small>
  - Use marker-based AR on any mobile device <small><em>Coming Soon</em></small>
  - Set anchors and detects planes in your environment --- <small><em>Coming Soon</em></small>

- __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. [Try out one of the Examples](https://stalgiag.github.io/p5.xr/#/quick-start/examples)!
4. Check out the [Releases section of the Github repo](https://github.com/stalgiag/p5.xr/releases) if you want to run this locally.
