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:
If you are on mobile, rotate & tilt your device.
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:
Drag the pupils with your cursor. If on mobile, shake!
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 googly eyes. Click here to try it for yourself (ideally on mobile).
Bringing the cardboard to life.
Here are some results:
(FYI: Google Research just released a great project that solves this problem in a more serious way.)