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.
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.
- Photography nerd? Light leaks and photo filters, please.
- Interaction programmer? Games and quizzes is largely unexplored.
- Animator? Teach me everything you know about physics.
- Graphic design nerd like me? Textures!
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:
- Estefannie Explains it All — A very useful series that covers the basics!
- Ben Marriot — HUD effect tutorial
- Udart — Custom UI picker
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.
I had many more iterations here that I didn’t screengrab that were amalgamations of the two methods.
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.
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.
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)
- You have no control over the user’s camera (quality, movement)
- You have no control over the user’s device (processing power, screen size)
- You have no control over Instagram (rendering, processing, compression)
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!
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.