This is an experiment to produce very simple cartoon faces. I started this back in 2011 when I was reading Scott McCloud’s Making Comics; I loved the faces in Order of the Stick[1] and wanted to try making some simple expressions. More recently, I was inspired by Nicky Case’s Parable of the Polygons[2], and started thinking it might be nice to add some personality to my tutorials. I ported my 2011 ActionScript+Flash mouth shape code to JavaScript+Canvas:
Just click repeatedly.
I spent a lot of time exploring possible parameters. Some parameter sets always produce good faces, but don’t produce all good faces. Some parameter sets produce lots of good faces, but also produce lots of bad ones. The above set (m, p, q, r, s) works pretty well for mouths, with the only constraint being m+p+q ≥ 0. The main parameter space is a a five dimensional hypercube (with a slice cut off for the one constraint). In addition, the (skew, rotate) parameters add asymmetry to the mouth, and (browLift, browAngle) control the eyebrows. I haven’t worked on eyes yet.
You can see the original mouth parameterizations I played with here[3] and here[4] (Flash) The one I liked better was m=mouth opening, p/q=lip position, r=roundedness, s=smile position.
For all the original geometry models I had used Bezier curves. I was never quite happy with the mouth shapes. When I later explored Bezier curves vs circular arcs for road drawing, I started to appreciate circular arcs much more. I’d like to go back and see if circular arcs would improve the mouth shapes here.
I’d also like to explore a small emoji-style format where the eyes are just dots and the mouths are simple lines. Eyebrows would only show up occasionally.
Blinking eyes can make a big difference to making the face feel alive (see an old experiment of mine[5]); I want to add that here. Right now I have no parameters to control the eyes. I’m also unhappy with the relative position of the eyes to the mouth but haven’t decided what to do about it.