Animated avatar using Processing, a webcam and OpenCV library

A few days ago I was asked how I created the animated avatar for my Fediverse account, and here’s the step-by-step guide. Also this is my first blogpost in english, which may look a bit weird for my italian speaking readers. But that’s how it is… probably I should have starded earlier and have built a whole english section for my website, but that’s nothing I can’t do later, if this becomes an habit.

I just apologize in advance, since my english is nowehere this good to be read by demanding english readers, and I don’t want to use any automatic translator while doing this.

1. First of all you’ll need to download Processing from their website processing.org. Processing is a digital sketchbook that lets you program graphics, animations and visualizations using a set of commands and libraries in Java. You don’t actually have to know all about Java, just some basic programming education is needed.

2. Then you’ll need a webcam. My PC integrated webcam was more than enough.

3. Finally, you’ll need to download the OpenCV for Processing library.

I’m not so knowledgeable about Processing and OpenCV, so my workflow was just a lot of trial & error… However the result was very much the effect I wanted. Honestly speaking the animated avatar was more a side-effect than my actual objective which was, in reality, a live webcam filter.

Basically, the workflow I followed is this:

1. Get a webcam frame and place it on an off-screen buffer.
2. Apply the face detection function from OpenCV. This returns a rectangle (x, y, width, height) where the face is detected inside the webcam frame.
3. Get only the rectangle with the face and discard the remaining pixels on the webcam frame. This allows to have a face-only image: if you move around the picture frame, only the face with the same proportions and size will be extracted for any given webcam frame.
4. Apply a threshold filter to obtains a black and white image.
5. Scan the resulting picture stepping by the given dot size, and place a circle when a white pixel is found at place.
6. Rinse and repeat.
7. Capture the output window with your favourite screen grabber and convert the video as a gif image. Or use the output for live streaming instead of your webcam using OBS Studio, another great Open Souce Software for recording or streaming lives and screencasts.

You can look for the full code on my codeberg.org profile. It should be commented enough to sort out what’s going on. If it’s not, please let me know and I’ll add and adjust until it fits! Or you can just download it and run it on your computer!