This week I made a distorting mirror using face mesh from ml5.js.
I began with the idea of directly distorting the faces and output the video, so I added the face model, and wrote the following code.
And I found out that it was a bit hard to directly distort the video output, so I changed to using the keypoints from the model to represent the face. This looked a bit plain on the video background, so I recalled some naked eye 3d design color pattern and got this.
I also loop the origin face in the background cause such layout looks cooler, and attracted audience better.
https://drive.google.com/file/d/11msF6FGQ_qxKfjNgfn0rxEFtQdhZqlre/view?usp=sharing
The next step was working on the distortion. I asked chatGPT for more distortion equations and the following is what I got.
if (y > height * 0.6) r *= 1.8; if (y < height * 0.35) r *= 1.4; if (abs(x - centerX) < width * 0.1 && y > height * 0.35 && y < height * 0.65) r *= 1.2; if (x < width * 0.3 || x > width * 0.7) r *= 1.3; r *= 1.0 + 0.05 * sin(frameCount * 0.05 + x * 0.02);
I liked these the best so I chose those.
And then I thought that the benefits of developing online is that we can change as users’ wishes. As a result, I added some UI button.
Below is the final demo video.
https://drive.google.com/file/d/1hKbLpFrqki5n7uietVPUA8ueKaKYBSXx/view?usp=sharing
And that’s all for this week. =D