Social Media Social Distancing

Today marks week 4 of government imposted self-isolation in Croatia (and many have been isolating even longer).  In order to go out, many people are sewing their own face masks.  I found a great pattern to make some for my family, and we have an old sewing machine here at our house, but I could not get the machine operational 😦

In the absence of being able to create my own physical face masks, I thought it might be fun to create virtual face masks for my social media profiles: Social Media Social Distancing.

Build your Own

I have posted the Node app that generates these at Glitch, Simply upload a photo with a face, and an image “pattern” for the mask, and your own social media social distancing image will be created!!

How I did it

I used Cloudinary to do all the heavy lifting.  Using the Advanced Facial Recognition Add-On (you get 50 for free each month!), I am able to identify a face, and regions on the face.  I then draw a box across the face from the nose to the chin.

One transformation in Cloudinary allows you to round the corners of the box (and to specify the corner to round).  So by using the url parameter r_0:0:30:30, the bottom corners have a 30 pixel radius rounding.  I know the width of the box, so I round the corners to 1/2 the width of the box, and it simulates a chin of the mask. I then use the e_cut_out  to remove this section of the image:

Nice! Now we can add the mask “fabric” as an underlay:

Adding a mask

Using the underlay attribute, we can simply add an image of a pattern underneath the photo of me.  I wanted some cool cloth patterns, so I went to the fabric store and downloaded a few swatches of fabric.  I really liked the dinosaur print, but when I applied it to my face, it just didn’t look so realistic:

I need to distort the fabric a bit to make it appear as if it is wrapped around my face.  Luckily, I can do this as a part of my upload using a displacement map. I used the following gradient image (white is the highest point – the nose, and black the lowest (around the side of the face, and a displacement of y=-70:

Placing this distorted image behind the facial cutout, we receive:

And we are now ready for Social Media Social Distancing!

Give it a go, and share your masked persona with all of your social media!

Contest

Cloudinary loved this idea, and wanted to make it into a contest!  Share your masked image on Twitter with #LivinLaVideoLoca and enter our contest by April 23.  The winner will have a donation made in their name for COVID relief efforts in your area.