Hey!
Let's continue with procedural animation. It's really interesting thing! And I have a lot of ideas what to show you. But I don't have enough time just to type it here...
Today I took a rest and made this for you (source code):
I've wanted this to my collection for a long time. It was interesting, how is it possible to make squeezing (at the bottom point) and stretching (while moving) with really simple code. As it turned out, there is no way to do it withoud math. But I am sure, we are OK with it after my first post.
How gravity does it
Let's look on parabola function. And... it is how the real ball moves while throwing. Gravity does it with parabola :) Here it is: |
| red, у=-(x-1)^2+1 |
"Wow! Graphs?" - you say. Yeah, them could be useful sometimes. Don't pay attention to the formula under the graph. We won't use it. Anyway... let's continue!
Ok, the object moves up, then the Earth's attraction becomes noticeable, and then ball moves down. We remember that from a school. Something like this:
I use this really often, but not for periodic movements. So, if I want just to throw something once - it's ok, I will use parabola-function. But, if I need a jumping many times ball or something (especially with squeezing at the bottom position) - I can't use ordinary parabola.
How we will throw the ball
If we have periodic movement - so there should be sine/cosine functions. I'd like to introduce you absolute value of the sine function (the blue one): |
| blue, y=abs(sin(x*pi/2)) |
It really looks like parabola! That's great! And periodic movement comes just from that. Sine is great:
Squeezing at the bottom
Ok, now we have ordinary up-down movement. But we want additional movements with... like squeezing at the bottom point. Let's think how to do it...Here is one trick. Look, if we just raise a little bit the ground so our ball is going look like it's under the ground for some period of time, like this (I slowed down the movement on the gif so you can see it more clearly):
Now we are going to compress spite vertically so that its down part stays always on the ground and visually don't move under the ground.
Ok, with the vertically scale it's more or less clear but what about the stretching along the horizontal axis? I don't want to pour out a lot of math, so I just tell, that multiplication of the scales remains unchanged. Like scale.x * scale.y = 1. Ok, let's try:
Stretching during the flight
Right here I got the biggest problem. The matter is that the stretching should look natural and at the same time steady by movement up and down. The problem is that sine function grows up rather fast but I need a little pause before it's growing. In this case I invented to use the power 4 for sine:
To change the horizontal scale use this scale.x = 1 / scale.y again:
Wow! A drop of math makes the ball alive!
Make it perfect!
Everything looks great, but not perfect... Pay attention on the last gif where you can see how small period of time the ball spents at the bottom stretching-squeezing. (of course take in account the gif also makes the quality worse). It would be great to delay the ball there a little bit more giving eyes oppotunity to understand everything.Let's make another trick and change our initial sine (which is used for up-down movement). Raise it to the power and it's going to fall quicker but stay a littel bit longer at the bottom. Let's look at the result:
Source Code
I like to put the source code to WonderFL. Juicy, simply, conviniently.Result
Procedural animation demands a lot of math and dozens of experiments. "What is the bonus of this stuff?" - you will say. The code is really easy understanding in this case. We can tune the movement really fast and in obvious way. Change the height of the jumping, force of the squeezing, the time in the bottom point... and at the same time the whole movement stays unchanged.Here you an find an example of changing two constants (from the source code) and how they influence to the movement:
That's it... good procedural luck to everybody!
0 коммент.:
Отправить комментарий