A simple procedural animation technique

procedural animation has always felt like magic to me there's something captivating about the way it can bring characters to life even though each and every movement is computed by an algorithm the overall result feels fluid and natural as someone interested in biological simulations I was also curious about using procedural animation to visualize virtual animals so for the past few months I've been learning about and exploring various procedural animation techniques in the end I landed on some techniques that I think are surprisingly simple and elegant today I want to share these techniques with you and walk

you through the process of creating procedurally animated creatures let's create a point and call it the anchor now imagine we have a desired distance from the anchor which we can represent with a circle if we have some other point that we want to constrain to this desired distance or in other words project onto the circle one way to do so is to draw a from the anchor to the point we can then scale this Vector to the desired distance which shows us the new position of the point this is called a distance constraint if we

continuously constrain the point while moving the anchor an interesting Behavior emerges the point essentially follows the anchor around let's do this again but with multiple points this time we'll chain together distance constraints so that each point is constrained to the next when we move the first point we can see that the whole chain follows the order in which we evaluate the distance constraints also matters if we evaluate them starting from the last point the chain moves from the other direction this chain somewhat resembles a wormlike creature and if we connect the points with thick lines

we get a better approximation using the chain as the body of the animal is great for animating worms but if we want to animate something more complex we'll need more control over the body shape let's create another chain but this time let's define a body size at each point we can visualize this with some circles which gives us the outline of the animal's body depending on the values we choose we can have different body shapes since each part of the body is centered on the Chain the shape of the body is preserved even as the

chain moves the chain is now the spine of the animal in a sense the next step is to draw a continuous shape around the outline of the animal to do this we need to very briefly discuss parametric equations this is the parametric equation for a circle given any radius and angle we can find the corresponding coordinate on the circle if we imagine that the circle represents a body segment from our animal what we're interested in finding is the left and right sides of the body using the radius and direction of the body segment all we

have to do is make a quarter turn in either direction to find the sides of the body in fact we can use the parametric equation to draw pretty much anything relative to the segment which will be very useful for more complex animals let's use this technique to draw an animal starting with this body shape if we Mark the left and right sides of each segment plus some extra points for the head and tail we'll have all the points needed for the outline now we just need to connect the dots and we have the body of

our animal using the same parametric equation Technique we can draw some eyes to the left and right of the head segment and with that we have a snake animation that definitely looks much better than our previous worm animation however there's one problem if the snake curves too much we get overlapping lines and our animation gets wonky just like in real life the spine of the animal should have a maximum level of flexibility and Beyond a certain point should no longer Bend to fix this we can impose some angle constraints the idea is simple given any

two body segments if the angular difference is too big we scale it back to our desired threshold after making this fix the snake can no longer collapse in on [Music] itself to make more complex animals we just need to draw more features for example let's design a fish starting with the basic shape and eyes next we can add some fins represented by some rotated ellipses we can set their positions relative to some body segments using the parametric equation technique and to make the fins look less stiff we'll set their rotation relative to the segments in

front of the fins this will make the fins look like they're guiding the motion of the body next are the dorsal and tail fins which use a more complicated technique in essence we sum the angular differences between each segment of the body to get a value that represents how curved the body is for both fins one side of their shape matches the curve of the spine the other side is also the same curve but offset using the total body curvature value for the dorsal fin the middle of the curve is offset to give it an

oval shape for the tail fin the back of the curve is offset and since the offsets are proportional to the body curvature both fins are responsive to the movement of the fish with that we have a complete fish animation between snakes and fish there is one thing we haven't explored yet and that is legs to simulate legs we first need to talk about kinematics imagine we have a robotic arm with three segments given the length and rotation of each segment it is pretty easy to compute where the hand of the arm is located if we

just draw circles at each joint it becomes clear that we can just use the circle parametric equation that we previously discussed we just have to add our ANW for each segment which gives us the coordinate of the hand this procedure is called forward kinematics but what happens if we invert the problem imagine we have a Target position how do we find the correct angles to rotate the arm in order to move the hand to this target position this problem is called inverse kinematics and it can be pretty complicated luckily there's a very simple approximation technique

that uses our previous chain simulation first let's mark a second point at the start of the arm this represents the anchor where the arm should be physically attached if we pull the arm toward the target we can reach the target position though we might get pulled off of the anchor so next we pull back in the opposite direction back toward the anchor we keep repeating this back and forth pulling until we Converge on an arrangement that starts from the anchor and reaches towards the target position this technique is called Fabric or forward and backward reaching

inverse kinematics fabric gives us a chain that can reach toward any Target if the target is too far away the chain will still try to reach as far as it can in the direction of the target we can use this fabric chain to simulate a leg imagine a fabric chain attached to the side of our animal if we keep the target position of the chain stationary it will appear as though the foot is not moving we can also Mark a position relative to the body which will be the position of the next step as as

the animal moves the foot will start to fall behind the next step position once the foot exceeds a certain distance we can take a step forward by updating the target position to be equal to the next step position this gives us a basic stepping animation so let's create an animal with legs I'm starting out with this body shape and eyes then I'll attach four legs and just like with the animal body I'm drawing the leg shape around the chain and we've got a slightly Derpy [Music] lizard anyways that's about all I have to share for

today I'm hoping to feature more procedural animation in my videos moving forward but until then thank you for watching and I'll see you next time a