“having a cold” ar experience

An augmented reality experience that reminds us of the experience of having a cold, made in Spark AR Studio.

JAN 2021

INDIVIDUAL WORK

shake3.gif
shake2.gif
shake4.gif

Try the AR Effect on Instagram:

Click Here to Try the Lens!

 

Design Roadmap

roadmap.PNG

Conceptualization

The initial idea is to make an AR effect that reminds people of the experience of having a cold while making it playful and interactive. Catching a cold is not a pleasant experience in most cases. But turning it into a fun experience might make people feel better about it.

Research & Analysis

I did some research on the symptoms of having a cold. There were quite a few, but I wanted to pick the ones that are the most visually effective and work well with the head-shaking action. It turns out that the sweating and the blush on the cheeks could work well.

2.jpg

Design the interactions

By sketching out the user flow in my mind, I came up with a rough idea of the visuals and the interactions I want the users to have with the effect. The basic flow looks like this:

shaking.jpg
  1. When opening the lens in the first place, the user see themselves having a running nose and wearing a cooling patch on their forehead. At the same time, they keep sweating.

  2. As the user slightly shakes their head, they sweat more dramatically and their sweat drops get sprinkled around. The drop of snot on their nose also flies around.

  3. As the time of the user shaking head accumulates, a blush on their face starts to show increasingly. The more they shake, the more obvious the blush is.

Flow2.jpg

Making the assets

The assets needed in this effect include a few things: a cooling patch, a rigged snot drop that can later be animated, a blush face material, a morphed 3D face mesh (unhappy face).

morph.gif
mesh3.gif
snot.gif
faceFeminine_blush.jpg
morph.gif

Building the Core Interactions

The core interaction in this effect would be the user controlling a series of things through shaking their head. Therefore, I need to first access the angle of the user’s head rotation. I also need to count how many times the rotation from left to right has happened since the lens starts running. Then I could use these result to drive the following things:

  • Particle effects: The sweat drops are supposed to follow the physics in the real world. To simulate the gravity and the force that the rotation gives to these sweat drops, some calculations need to be done in Spark AR.

  • Animating the rigged snot drop: With the pre-rigged mesh, I was able to animate the snot drop and simulate its movement along with the head rotation.

  • Blush effect: The blush on face is done using a face material of which the alpha can be set to respond to the counted times of head rotation.

patch4.gif
script.PNG

User Testing

By running some user tests with my friends, I collected some feedbacks and optimized the effect to achieve a smoother experience (tweek data values, fine-touch the face mesh, etc.).

usertest3.gif

Final Demo