One of the coolest things for me about our team’s work with Lens Studio is that I get to learn while being creative—and being silly as well.
In all honesty, Snapchat has long been one of my favorite apps, if for nothing other than a lone filter that weirdly changed the course of my life…
I found this Lens—Big Mouth—back in 2016, in a vastly different world. But there he was, unmistakable, a new character staring right back at me. 2D Todd.
It was my first experience with real-time augmented reality, and so easily manifesting a new character—and eventually a new persona—was an intoxicating idea for me, as I’ve always been a sucker for turning all things into narrative.
Flash forward roughly a half decade, and here I am today, attempting to carry on 2D Todd’s legacy. And what better way than to create a “Which Todd Are You?” Lens that celebrates some of the many different modes of Todd’s existence.
If you’re not familiar with the trend, “Which Are You” Lenses typically place an animated object (usually a gif) on or near a user’s forehead that works as a randomizer—kind of like an item block in MarioKart.
A user then makes a gesture (i.e. open mouth), and the gif stops, landing on a still image—hence, determining which Pokémon they are or which NBA superstar they wish their game was like.
After watching this excellent tutorial from emily envisioned (which you should absolutely check out if you want to create one of these yourself)…
I felt inspired to try one of these out, with my own absurd twist, and this is where I ended up:
Since Emily does a great job of taking you through the implementation in the video above, I thought I’d share a stripped down version—a Lens recipe, if you will—for how I made this one.
Lens Recipe: Which Todd Are You?
1 Segmentation Template
I started from Lens Studio’s built-in Segmentation template. I knew I wanted a horrifying kaleidoscopic effect in the background, so I figured this would be the easiest way, especially since I’m already familiar with. To make that effect, I found some 2D Todd selfies in my camera roll, brought them into the Snapchat editor, and used the cut-out feature to create some stickers. Then, I took a picture of a black background, and pasted those cut-outs in a collage. I then used this as the image texture applied to the pre-built Segmentation Controller
1 2D Todd Gif
I used Giphy and 4 of the most classic 2D Todd images from my camera roll. Just make sure you set the Image Duration option to 0.1, the lowest setting. This will ensure you’v created a true randomizer.
1 Head Binding Object
Attached to the forehead, and set to 0 for the Face Index (only will work on one face).
1 Face Stretch Object
The goal here (still in progress) was to create a face stretch that closely resembles the original source (2D Todd). Struggled a bit at first with the face stretch tool, but I’m getting the hang of it.
1 Face Inset: Mouth
Again, paying homage is the goal here. This includes both a Face Inset Binding (custom) and then the Face Inset object itself (mouth). I nested this and the Face Stretch Object under a “Distortion” empty object, just in case my Objects panel gets any more complicated.
Behavior Helper Script 1: Open Mouth to Stop Gif
Nested under the Head Binding Object, this Behavior Helper Script uses a face event (a gesture-based trigger, in the case an open mouth) to “pause” the response type (“Animate Image”, i.e. run the gif/animated texture). I also added an ‘open mouth’ hint when publishing.
One thing I tried to implement but couldn’t figure out was how to have the gif restart after this initial behavioral trigger. Would be curious to know if there’s a solution for this with this script that I’m missing.
Behavior Script 2: Closed Mouth to Play Audio
I also wanted to bury a small Easter egg in the Lens — a piece of wisdom that’s been attributed to 2D Todd. So I recorded some audio and included a second Behavior Helper Script to trigger the audio clip when the user closes their mouth.
And that’s it! I’m still playing with the mouth inset and the face stretch, but I’m happy with where this first effort got me. In the future, I might change up the gif and add one-word descriptions for each Todd, and play around with other kinds of face/head objects.