MusicBall | Devpost

Inspiration

I wanted a way to share music physically while socially distant.

What it does

It generates an AR music ball that moves to the beat of an audio file. Using ar.js, you can put your camera over a marker (which is a black and white picture as specified by ar.js) and it will generate a music ball on top of it. Two main functions: You can use the default Hiro pattern and play any music file you want. Or, you can use the sharing functionality by uploading a music file, which the site uses to generate a global pattern linked to that file. Anyone can take the image of the pattern and play the same music file you uploaded. For example, if you placed your pattern in a public place, anyone can visit the site and see the same music.

How I built it

I used node.js and express.js for the backend, and ar.js and three.js for the frontend. I also used the Web Audio API.

Challenges I ran into

I've never used any of the libraries listed above, so it was a lot of trial and error. Writing the backend was also very new, and unfortunately there were some functionalities that I was unable to finish implementing.