El Segundo Brewing Co: AR Experience
Once a year, El Segundo transforms into a vibrant hub of creativity for its annual art walk, inviting visitors to explore works by LA-based artists.
As part of this event, I collaborated with reality designers at Reality Experience Design to offer an immersive experience by bringing murals to life through interactive AR experiences. Using After Effects, I animated digital elements for "Portals to Memory" by Nanibah Chacon to create a more dynamic connection between the audience and the artwork.
My Role
Reality Designer
Animator
Scope
4-Weeks
Year
2024
Tools
After Effects
Lens Studio
Photoshop
Process
1
Concept
Collaborate with the team to plan animation methods and experience.
2
Compositing
Mask and refine individual elements for smooth animation.
3
Animating & Implementing
Animate each part and implement the full experience into Lens Studio.
Concept
To begin the project, our design team consulted with the original artist and the El Segundo Art Walk team to ensure that our visions aligned with how we wanted the animated experience to come to life.
Original mural by Nanibah Chacon
We created a collection of references for complex animations such as the waves.
Wave animation references
Compositing
The next step was masking out all elements that would be animated individually in Photoshop and composited later into After Effects.
Masked objects folder
Selected items for masking
Some areas such as the background and joint connections needed to be edited or repainted minimally to be animated seamlessly, which was done using Photoshop's autofill & brush tools.
Background with woman and animation objects masked out
Animating in After Effects
The direction for the mural was to animate the woman moving her hand and body gently with the wind blowing her hair and the flower in her hand. The second main animation would be imitate movement in the waves and the gentle crashing of the waves.
For the rigging of the body, I tested using DUIK & Limber tools within After Effects and settled on DUIK for its simplicity especially with utilizing 2D assets.
Several versions were created until the body moved smoothly in a seamless loop and optimized for implementing to Lens Studio.
_gif.gif)
First version woman animation
Final version woman animation
The wave animation took many versions with different animation methods to create an effect of a constant stream. Our team decided that having a looping stroke would be the best method for mimicking constant movement, however there were some struggles in the beginning with creating a perfect loop so we explored alternative methods like using wiggle effects.
Early version wave animation with stroke wiggle effect
Early version wave animation with looping stroke effect
I looked into stroke liquid effects on Youtube for reference and was able to produce a looping effect that our team was satisfied and moved forward with, applying the same effect to each line.
Refined wave stroke animation
_gif.gif)
All main strokes animated with different colors and speed fluctuations
Implementing into Lens Studio
In order to ensure the animations were optimized and animated properly into Lens Studio, I worked with our developer, Christian Enriquez, to test each animation in the 3D space and make revisions as needed.
3D Animations in AR space by Christian
Final Design + Impact
The launch was a success with the experience being played and viewed over 800,000 times by attendees for the one day event. The city of El Segundo embraces the possibilities of new technology in "becoming an AR city." The success of the ESAW AR project helped to promote El Segundo's local art scene and its innovations, and will be likely to feature more AR pieces in the next five years.
Audience experiencing AR mural experience with Snapchat
Experience it in Person
The Portals to Memory AR mural experience is still available, located at El Segundo Public Library.
