Googly Eyes for VR Masks
This is a Teague Labs post. For an interactive version of the article, view the original article.
Yesterday we had a somewhat silly idea and since we had an afternoon of open time, we went ahead and made it. The inspiration came from ustwo’s mouth off app which uses sound reactivity to animate a mouth. We’ve been working on VR content quite a bit recently and thought it would be interesting to do something similar for the area usually covered by a VR headset.
Putting a(nother) phone with large eyes on the front of your VR headset was the obvious first step to take. We used p5.js to make the first attempt with an eyeball textured sphere. The result was terrifying. See for yourself:
We wanted this to be more approachable, so more silly seemed like the way to go. Then we realized we already had our work cut out for us. People have been putting googly eyes on VR headsets since they existed.
So our next attempt was loosely based on googly eyes, but actually closer to cookie monster’s spring-based eyes. We took this processing springs example and ported it to p5.js, did some adjustments including chaining two springs together, added a bounding circle and voila, cookie monster eyes:
We thought about making different pairs of eyes / eyelids to choose from, but the afternoon came to an end, so we made a cardboard cutout to mount the phone to a VR headset and quickly created a template for people to draw whatever overlay they wanted for their googley eyes. Click here to try it for yourself (ideally on mobile).
Here are some results:
The (messy) code for the two eyeballs and templates can be found here.
(FYI: Google Research just released a great project that solves this problem in a more serious way.)
