In the past 2 weeks, my partner Xuan and I made a mirror in p5.js together.
It was more like a project of experiments, we tried a lot of effects by manipulating colors and pixels as well as playing with different libraries.
ml5.js
Facemesh
The final library we used was the FaceMesh model from ml5.js. What this model does is that it recognizes the keypoints of one’s face and return them as array datas. It was a fun experience to include a foreign library and go through all the nested arrays to find what we need.
Pulling out data from the model
At the end, we only pulled out 2 data from this model – the topLeft and bottomRight in the bounding box array, which indicates the x, y positions of the face area, only in an array form.
So by converting the array datas into numbers, we could then put the data into use.
Experiments
Our final result is based on this experiment where a grid of faces covering on our original face. We liked the creepiness that came along with a bit cuteness (maybe?)
Xuan then added some effects on the bottom layer of the original cam image, to give it a digital atmosphere.
Final result
At the end, we made this mirror that looks very digital with a television aesthetic. We also hope to add glitches and more details in the future, while trying not to crash the browser.
play with fullscreen – click here
sketch in p5 – click here
Challenges
Besides all the crashing from manipulating pixels and duplicating images, one of the challenge we encounter that took us by surprise is the difficulty to present in window width and height.
