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 repeatedly.
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:
- ✅ UI: I need to make the current slider position obvious.
- I would really like a hypercube model that has no constraints (like m+p+q ≥ 0), so I want to explore different models.
- I want to add parameters to control the eyes.
- I want to add smooth interpolation between settings.
- Store the current settings in the URL so you can share the page.
- 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 want a small emoji-style format where the eyes are 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[6] - Flash); I want to add that here.
- I’m unhappy with the relative position of the eyes to the mouth but haven’t decided what to do about it.
- A “continous animation” feature could move randomly through the hypercube parameter space so you can sit back and watch faces without repeatedly clicking Random. I think this would involve constructing a bezier spline in the hypercube parameter space.
Mike Stringer has made a version on ObservableHQ[7], with extra sliders! and eyelashes!! Love it.