Make your first Instagram filter | #christmashackathon
Tags: showdev, challenge
Published: 2021-01-02 09:33:40

This is my submission for [Hashnode Christmas Hackathon](https://townhall.hashnode.com/hashnode-christmas-hackathon), it was an interesting project, so sharing it here too.

Note: If you face any difficulty in seeing some GIFs then check the original blog [here](https://bashwoman.com/make-your-first-instagram-filter).

## Final Product

![final product.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609524754127/UtxxiE8xV.gif)

## Introduction
We all use social media like Instagram, Snapchat, and we must have used many filters too. And if you're in the tech industry, then you must have thought of making a filter by yourself, and you will be wondering how can you do that, right? Well, I have, and in this blog, I am gonna share how I build an Instagram filter on my own. 

## Prerequisites

- You must have [Spark AR](https://sparkar.facebook.com/ar-studio/download/) on your PC/Mac.

That's it. 

## What is Spark AR?

**Spark AR Studio is an augmented reality platform for Mac & Windows that allows you to somewhat easily create AR effects for mobile cameras.**

![spark ar.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609514289177/7PBirZImm.gif)

## Is it free/paid?

It is completely **free**.

## Step 1: Download Spark AR 

You can download the software from [this website](https://sparkar.facebook.com/ar-studio/download/). 

## Step 2: SignUp/ LogIn

After downloading the software you have to log in to your Facebook account, if you don't have an account make one. Why a Facebook account?
Because **Spark AR** is a product by **Facebook**. Simple. :D

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609514681775/c3FbnSzav.png)

After **login**, you will find your screen something like this. 

![spark ar 1.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609515302691/0yysQpwig.gif)

You can choose whatever option you like, but I am going to make the project from scratch. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609515381933/UvwoHr-RF.png)

So, for that, choose a new project, and then select the **Blank Project**.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609515450509/Cf77Lj10f.png)

After selecting **Blank Project**, it will look like this.
![man.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609515802702/noczfaTig.gif)

The screen that you are now seeing is called **viewport**, and you can move this by following some shortcut keys:

- **Ctrl (Windows)/ Command (Mac) key with Left key of the mouse:** To move the whole scene.
- **Alt (Windows)/ Option (Mac) Key with Left key of the mouse:** To move the view, where the man is visible.
- **Scroll bar or Ctrl+Alt (Windows)/ Commands+Option (Mac) keys:** To Zoom in/out

## Step 3: Applying the effect

There are many ways that you can add your desired effect:
- Either search it on the **AR library**.
- Or you can also **upload any image**, and use that as a filter.

For this tutorial, I am using the AR library to make you understand better, but uploading your own image is not much difficult. 
So, to search in the AR library, just locate to **File -> Search AR library**.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609522409110/eYEBtCUxd.png)
After that, there are two sources for the models that you will use.  
1. **Spark AR Assets**  
 These are just 3 models.  
2. **SketchFab** (for which you have to create an account)  
They are ready-made 3D models, which means you can just import them into your project. I suggest you use this if you are very new to this platform so that you won't get confused.

So, I will just search for **heart** for this project, but I will suggest you explore the library, there are 1000s of models available. 
After I search for **heart**, it will prompt many results in front of me, choose whichever suits you the best.
I chose this.  
And you can see here that there is a **login** option already available because it's provided by **SketchFab**, when you click on **login**, it will redirect you to the website of SketchFab, and you have to make an account. 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609522392912/zydDz5pyb.png)

After clicking on **login**.
Fill in your details, either use your **Email** or use your social handles to make an account. You have to choose a username too. 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609522353311/7jCBGsMX7.png)

After doing all the above steps, you will see the **login** option will be changed to **Download**, click on that, and then **Done**. 
Your **asset** is now imported to the project.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609522517936/S5FnAq8Lj.png)

## Step 4: Setting the position of Asset

Initially, it will look like this:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609525938821/7zYsCEKKK.png)

Now, the question is how we will show the heart in our project?
Well for that you have to understand one thing.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609525987340/waTk7UYQA.png)
If you notice in this image, all the assets that will be displayed or visible on the scene are in a nested form.
**Device -> Camera -> Focal Distance -> ambient light 0 and 1**

All the things that you will use in **Spark AR** will be nested. And if you're already familiar with some programming, then it is easy for you to understand what **nested** means.

And if we want to show **heart** on the scene we have to put **below Focal Distance**
So, let's put it.
Before: In the asset section.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609526269026/BaUIMbtsu.png)


After: In the scene section.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609526329388/hs19tWyPq.png)

But if you notice the whole camera is hidden by the heart, and the woman is not visible.
Now, we have to set the size of the heart.
You can move the heart like this:

![Heart position](https://dev-to-uploads.s3.amazonaws.com/i/j383vhrabghw05v1s3xy.gif)

You must be aware that there are 3 axes here:
X-axis
Y-axis
Z-axis
And if you've noticed here that when you're moving the heart, the values on the right section are also changing. That means you can also just edit the value from there too. Whatever method suits you the best.

I just like to move it, as guessing values can take a little more time, and time is important. 

After setting the position of the heart, the next thing is to select the right color, and the heart's color is **red** (mostly). 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527189580/AO-bPiNZP.png)

You have to select materials in the right section and then select the heart. By default, it was **material0**.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527242583/AeBaJ8zEi.png)

