The widget is a re-implementation of Joost Broeken's original Java version. Please refer to his homepage for more information. Basically, you're free to use it in research or education context -- but commercial application will require his explicit blessing.

I will now attempt to explain briefly how it all works...

Mapping X and Y co-ordinates to P/A/D components

The attentive reader will have noticed that the canvas is two-dimensional while there are three scalar components. And sure enough, there are lots of P/A/D triplets that you cannot "reach" via input at the canvas.

The important thing to note here is that:

I cannot speak to the merits of this restriction, but surveys suggest that users feel the widget is sufficiently expressive.

Mapping P/A/D components to facial expression

The three scalar P/A/D components span a cube, [-1,1]3 for the mathematically inclined. For each of the eight vertices of the cube, as well as the origin at (0,0,0), Joost has assigned numerical values for eight "features", such as the openness of eyes and mouth, distance between eyebrows and eyes, rotation of eyebrows, curvature of lips. These are the parameters that are used by the paint function to actually draw the face.

I like to think of these nine anchor points in P/A/D space as "archetypes". For an arbitrary P/A/D triplet, we determine the (Euclidean) distance to each of the archetypes and then "mix" the associated feature values by computing a weighted sum. The resulting feature vector is then used to repaint the face.

The nine archetypes are displayed below:

You could re-create each of these archetypes in the Demo section by moving all three sliders to extreme positions at -1 or +1, or to re-create the neutral face at the origin of the P/A/D cube by moving all three sliders to 0.