2023
For 2023's AAPI Heritage Month, we teamed up with the Martin Agency to create a duo-camera AR effect for UPS.
The AR effect consists of both front camera (aka selfie mode) and back camera (aka world mode) effects.
The effects spotlight the artwork of Chinese-American artist, Stevie Shao, and brings her illustrations
to life in AR by adding in 2D and Spark animations.
Users can access the QR code to the AR experience through a poster when they visit the UPS stores.
The QR will lead them to a micro-site that contains helpful information and link to the AR experience. And as a reward,
users who unlock the experience will receive a 5% off shipping coupon.
This effect features both a front-camera and back-camera experience. For the front camera effect, we took inspiration from our very own Lunar New Year 2023 fortune effects and replaced the visuals with Stevie's fantastical landscapes and animals. And instead of shuffling for a fortune, the effect shuffles and reveals an AAPI-owned small business at the end.
For the back camera effect, we created a world-space and target tracked experience. The world scene spotlights Stevie's Ascending Tiger in a diorama-like approach in AR. Once launched, the rear-facing camera effect would tell users to find the poster – at which point the poster would trigger a virtual version of the piece, which extends beyond the bounds of the frame to create a surreal landscape. Stevie’s butterflies could animate off the wall surface and into the user’s real environment, the tiger could pull faces, bamboos and grasses could sway with the wind!
Perhaps the most complicated element in this world was the tiger, due to its multiple animations. When the scene first fades in,
the tiger has an intro animation of it jumping into the landscape. After the intro, the tiger cycles through 5 different animated
expressions randomly throughout the experience. While pure randomization in Spark isn't too much of a challenge,
we actually needed a more refined and custom randomizer so that the tiger expressions never repeat consecutively AND
all 5 are animated in a pre-determined random sequence.
To do so, we ended up writing a pretty straighforward "smart" randomizer script. The script pre-shuffles an array of
integer values 1-5 and continuously generates new shuffled arrays one after another. The script also makes sure that the first
value of the new array is not the same as the last value of the old array - this ensures 100% no repeats. At the same time, the
script sends the values out one by one to the patches, telling Spark exactly which tiger animation sequence to play.
The following GIF shows the values logged out onto the console as an example of how the script is working:
Tiger Animation Reference
Year: 2021
Client: BUCK
Role: Creative Technologist, Unity Developer