Project #6 Experimental Camera

Description

I have found that recently most of my friends prefer to use photos of cute cats in online communication to express their feeling rather than their real photo or emoji. I also share the same preference. One reason might be that those cats are adorable, so we would love to see their photo. But more importantly, I thinking using facial expressions from another creature can help soften some extreme emotion.

For instance, if you want to tell others that you are angry but also worried that an angry face might scare them, then you can use an angry face from a kitten. In this way you can express your dissatisfaction without completely damaging your relationships with others. Then wearing a “kitten mask” turn to be a trend so I want to make a “cat filter”.

Design Process

At the first step, I want to present a camera screen as background frame, so I browsed and referenced some camera interface designs. Then I added those frame in a special cameraBackground() function.

Then I find two pair of eyes and mouths to represent cat face respectively. The distance between the eft and right corners of the mouth is used as standard to judge whether the people in front of camera has a happy face or sad face. And this technique and data comes from the document clmtrkr.js. So that I can place the cat eyes at the original eys place, and same for the mouth.

Reflection

I also want to add a filter to the video, but I could not execute capture.loadPixels() and I have no idea about how to fix this.