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

Filed under: Motion Graphics •

Deeper Modes of Expression, Part 1: Useful Math Expressions

Keep a Clamp on It

There are a variety of math methods that can restrict values to a desired range. The simplest is absolute value – Math.abs(value) – which turns negative numbers into positive ones. Then comes clamp – clamp(value, limit1, limit2) – which prevents values from going outside the defined range. Finally there’s modulus – value1%value2 – which “rolls over” numbers, as 59 minutes rolls over to 00 instead of 60 on a digital clock.

Say that we had a wheel which rotated between –100° and +100°, and that we wanted its Opacity to fade on and off based on its Rotation value. However, Opacity cannot go below 0%, so if we just tied Opacity directly to Rotation, the wheel would be invisible while it swung between 0° and –100°. To cure this, we can use the expression Math.abs(rotation), which causes Opacity to climb back up from 0% to 100% as the wheel rotates from 0 to –100°.

There are many other occasions when you might want to prevent a value from wandering outside a useful range. For example, say you want to restrict how far one layer can move as it follows another. In the example below, we’ve set up an animation in which a gizmo is flying around a comp. A crosshair is trying to track it. However, we want to limit how far the crosshair can wander, as if it’s trapped inside a pen or physically limited by its machinery. To pull this off, we can use clamp in our expression: Give it the value to work on, and your desired limits, and it returns a value restricted inside your defined limits. To make the expression easier to follow, in the first two lines we assigned our desired limits to a pair of variables, then in the last line we do the actual clamping to restrict the crosshair’s Position:

upper_left = [60,60];

lower_right = [260,180];

clamp(thisComp.layer(“gizmo”).position, upper_left, lower_right)

Gizmo courtesy Quiet Earth Design; background courtesy Digital Vision/Prototype.
The crosshair is expressed to follow the gizmo around, but it is restricted by the clamp expression to stay inside its box during its pursuits (center).

If you forget the format of the clamp expression, look for it in the expression language menu under Vector Math (a subject we’ll get into more detail a little later on).

Finally, the modulus math function is another way to restrict a value’s movement, causing it to start over at zero after it reaches a predetermined value. You use the modulus operator – % – like other familiar math operators, such as + (plus) or / (divide). For example, to restrict a value to a range between 0 and 99, you would write value % 100.

As you may remember from your early days stuck in math class, after you divide one number by another, you end up with a “remainder.” For example, 10 ÷ 3 = 3 with a remainder of 1. Another way of thinking of modulus is that it gives you the remainder of a division operation. The modulus math operator is useful for creating digital clocks, odometers, and other rollover-type displays.

An example is shown below: As the wheel on the left continuously rotates, the ball on the right falls, moving one pixel per degree. Every 200° of rotation, the ball rises suddenly back to the top of the comp. In this example, as Rotation moves from 192° to 204°, the Y Position jumps from 192 pixels to 4 pixels. To accomplish this, the following expression was applied to the ball’s Position:

[value[0], thisComp.layer(“wheel”).rotation % 200]

The ball’s Y Position is expressed to the wheel’s Rotation, “modulus 200” – which means reset every 200 degrees. As the rotation progresses from time 192° (left) to 204° (right), the ball jumps to Y = 4, not Y = 204 (c).

A quick note on the difference between displayed and internal values in After Effects: When you rotate a layer beyond 359°, After Effects displays its value as a number of revolutions plus an angle less than 360°. However, internally After Effects is thinking of the total number of degrees, not revolutions – so “2x + 45°” to you is 765° internally. After Effects is performing its own modulus operation in its user interface to show you a friendlier number that uses revolutions and degrees.

What if you needed to get both the “2” – the number of revolutions – and the “45” – the remainder? This is an occasion when you can use the rounding functions we discussed on the previous page:

my_rotations = Math.floor(rotation / 360);

my_degrees = rotation % 360

Just when you thought you grasped that, we’re afraid we have to throw a curve ball at you: Math.floor keeps rounding numbers down, even when they are negative. For example, the expression above would round –270° down to –1 revolution, not up to 0 revolutions. Likewise, Math.ceil rounds numbers up, even if they are negative. To get around this, you will need to do some clever programming that requires if/then tests (discussed in a later installment) and Math.abs functions (mentioned earlier). We won’t torture you with that now; just something to keep in mind. If you know your values will always be positive or always negative, then you have far less to worry about.

next page: using sin and cos to oscillate and create perfect circles

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

Thanks for the kind words!

“I hope you’ll have the opportunity to explain the increasing and decreasing exponential movements. Increase and then decrease the same object is still a nightmare for me.”

Good request!

A later installment is on “Making Decisions” - if/then statements. To do different actions depending on if you are increasing or decreasing would require an if/then. I’ll try to remember to include your request when we get to that installment. If I forget, remind me, and I’ll write it up.

best wishes -
Chris

Posted by Chris Meyer  on  01/31  at  10:49 AM

---

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: