Expression Interpilation - The Mouth

One of the hardest things I'll need to tackle is figuring out a way to do expressions. Now, I could just make a whole bunch of presets, but that's not the way I like to do things. Instead, I'd like to come up with an algorithmic way to create expressions.

Focusing on the mouth, two things immediately come to mind: the first is that the muzzle changes shape depending on if the mouth is opened or not.

 

The second thing is that the mouth seems to work independently from the muzzle, especially while the mouth is close - it almost appears to be superimposed when the mouth isn't opened.

Alright, well let's look at the curves needed to create both mouths, starting with the closed mouth:

You can see that the curve that makes the mouth is completely independent to the curve that makes the muzzle. It's also worth pointing out that the mouth only needs a 3 point bézier curve (two end points and 1 control point) instead of the standard 4 point bézier (two end points and 2 control points). 

Now let's compare this to the curves of the open mouth:

Instead of having two separate curves, we have one line made of several curves - 4 to be exact. This is 2 more than when the mouth is closed. The good news is that some things haven't changed at all - the end points and their respective control points for the curve that makes the muzzle are unchanged. Also, the end point of the curve that's at the corner of the mouth still doesn't have any control points. However, it would seem that there's now two curves that make up the mouth instead of just one, and one of them has an end point that has collinear control points (which is why the top of the mouth is curved instead of a sharp corner like the bottom).

Ok, so in order to create both shapes, we have to satisfy the minimum requirements of either. This means we'll likely end up with a less optimal shape. That would be obvious in the case when the mouth is closed, since it usually requires 2 curves total. So let's come up with a case where we can create the shape of the closed mouth using 4 curves:

In a sense, this is the same as the example with only 2 curves - the curves that make up the mouth are identical - they might as well be one curve. Everything else pretty much remains unchanged between when the mouth is close and when the mouth is opened... EXCEPT the corner that makes up the top-front of the mouth!

Look at the curves for when the mouth is opened... 

Do you see how the control points are collinear for that one corner, making the top part of the mouth a smooth curve? Compare that to what we just made and you'll see that corner's control points AREN'T collinear when the mouth is closed, which makes it a sharp corner. Do you know what that means? It means we have to interpolate that corner when transitioning between a closed mouth and an open one!

Let's play pretend for a moment - let's say we have a slider called "muzzle-mouth curve" that is used to go between a closed mouth and an open one. When the slider is set to 0 we get the closed mouth shape, and when it's set to 1 we get the open mouth shape. Between the two shapes it would create, we already know what it would look like when it's set to 0. In order to get the other shape, we'd have to make the control point of that one corner (the one that determines the curve of the top-most part of the muzzle) move around until it's collinear with the other control point for that corner. That would look like this:

(I admit, I accidentally moved some other control points too, but ignore that.)

You can see that the top part of the mouth, despite the mouth being closed, now looks rounded. The two identical curves on the inside of the mouth remain unchanged, but we've still managed to get that smooth upper-mouth we need when a character has their mouth opened!

There! We've taken the first steps needed for doing interpolated expressions!