Introduction | Instructions | Controls | Demo Video | Source code
Facewarp is a simple applet that lets you create a deformation animation between two difference faces. Right now, you can warp Devin Hunt into one of the guys in Postal Service. How splendid.
There are four phases to create a warp. First, creating a characiture of the first image. Second, correlating similar points between the first and last image. Third, tweaking the correlation and lastly creating a characiture of the last image. During the first, third and fourth phases creating a deformation is as simple as clicking on the image and dragging. Try it!
Step One: Making a Funny Face
In this step, a user must click and drag points of the image (my face) around to distort the image a make a characiture. Be sure not to mess with the held points on the border! You may press space to toggle on and off the grid and pin markers. If you wish to delete and constraint (red circle) just control+click it.
Step Two: Correlate the Two Faces
In this step the user must place marker on similar points between the two faces. The more markers the better. To do so, first click on the left face (my face) to place a green marker. Then click on a similar feature on the right image, dropping a blue marker. Continue doing so until all the important points on the face are marked. Don't worry if your click was off, you can click and drag the markers. Be sure to have only green markers on the left face and blue and the right. When you are done, click the text. The below image demonstrates two well correlated faces.
Step Three: Tweak the Mesh
This step simply shows the result of the correlation. If it looks good, just click on to the next step. If something's off, just adjust mesh as you see fit.
Step Four: Make another Funny Face
Just like the first step, distort this face. Same controls apply.
Spacebar: toggle mesh-grid on/off
Control + Click: delete pin on the mesh grid
The following is a video showing the face warp system from start to finish, enjoy! You can download a full quality version of the video here.
CS4496_P3_pass3 A_Mousey BlendMarker Correlator FaceBlend FaceWarp Geometry QuadMesh SlideText WarpMesh
Everything excluding photos was created by Devin Hunt with help and guidance from Jarek Rossignac.
Built with Processing