Stay Safe!

Inspiration

When looking through the challenges, we came across the Spark AR challenge, which was to design an Instagram filter. This seemed feasible to do for us as we are first years and so havent had much programming experience. When thinking about how we could make our filter unique, we thought about the current pandemic going on and how many people are wearing facemasks. So we decided to make a filter that puts a facemask on your face, as it seemed relevant and new.

What it does

This instagram filter looks for a face and then puts a facemask over it. As you move your head around, the facemask moves too, so that it looks natural like there is a facemask on your face. There is also a "Stay Safe!" message pulsing in the background, and we added this as we thought it was a nice message to add. We have also added #UoM on the facemask, but this is editable to whatever the user desires, and so is the stay safe message. There are also some MLH related stickers in the background.

How I built it

We built this using Facebook's Spark AR Studio which is used to make filters for Facebook and Instagram. The major component is the mask for which I got an image from the Spark AR Library and then added face tracking to it so that it detects and stays attached to the same position on the face regardless of where the head was moved. I also made size and position adjustments so that the mask fitted correctly on the face in all orientations. Then I used other components such as Canvas and text to add the images and text onto the filter.

Challenges I ran into

The main challenges I ran into were with the mask and face tracking. Initially i think I was using a facemask template which was wrong as that was more towards decorations and things that are applied directly onto the face, such as facepaint and tattoos. I tried to find the facemask template and then apply my own facemask style onto it but it seemed 2D and not like a facemask in real life. So then I remembered that there was also a face decoration template and then when I started using that things got better. I also used the facemask 3D image from the AR Library and then I had problems properly mapping it onto the face. I had to get used to how the position and scale system worked on Spark AR, as it seemed that for scale option the y and z axis were swapped for some reason and that caused some confusion.

Accomplishments that I'm proud of

I am proud that in the end I managed to successfully make the filter and that it works as intended. I really enjoyed making this as I found Spark AR very interesting and I use instagram as well and making a filter for it was cool. If this filter was to be published then I am happy that it is spreading a good message.

What I learned

I learned a lot about how to use Spark AR as initially I had never used it before. I learnt how different things can be positioned in the filter, such as items that stay in place and others that move according to the face (face tracking). I also learnt more about positioning items in 3D space.

What's next for Stay Safe!

Next steps are potentially publishing this as a filter on Instagram/Facebook, and perhaps developing more filters in the future.

Built With

• sparkar