Genesis
April-May 2022 · XR · Independent
Genesis is a webVR music experience set to Genesis by Grimes. The experience involves the user suspended in mid-air as particles revolve around them. With a custom Arduino controller made by us, the user could manipulate these particles and move around. The aim was to create a surreal and psychedelic visualizer to Grimes' track while providing the user complete immersion and control.
Note: The live demo is paired with a custom Arduino controller to control the visuals. Even without it though, a user can still enjoy the visuals in VR.
Hardware Implementation
The controller involves an Arduino Uno housing an accelerometer, two buttons and an XBee module. Since the visuals of the project involve three dimensions, we wanted a sensor that would also give us inputs in three dimensions. Hence, we chose the accelerometer to give us the user's tilt and motion in the three axes. The buttons are simply to move up and down in the virtual world. The XBee module was crucial to make the controller wireless. Initial prototypes involved the project with a wire and that would severely restrict the controller's motion.
Website Implementation
The virtual world is set up using A-Frame, a webVR framework built on top of three.js. I set up an animation for the spheres to move in a spiral pattern by iterating through all of them and changing their transformations. The input from the controller then controls the radius of this spiral, the movement speed of the spheres and the color of the spheres. Using spatial audio, as the user descends down into the spiral, the audio of Genesis becomes louder.
As we didn't own a virtual reality headset at that time, we decided to use a phone inside of Google Cardboard as our virtual reality headset. The XBee module only connects with a computer though and thus I had to set up an entire WebSocket system to communicate data between the phone and the laptop. Upon every change of input received by the laptop, the data would be sent to all other clients who have the site open. This included the phone, hence allowing the phone to mirror the laptop's visuals.