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.

The “area of opportunity”

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.

Googly Eyes: Humanizing Technology since always.

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:

dual spring based model -> cookie monster googly 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:

Show your support

Clapping shows how much you appreciated flxhbck’s story.