How to use and combine trigonometry functions to animate things (Patreon)

Hi everyone!

I received a very interesting question on Twitter the other day, and answered it quite extensively. I figured my answer might help some more of you, so here it comes!

Here is the question that I was asked:

When you work on a demo and you decide to use a trigonometric function (cos, sin or atan2) with parameters, how do you know which parameters to pass and combine to get what you want. I think that if we want to go further, my question boils down to how do you know the parameters that you put in these trigonometric functions to get the desired behavior. Do you use custom programs for this, or other tools? 

And here's my answer! (Note that the angles in the examples I give are turn-based, not in radians or degrees - here's why)

So, first off, atan2 is only ever used to get the normal angle of a vector, which lets you get the angle that goes from a point towards the cursor for example.

cos and sin are the functions generally used to move things on the screen. The important thing is to know what those two functions look like on a graph. Basically, they follow a wavy pattern that moves between -1 and 1 and which resets every '1'. (cos(a) = cos(a+1))

The only difference between cos and sin is that sin's wavy pattern is offset by 0.25: sin(a) = cos(a+0.25). So you might as well only use either cos or sin and it won't really make any difference.

Let's say you go with cos. You're using it because of its smooth wavy pattern. What matters from there is the parameter you'll pass to it. Let's call that 'v'.

If you simply want your object to move back and forth at a regular pace, you'll use 'v = time()' or 'v = k * time()' where 'k' is the number of back and forth motions you want to happen in a second.

You might have a few different objects to have this motion and you might want them not to be synchronized. So you might use 'v = k * time() + a', where 'a' is an offset, random or not (maybe depending on the y coordinate like in my twisting-pillar tutorial), added to the time and different from one object to the other. Note that 'k' might also be variable from one object to the other. But also note that both these values should always be the same for each of your objects, only time() should change from frame to frame.

That's for a regular wavy motion, but you might want something more complex than that, yet still smooth. That's where the combining comes in. For example, you might use multiple cos instead of just one:

0.5 * cos(v1) + 0.5 * cos(v2), with 'v1' and 'v2' having different 'k' and 'a' constants.

Or you might have this:

cos(k1 * cos(k2 * time() + a2) + a1)

Instead of having the regular pace of time() to control your cos(), you have another cos() to do that, giving you... a wavy pace. This makes the motion slow down and speed up in a way that looks almost random. But it stays smooth, as long as 'k2' isn't too high. (and k2 should be quite low, probably under 1) And if that's not complex enough, you might combine all of that even more! Here is an example of what you might get:

0.7 * cos(0.2 * sin(time() * 0.1 + y / 512)) + 0.3 * cos(-0.2 * time() + y / 2048)

Here, I'm using a negative factor for the second time() call. And also, both calls have an offset which depends on the y coordinate, but one is y/512 and the other y/2048. The result is a motion which looks almost drunk because of how irregular it is, but is still always continuous.

And that's all you need to know! No need for external software! With all this in mind, you can just write-out a simple movement formula, test it in-program and tweak it from there!

The end! I hope that helps some of you!

Have a nice week-end!

TRASEVOL_DOG