[Example Project] Animating a skeleton dynamically using IK

Hey, Lens Studio Community!

Last week I shared a project where we can drive animation using skeletal tracking. 

This week I wanted to share with you another way we can drive animation, this time in real time using a technique called Inverse Kinematics. 

Download project here

This technique is useful because it allows you to animate multiple things which are connected together, based on one control point (in our case moving a leg using one joint). Additionally, because the animation is calculated in real time, you can have the snapchatter affect the animation so it feels more personal.

Breaking It Down

In the above gif, you can see how as I move the foot of the skeleton, its thigh and shin moves to accommodate its position. 

The way we do this is by using the angles in the triangles formed by the joints of our skeleton. You can see in the image below, how the different foot positions changes the triangle created.

In our example project, we do this calculation in the IK Controller 2D script. In it, we have an input for the 3 points of the triangle, which we link to the joints of our skeleton. Then, in our script we use trigonometry to calculate the angles made by the triangle. Finally, we apply that rotation on a rotation axis to rotate our skeleton’s joint around.

Animating Using Math

Now that we have our bones reacting based on one control point, we can much more easily animate our skeleton’s leg. 

For example, if we move the hips up and down using the mathematical sin function, our skeleton would now automatically move its knee joint out to make it look like our skeleton is bending its leg!

In our project, we set the factor at which the character moves their hip in the Character Controller object. 

Animating Using User Input

Of course, we want our user to still influence our animation. 

Just as we used the head rotation to influence the spine last week, we can influence our hip using the head as well. You can see below that when the head rotates farther, the hip moves farther.

To do this, we calculate the angle between the head and the up vector, and use that as a factor to figure out how far to move the hip left and right

That’s It!

To recap:

• We can create a triangle based on the three joints of our character’s leg to calculate an angle which we can use to rotate the joints of our character
• Once our bones move in connection to each other, we can move a joint up and down to create an animation
• Because the animation is dynamically generated, we can have our skeletal tracking influence the joint to make the animation react to our Snapchatter!

Next week we'll take a look at how we can make a complete Lens experience by timing our dancing skeleton to music and timing effects like particles, tweens, and post effect to it

Download the project here!

Let us know if there's something you're interested in creating, or if you have any questions about our process!

Best,

Olha