Big Moo, Big Ideas

Throwback to Wildhacks 2016! Hosted at Northwestern, this was the first hackathon I attended back in 2014. Now, this is my 5th hackathon :) My best friend from high school G came from UIUC to make something cool, and we wanted to keep the project relatively freeform and lowkey - we just wanted to have fun, especially with the increasingly intense pressures from school (heh). Since receiving my Google Cardboard at Grace Hopper, I’ve really wanted to make music-related VR experience for the platform.

(the egg that started it all)

Let’s get down to our process, shall we?

Friday, November 18th 2016

• We found a really amazing library for making VR experiences using web technology, WebVR, and from this we found the framework we would ultimately use, A-Frame (It’s pure magic!!! Do check out their dazzling samples)
• After forking the A-Frame repo, we began brainstorming concepts (including: sampling beats on 3D objects, visualizing music in VR, incorporating moos and quacks (some longrunning jokes between us), and creating a music player with ‘sick visuals’)
• We familiarized ourselves with the framework by playing around with the Hello World demo and the provided boilerplate
• and created a Slack channel to keep all of our links and files neatly organized in one place

(no, we did not pull all nighters - 36 hours are brutal)

Saturday, November 19th 2016

• We set up our repo with a Github pages branch (had to brush up on my git!)
• and tested the Hello World demo
• For our music, we selected and downloaded various sample packs from Prime Loops, and then combed through them to find suitable tracks and sound bites
• Now, the learning phase - we went through the tutorials and documentation, slowly picking apart the Metaverse demo, changing and adding entities (mostly geometric shapes) to the scene
• We figured out how to change the “sky” to a custom galaxy background, as well as make entities animated and interactive (finally we can play music!)
• There are several types of interactive shapes in our scene: 1. a loopy, morphing overhead “sun” shape that continuously plays a looping track
  1. several linked geometric shapes playing samples that are controlled by a central shape that acts like a switch
  2. other spinning geometric shapes that play and pause music
  3. orbiting stars to add visual interest and contribute to the space theme
  4. a cat and a dog (that meow and bark, respectively, when you look at them)
  5. lots of random foods, many of which use textures (cos we had free time and wanted to make goofy items floating in space) - how many can you spot?

Sunday, November 20th 2016

• We wrapped up the night before, so we submitted in the morning
• and celebrated a successful, goofy hackathon weekend with brunch :)

Overall, I was blown away by how much A-Frame streamlines the process of creating a VR experience! I’ve taken a computer graphics course in which we had to code even the simples shapes from scratch in WebGL, no libraries or anything. We really appreciated that A-Frame handles the camera, shading, basic geometries, clicks, converting between normal and VR views. Our project was just one html document - pure magic. This was the smoothest, most stress-free hack I’ve ever done!

Try Big Moo, Big Ideas for yourself on either web or mobile! (Source code here) We’d love to hear what you think. Of course, this hack shouldn’t be taken terribly “seriously” (as you might be able to tell from our Devpost submission), but we had so much fun over the weekend creating it! Working on a cool (stress-free) project with a good friend one weekend - what more could you ask for in a hackathon?