Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

Know JavaScript? Impress Your Friends With A Custom Snapchat Augmented Reality Lens

“Erika Archer” From Mixamo

JavaScript isn’t just for websites. You can use it for many other creative projects including…drum roll… Augmented Reality! As a traditional web JavaScript developer, the task might seem a little daunting. You might have no idea how to model a 3D character, let alone animate one, and adding a script to handle events on top of it?!? But yes, you CAN do it. You might be surprised how easy it is.

What’s the IDE here? Where do I even start?

There are a bunch of ways to build Augmented Reality, but if you just want to get your feet wet, I suggest downloading Lens Studio. https://lensstudio.snapchat.com/

Why? Everyone (under 30) has Snapchat — you might already have it on your phone — so it’s easy to test your creations and actually share them when you’re finished. Plus, it’s a stable tool that’s well documented. Bonus, if you love making things, there’s a career in this because many businesses are trying to boost their Snapchat social presence using AR.

Ok, but I have no experience with 3D modeling and animation. Where do I get something to practice with?

You can get started with Lens Studio tutorials and templates, and you can also check out https://www.mixamo.com/ a free Adobe product that will rig an animation to a model. (psst… if you have Adobe CC, you can make custom models with Fuse CC https://www.adobe.com/products/fuse.html

Pick a model and animation, then download.

Cut the frames to 24 and apply a keyframe reduction to reduce the file weight. In Lens Studio, import the .fbx file.

Your animation will probably come in by default very very large. So click on your animation layer and adjust the scale to .05. Want to see the animation too? Set the mixer to Autoplay.

At this point, you could start mirroring to your phone and see some augmented reality in progress.

So where do I add the JavaScript?

In the Resources panel, select + Add New and choose “script”.

Then, at the very bottom of the inspector panel, there is an +Add Component button. Choose “script” and go to town with your JavaScript skills. Check out the Lens Studio documentation https://lensstudio.snapchat.com/guides/

Just have fun with it

Seriously though… it’s Snapchat so just have fun with it. Create crazy filters even if it’s just for your kids. Have fun Snapchat lens creating. 🙂