(Page 3 of 3 pages for this article  <  1 2 3)

Filed under: Motion Graphics •

Deeper Modes of Expression, Part 1: Useful Math Expressions

Going in Circles

JavaScript – and as a result, After Effects – supports a good number of trigonometric math functions. Among other things, this makes it easy to have objects go in circles.

One of the most common trigonometric math functions is sine: Math.sin(angle). In short, as the angle rotates around a circle, the sine’s output varies in a smooth fashion from 0 to +1, through 0 to –1, and back to 0. Its sibling is cosine: Math.cos(angle). Cosine works just like sine, but it’s ahead of the game: With increasing angle, when sine = 0, cosine = 1; as sine moves to +1, cosine is moving to 0; when sine is moving back down to 0, cosine is already heading to –1.

A common use for these functions is to translate rotation values into position values that would trace a circle. This is demonstrated in the example below, where the Rotation of the wheel is translated via an expression to the Position of a gizmo “attached” to its rim, like seats on a Ferris wheel. To pull this off, we use Math.cos for the X Position offset, and Math.sin for the Y Position offset:

angle = degreesToRadians(thisComp.layer(“wheel”).rotation);

x_offset = Math.cos(angle);

y_offset = Math.sin(angle);

wheelsize = 75;

value + ([x_offset,y_offset] * wheelsize)

Here the sine and cosine math functions are exploited to make the gizmo travel in a circle, linked to the wheel’s rotation.

The first three lines use cosine and sine functions to translate Rotation into numbers that vary between +1 and –1. We then multiply this by a wheel size (how far away from the center we want the gizmo to orbit), and add these results to the initial value for the gizmo’s Position.

Self-Animation

You don’t have to use rotation to drive these circular expressions – you can use the comp’s time. This opens the door to self-animating objects, which move on their own as time moves along. Instead of using Math.sin(rotation), you would type Math.sin(time), with any additional multipliers you liked applied to time to make the result oscillate faster or slower.

The figure at left shows a simple dragonfly-like creature we created. The wings flap by themselves without keyframes. We do this by rotating them with the Math.cos expression, driven by the comp’s time.

We then used Expression Controls attached to a null as a user interface to make it easier to control the speed of flapping, as well as how far they flapped. These controllers may then be keyframed to alter the flapping over time. This is set up below:

(Oldtimers who have used Motion Math may remember the Blink.mm script. This used a sine function to vary the Opacity of a layer over time.)

Radians and Degrees

While you may be used to rotation angles being defined in degrees, expressions define rotation in a unit called radians. Instead of there being 360 degrees to a full rotation, there are 2 x PI radians (roughly 6.308). After Effects provides a pair of math methods that can translate between these for you, found in the expression language menu under Other Math:

radiansToDegrees(angle) plug in radians for angle, get out degrees

degreesToRadians(angle) plug in degrees for angle, get out radians

When you work with the trigonometric math functions such as Math.sin and Math.cos, you will need to convert degrees to radians. For example, instead of Math.sin(rotation), you may need to enter Math.sin(degreesToRadians(rotation)). Fortunately, you can enlist the expression math menu to do most of this typing for you.

Seconds to Radians

Time is measured in seconds. Math functions such as sine and cosine expect values in radians, with 2 x PI (~6.308) per revolution. This bit of expression code converts time into revolutions per second:

seconds_per_rev = 1; //set this number to taste

time_to_radians = (time/seconds_per_rev) * 2 * Math.PI; //convert to radians

After adding these two lines of code, you can now plug time_to_radians in for angle in functions such as Math.cos(angle). It’s a good idea to select and pick whip the “1” after seconds_per_rev = to a Slider Control, to make it easier to adjust speed later.

PI and E

Speaking of PI, as you may have noticed above, After Effects can automatically plug in highly accurate values for those occasionally useful but hard-to-remember math constants, pi and e. Just type in Math.PI or Math.E in place of their values.

 

Next Installment: Interpolation Methods

In the next installment, we will discuss a highly useful method for matching different ranges of values without having to pull out a calculator. Until then…

The content contained in Creating Motion Graphics with After Effects - as well as the CMG Blogs and CMG Keyframes posts on ProVideoCoalition - are copyright Crish Design, except where otherwise attributed.

(Page 3 of 3 pages for this article  <  1 2 3)

Greeaaat !! Thanks !

Posted by .(JavaScript must be enabled to view this email address)  on  01/31  at  03:14 PM

---

Name:

Email:

Location:

URL:

Smileys

Remember my personal information

Notify me of follow-up comments?

Submit the word you see below: