February 05th 2012 08:00:27am

With this Expression, I will show you how to feed numerical property information into a Text layer. Great for HUD numerical readouts that show coordinates or just various position info.
This expression is super simple to do, but can really look cool when combined with motion graphics. As usual see below the video for the code breakdown.

SOURCE CODE:

x = thisComp.layer().transform.position[0].toFixed(5);
y = thisComp.layer().transform.position[1].toFixed(5);
divider = " / "

x + divider + y;

This expression is not only very organic in what you can use for your source information, but extremely simple. BONUS! The source code for this is what I used in the tutorial, but by all means you are not limited to just this setup. The new techniques you should learn from this is how to use a text layer to visualize information from a property, how to combine more than one property value (not mathmatically) and what the toFixed() method does.

toFixed() – The toFixed() method will be a very handy tool if you deal with numerical outputs a lot. So, how many times have you gotten a Float value that was ridiculously long (5.3783456546782) when all you wanted was a simple two decimal places (5.37) or even just one (5.3)? Well toFixed() to the rescue. Simply taking your returned numerical value and adding .toFixed(2); will truncate the number down to two decimal places. So say…

myNumber = 5.3783456546782;
myNumber.toFixed(0); //…will result in "5"
myNumber.toFixed(2); //…will result in "5.37"
myNumber.toFixed(6); //…will result in "5.378345"

You can of course fix the decimal to any amount, within the limit of how many numbers are given to you that is.

+ – The addition symbol is fairly straight forward. 🙂 But there is an understanding that must be had with how it functions when doing Expressions (or Javascript for that matter). Everyone, hopefully everyone, knows how it works in math. You add 2+2 and you get 4.

ex.1) 2 + 2 = 4 //A number added to another number will result in the combined total value.
ex.2) “2” + “2” = 22 //HOWEVER, a string of text added to a string of text will merely join the two together.

Make sense? The double quotes tells the computer that this is a piece of text NOT a number. Prepare yourself for the rabbit hole. 🙂

ex.3) 2 + 2 + 2 = 6
ex.4) 2 + “2” + 2 = 222
ex.5) 2 + parseInt(“2” + 2) = 24

Crazy stuff, but it makes sense once you get the hang of what’s happening. I don’t want to get too deep into this rabbit hole, but I’ll explain ex.5 a little. If you remember from my explanation of parseInt() in Expression Shorts – Random Words Cycle, it will convert a number to a whole integer number, well it can also convert a text string number into a integer number as well. So what’s happening in ex.5 is 2 is being added to a newly created number, 22. “2” + 2 became 22 then converted to an actual math friendly number, hence 24 being the result.

CODE BREAKDOWN:

x = thisComp.layer("THE LAYER NAME").transform.position[0].toFixed(5);
y = thisComp.layer("THE LAYER NAME").transform.position[1].toFixed(5);
divider = " / "
x + divider + y;

Line 1: We set a variable, x, to hold the X position value of a layer. We then truncate the resulting X value down to five decimal places using the toFixed() method. When referencing X, Y or Z property information, we use their index number. That’s why there is a [0] and a [1] after position in the code. Some property values are Arrays, which I also explain here as well, Expression Shorts – Random Words Cycle. So two and three parameter properties, like Position, Scale and Anchor Point have arrays holding their values, [0], [1], and [2] (X, Y, Z). THE LAYER NAME, is just a generic placeholder for this description, and would reference whatever layer you are using. This is where the customizing would come in too. You don’t have to use a Position value, you could use the scale value, Rotation, etc….

x = thisComp.layer("THE LAYER NAME").transform.position[0].toFixed(5);

Line 2:v This line is a duplicate of Line 1, only we are using the Y value ([1]) of the layer now and have called the variable y too.

y = thisComp.layer("THE LAYER NAME").transform.position[1].toFixed(5);

Line 3: For the variable divider, we are creating a simple string of text. To do this we use a set of double quotes to surround our text. Make sure too, if you are using copy/paste, that your quotes are just plain non smart quotes. Smart quotes will throw errors in most code languages. Usually just pasting the code into a simple text editor first cleans things up, so be aware of that issue if you run into problems.

divider = " / "

Line 4: This is our final result. We are combining our variables together to create one long sentence basically. x gives us a five decimal string that we join our divider to and then finally we join our y variable, which is also a five decimal string.

x + divider + y;

If you have been following the Expression Shorts series from the beginning, first let me say thank you, and second you will start to notice that some of the expression code I use is now starting to appear more than once. Which will hopefully help you see how the same thing can be used in different ways. If you haven’t seen any of the other episodes, I highly encourage you to check them out. While this series is not a chronological, each builds upon the previous, type of series, there is very useful information throughout.