pulsar home page
hardware: VR setup and ESP32 board wired to a heartbeat monitor board
pulse monitor schematic
flocking scene (gif)
starfield scene (gif)
hello world scene (gif)
vortex scene (gif)
cosine scene (gif)
hardware display of heartbeat monitor and VR headset
Visit our site at https://sunhacks-pulsar.glitch.me!
We are a team of four students with a wide range of experiences; two of us are relatively new to coding, and the other two knew each other from a VR storytelling course. Combined, we are a mix of computer science, electrical engineering, digital culture, and computer systems engineering/ex-biomedical engineering. When coming up with an idea we wanted something that incorporated both hardware and programming. With special access to VR equipment and electrical hardware, we designed and executed an interesting project incorporating heartbeat with virtual reality art.
What it does
pulsar is a VR visualizer built using web technologies. We connect a pulse monitor to your finger, which sends your heart rate into the cloud to be captured by our website. View one of five scenes designed to adapt to your heartbeat and relax as you experience a sense of serenity and awe.
How we built it
Our tech stack runs the gamut from Arduino, to WebXR, to Vite, to p5.js.
On the hardware side, we use an ESP32 board wired to a heartbeat monitor board. The received pulse BPM is sent to a cloud server running on Glitch.io, which stores the value and opens an API handle that our website queries.
Our website is a static build built with Vite, styled with TailwindCSS, and hosted by Glitch.com; it features a homepage that links to virtual reality scenes that can be viewed either in the browser or with a VR setup. All of our scenes are web-native and require no additional downloads.
Our visualizations are built using the well-known p5.js library, which provides functions to enable easy WebGL graphics based on a canvas. An open-source library called p5.xr then takes the p5 functionality and wraps it using the WebXR API. This allows us to port our visualizations to VR without requiring any installations on the user's system; all you need is a VR headset with a web browser. Even users without a VR headset can view the visualizations on a computer, moving the view by clicking and dragging.
Challenges we ran into
Accomplishments that we're proud of
We're a team of four who are collectively pretty new to hackathons and coding. Three of us had never been to a hackathon before, and we're all facing new technologies (our web coder had never used front-end HTML/CSS before today, and two of us had never designed for VR before). We're proud of how far we have come, and created a final product that we’re extremely pleased with.
What we learned
What's next for pulsar - adaptive VR mood visualizer
This idea was born out of a desire to learn about WebXR and developing for VR using web-native technologies. We had considered using A-Frame.js, a VR library which uses HTML syntax like
In the future, we’d like to further refine our VR scenes with the power of more robust libraries like A-Frame (sidestepping the performance issues of p5 at large scales). We can take the lessons we’ve learned from VR scene design on the web and leverage more flexible tools to make it happen.
Another pet idea of ours was to create a model-viewer VR website, hooking into the Thingiverse API and giving up an up-close view of 3D files with the ability to rotate and scale them. Maybe next year, perhaps?