1.1K Followers
·
Follow

Making my cats #instafamous with custom Instagram filters

Image for post
Image for post
Follow these two faces on @blocky_buds

Back in August, I started an instagram account for my cats: Lego and Pixel. It was a way for me to 1) explore new mediums and 2) (hopefully) lead to fame and fortune. I’m still working towards the fame and fortune, but it’s certainly led to exploring and learning.

My latest project: custom instagram filter effects.

There’s an entry point for every creative background

You know how every tech person’s origin story is customizing their profiles on Neopets/Myspace/Geocities? It was a time where there were GUI tools available, as well a lot of tutorials to copy from and modify.

This feels like that.

Image for post
Image for post
SunnyNeo is the real MVP

Over a decade has passed and interactive augmented reality is much more complicated than anything I grew up with in the 00s. However, it feels easy to pick up because there’s an entry point for everyone:

  • 3D modeler? I’m in need of futuristic AR headgear.
Image for post
Image for post
Sims creators will understand this map 😂

Knowing I wanted to created something for my cats, I started out with inspiration from Thai creator @plydgaf. It only snowballed from there.

Helpful Youtube tutorials that I used:

As with anything other tool, there’s many ways to do the same thing

Take a look below. They are different ways of achieving the same thing — iterating through effects by tapping the screen.

Image for post
Image for post
Tap the screen to iterate through an animation sequence. This architecture is similar to a slideshow.

I had many more iterations here that I didn’t screengrab that were amalgamations of the two methods.

Image for post
Image for post
The version I ended up with. This leverages the custom UI picker and injects textures to the objects based on the picker that was selected. Excuse my board, I should know better.

Debugging can be a treasure hunt

At a high-level, the hierarchy of elements in SparkAR is like this: Environment > Objects > Materials > Animations > Textures.

And each of these elements has configurable and programmable properties.

When debugging, it’s a process of iterating through the elements and their relationship with each other to find the root cause. I recommend for anyone learning programming — the exercise feels very much the same.

Image for post
Image for post
Spot all the creator tool UI patterns!

Know your limits and know when to ask questions

Some bugs, I quickly solved on my own thanks to my graphic design background and having seen similar problems before. I got stuck when it came to rendering and interactions.

The SparkAR has a lively community. Within minutes, I got a response to my bug. And as I have previously learned, there’s many ways to fix the problem.

Image for post
Image for post
All of the responses worked to solve my problem in different ways.

Publish it before you feel like it’s polished

Perhaps what I love most about instagram filters as a medium, is that it’s very forgiving of imperfections. They’re definitely there, and you’ll definitely notice them, but don’t fret too much because…

  • You have no control over the user’s environment (lighting, other 3D objects, hair and face structure)

While I could have spent weeks perfecting the filter to work with my space in my environment, instagram stories are by nature messy and imperfect. Let’s focus on fun!

Image for post
Image for post
The perfect instagram model

That said, I did spend some time on perfecting my effect icon and screencast. Do you know how hard it is to get a cat to model for you?

All in all? I spent about 8 hours on this project. I was approved within a few hours of submission.

Host your own Block Party

To install the filter, follow us on instagram and find the filter on the effects tab. Send me a DM for what effect you think I should create next!

Image for post
Image for post

Written by

Making in San Francisco and herding cats.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store