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

Filed under: Motion Graphics •

Deeper Modes of Expression, Part 1: Useful Math Expressions

Many of you are familiar with our book, Creating Motion Graphics with After Effects. As imposing as it may be in print, some miss that there’s another 180+ pages of bonus chapter PDFs on the book’s disc.

One of those chapters is Deeper Modes of Expression, which goes into more advanced expression functions. To make sure more people get to benefit from the information it contains, we’ve decided to serialize it into a series of 12 installments here on PVC. It’s still worth having the book - it contains an accompanying project file with examples and sources, not to mention an introductory chapter for those new to expressions - but hopefully this online version helps some of you looking to expand your expression toolbox.

In this first installment, we’re going to discuss some useful math functions beyond the typical +, -, *, and /. Among other things, you’ll learn how to keep numbers inside of boundaries, and how to trace out perfect circles using expressions instead of motion paths.

Important Syntax Notes

If you find that the exact wording of the expressions you create don’t match the wording you see in this chapter or in our example project, here are the probable reasons why:

• Verify that Preferences > General > Expression Pick Whip Writes Compact English is enabled (it’s the default).
• The pick whip in earlier versions of After Effects used just the word position, rotation, et cetera for these transform properties. Later versions use the more formal transform.position and the such for the same properties. Both work; we’re using the shorter form here to be less long-winded.
• When you’re writing an expression that employs the property it is applied to (such as Position), you do not need to refer to that property by name (such as position[0]); you can often use the generic name “value” (for example, value[0]).

 

We know many artists consider math to be incompatible with creativity; we’re sympathetic. Fortunately, the standard add/subtract/multiply/divide math operations will probably be all you need for 99% of your expressions. However, there will be times when you need to do something special, such as round off a number, or cause a property to move in circles. On those occasions, you will have to use some advanced math functions; we’ll demonstrate a few of them here. (For those of you who love math, we’ll be showing just the tip of the iceberg; the main thing for you is to know how and where to access these functions.)

After Effects supports a large number of additional math functions in expressions. You’ll find most of them in the expression language menu under JavaScript Math. They are not discussed in the manual (a JavaScript book will have to serve as your definitive reference for these). But never fear: Here are a few of our favorites, with practical applications.

Advanced math functions can be found in the expression language menu under the JavaScript Math category.

Rounding Off

There are occasions when you don’t want a value in all its gory precision; you just want it rounded to the nearest whole value (also known as an integer). This is especially true when you’re creating step-type animations. There are three math functions that do this for you:

Math.round, which rounds to the nearest integer

Math.floor, which rounds down to an integer

Math.ceil, which rounds up to an integer

Say you were trying to create some signal meters. The illustration at left contains a graphical representation of an old-style analog “Vµ” volume meter on the left, and a pair of bar graph meters on the right. Say that as the analog meter swings through 100 degrees of rotation, the leftmost of the bar graphs should scale in height from 0 to 100%. This can be accomplished with a fairly simple expression for Scale, which uses the dial’s Rotation as the bar’s Y Scale value (preserving its X Scale, value[0] – if that doesn’t make sense, sit tight; we’ll cover arrays in more detail in a future installment):

Background courtesy Digital Vision/Prototype.

[value[0], thisComp.layer(“dial”).rotation]

However, bar graph meters tend to be broken into clear segments; they don’t flow smoothly and continuously. For this example, we want to split this bar graph into five segments. That means one segment represents values of 0 to 20, the next represents 20 to 40, and so forth. To do this, first we need to divide the 100 degrees of rotation by 20, yielding a range of values from 0 to 5. Then we need to round off that value to the nearest whole number, to “turn on” full segments of the bar graph one segment at a time. Finally, we need to multiply that result by 20, to expand the 0-to-5 value back out to a 0-to-100% range for Scale. Here’s the resulting expression, using some temporary variables to hold intermediate values as we go:

volume = thisComp.layer(“dial”).rotation / 20;
barheight = Math.round(volume);
[value[0], barheight * 20]

To better simulate a bar graph meter divided into segments, we used the Math.round function to round off our continuous “analog” value to a stepped “digital” value.

If you wanted to round the value down so a segment will come on only when its maximum value has been exceeded, use Math.floor instead of Math.round. If you want to round the value up, turning on a segment as soon as the value creeps into its range, use Math.ceil.

As a final touch, we used a solid with the Generate > Grid effect applied as a matte to break our stepped bar graph into segments. As expressions can’t access the volume of a layer, we used SoundKeys from

Trapcode to create audio-based keyframes for the Rotation property of the dial layer; you can also use the keyframe assistant Convert Audio to Keyframes.

next page: restricting a range of values to place boundaries, or roll over a display

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

Back to CMG Keyframes »   

               

---

---

You must be registered to comment. This is an effort to reduce spam. Please REGISTER HERE.

It’s incredible how easy it is to learn with you !
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.

Posted by .(JavaScript must be enabled to view this email address)  on  01/31  at  04:26 AM

---

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: