-
Dynamic Expression that abbreviates counting numbers from 1,000 up to billions
Hello there!
Right now I am trying to get into expressions and dynamic projects. I kind of got into the basics and a quick google search helps most of the time. But this seems like a tough nut to crack (or this is so easy that nobody needs to ask for help, who knows). Anyway:
I’ve set up a counter using a text layer that is linked to a point control’s x value so that the numbers go higher than the 1,000,000 limit that a normal slider would offer.
I need those Numbers to be abbreviated dynamically, meaning:
Up to 999 -> 999 (do nothing)
1,000 -> 1.0K (divide by 1,000)
1,000,000 -> 1.0M (divide by 1,000,000)
1,000,000,000 -> 1.0B (divide by 1,000,000,000)
I came up with
num= Math.round(thisComp.layer("NUMBER CONTROLLER").effect("Point Control")("Point")[0])/1000; num.toFixed(1) + 'K';which works fine for thousands, but obviously doesn’t work with hundreds, millions and billions. I could make 4 text + point control layers and let them count up one after another and blend them into each other when they reach their limit, but it would be cleaner to use an expression.
How do I tell After Effects to count the digits and divide it by the right amount depending on the digit count? Am I overthinking this?
Thanks!
-
5 Replies
-
Hello, try this:
function format(num){
if(num >= 1000000000) return Math.floor(num/100000000)/10 +'B';
if(num >= 1000000) return Math.floor(num/100000)/10 +'M';
if(num >= 1000) return Math.floor(num/100)/10 +'K';
return Math.round(num);
}
num = thisComp.layer("NUMBER CONTROLLER").effect("Point Control")("Point")[0];
format(num)
-
It’s built in to Javascript via the Internationalisation object.
Try this:
compacter = Intl.NumberFormat('en-us', { notation: "compact" });
num = thisComp.layer("NUMBER CONTROLLER").effect("Point Control")("Point").value[0];
compacter.format(num); -
Filip, the problem is numbers are rounded, it’s not very accurate.
999500 to 999999 return 1M instead of 999.9K
-
Hm,
you could add minimum- and maximumFractionDigits like this:
compacter = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 3});
num = thisComp.layer("NUMBER CONTROLLER").effect("Point Control")("Point").value[0];
compacter.format(num);which would give you 999.999K
But it is indeed always a true “round”, not a floor.
-> 999,998.8 will also be 999.999K
Which to me makes perfect sense and wouldn’t be a problem in most animations settings.
But there’s always the option you have, problem is that you hjave to rewrite that expression every time the numbers gain 3 orders.
Alternatively, compacter.formatToParts(num) would give an array of the individual parts ‘integer, decimal, fraction,compact) so you could use that to have javascript give you the ocrrect abbreviation K,M, B… and do your own rounding
-
Went with something pretty close to Fabrice Leconte‘s approach, works like a charm! Thanks a lot!
Reply to this Discussion! Login or Sign Up