This is an experiment to produce very simple cartoon faces. I’ve been drawing faces for my red blob logo since 1987, and have wanted to find ways to generate them algorithmically. I started this project back in 2011 when I was reading Scott McCloud’s Making Comics and saw the part about interpolating between facial expressions (page 85). I loved the faces in Order of the Stick[1] and wanted to try making some simple expressions programatically. In 2015 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, especially the pathfinding page[3]. I ported my 2011 ActionScript+Flash mouth shape code to JavaScript+Canvas. Now it’s 2018 and I wanted to update it.

Click Random repeatedly.

Smile Glee Joy Sad 1 Sad 2 Grief Surprise Shock Worry Fear Anger 1 Anger 2

Back in 2011 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. I’d like to make a version that doesn’t have this constraint. 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. If your browser can still run Flash, you can see the original mouth parameterizations I played with here[4] and here[5].

Things I still want to add: