Link

Visit our site at https://sunhacks-pulsar.glitch.me!

Inspiration

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

During the hackathon, three of our members tried programming a new language to develop VR scenes. Specifically, two of our members were just newly exposed to VR and learned how to program virtual reality scenes using JavaScript and the p5.js/p5.xr libraries. Even the most experienced hackathon member faced a challenge as he learned HTML and CSS for the first time to create the front end of our website.

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

As individual members with a wide range of experience and skill sets, we all gained unique knowledge from this event. Some of us who had never worked with virtual reality learned a lot about JavaScript and development in VR in order to build immersive experiences. We also gained skills in working with new hardware, such as the ESP32 and heartbeat monitor boards, and web development using HTML and CSS. We took strides to build a project outside of our comfort zones, and it paid off greatly.

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 <cube> and <plane>. We decided against this because modifying this code would have required a JavaScript framework like React or Vue, which we might not have been able to tackle successfully.

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?

Built With

  • esp32
  • oculus-quest-2
  • p5.js
  • p5.xr
  • tailwindcss
  • webvr
+ 8 more
Share this project:

Updates