After selecting the heart, you will see that the color is changed to red.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527278749/gdhSwJlS2.png)

You can move the heart as you like. 

## Step 5: Adding a 2D text into the Scene

Now, if you want to add a 2D text into your project, then just right click on the scenes section, and you will see **Add -> 2D Text**. That's it.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527380123/Bc3U_gHMU.png)


The scene section is changed now. It has one more thing, i.e. Canvas. Under which it has one object called **2dText0**.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527451667/A5NY8cvJB.png)

And on the right side, you will see something like this.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527529236/-1RDD0lXa.png)
Here, you can change the font, color, size, height, width, and many more things for your text.   
First, we will change the **text** to **Hello Beautiful People**, it's the word I use in my [YouTube](https://youtube.com/BashWoman) videos. Do subscribe to my channel. :D  


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609527656385/oHyRGkO_U.png)
But after changing the text, it doesn't look good in our scene. The text is not properly written, to make it right, we will adjust the height, width of the text. 


![pinning.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609528461921/H_yivN_ao.gif)

### Pinning

Pinning a rectangle means it will maintain the same distance to its parent's border - however much you transform the parent.

Rectangles can be pinned to the top, bottom, left, and right.

## Step 6: Testing

Before uploading the filter for the review period, you can test it out. 
For that, you have to download the app, either on iOS or Android, i.e. **Spark AR Player**.
After downloading, go to user Spark AR on your laptop. Click on **Test on the device.**


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609529986440/b9ZCfWZwW.png)
After that, you will also get a **test link** copy that and paste it into your phone's browser. 
After that, it will ask to login into your Facebook account, and it will open the Facebook camera, make sure to record that, if this is the final product, because the Facebook team will ask for a demo video for the effect. 

## Mirroring Effects to AR Player

### **Things you'll need**  
**To preview an effect in the Spark AR Player app, you'll need:**  

- To download and install Spark AR Player on either an iOS or Android mobile device.
- To install iTunes on your computer, if you're using a Windows machine and plan to test your effect on an iOS device.
- A USB cable for connecting your device.
Connecting your device  
**When you're ready to mirror an effect:**  

- Connect your mobile device to your computer with the USB cable.
- Open the Spark AR Player app on your device.

## Step 7: Uploading and Review Period

Now, our filter is complete, and we have to upload it to either Facebook or Instagram. For that go to:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609528613620/A2aHba1fz.png)

You will see this screen.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609528647240/R58wamCgm.png)

All the details must be correct, in case you have any error, then resolve it. 
Now, there are two options:
1. **Publish a new effect**  
That means you have made a fresh effect.  

2. **Update an existing effect**  
This means that you had already an effect, and now you want to make some changes in it or say you had some bugs that you want to remove. 

For now, since it is your first effect, select  **Publish a new effect**. It will start uploading.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609528857444/EYgaoBrZJ.png)
After that, it will open a window in your browser, and you have to fill in all the details it asks for.


![Spark AR Hub.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609530466120/SCgwSeMrb.gif)

## Final Product

![final product.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609532203024/xGSA8NuFh.gif)
So, this was my project submission for [#christmashackathon](https://townhall.hashnode.com/hashnode-christmas-hackathon).  


**Note: The review period is approx 10 days because the Facebook team checks all the effects manually, and if they find anything wrong then your filter will not be approved, and you have to make the changes accordingly, and again apply for the review period.**

My filter will take time to get approved as I made this just now, while  I am writing this blog, but after getting approved, I will update this.  

## Connecting an Instagram account to a Facebook profile or Page

To publish effects to Instagram, you need to have your Instagram account linked to the Facebook profile or Page that will manage the effect (the effect owner). The followers of the Instagram account linked to the profile or Page will be able to discover the effect in the Instagram camera while browsing through effects.  

All Instagram account types (personal, creator, and business) can publish effects on Instagram.  

**Connect your Instagram account to a Facebook profile**  
If you just have one Instagram account and one Facebook profile, to connect your account to your Facebook profile:

1. Log in to your Instagram account.
2. Follow the instructions in the Instagram help center to connect your account.
3. Refresh Spark AR Hub to make sure the accounts are properly linked.
 If you’re still having trouble linking your accounts, try logging out of both apps, then, first, log in to Facebook followed by Instagram and repeat steps 2 and 3.

## Future Scopes

There are a lot of things to learn in **Spark AR**, I have learned about patches, that can be really difficult to understand for the first time, that is why I tried to make it simpler, and if you want to start making any filters or effects make smaller and simpler ones because they are easy to understand and apply. There are a lot of things you can do. 

Make a game, skin smoothing filter, object like you may have seen the filter with PS5, that was so real. So, you can make all of that. But as I always say, don't jump directly to the hard parts but do some basic things, and understand the concepts first. After that, you can make many cool projects using this, ad if you're interested in AR, you will find it very easy, and exciting as it's really easy. 

**Explore** 🔮🙌  
Please drop an ❤ on this blog.  

Connect with me!  💻❤  
🎥 [YouTube](https://youtube.com/BashWoman)  
💪 [LinkedIn](https://linkedin.com/in/seemasaharan)  
😊 [Twitter](https://twitter.com/SeemaSaharan5)  
❤  [Instagram](https://instagram.com/bashwoman)