Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.

Exit Search

- Home
- After Effects
- Discussions
- How to scale a shape based on dividing two numbers...

- How to scale a shape based on dividing two numbers...

0

/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/td-p/13301837
Oct 27, 2022
Oct 27, 2022

Copy link to clipboard

Copied

Allow me to specify! I am trying to allow the user to set four custom numbers A, B, C, and D, and have a progress bar show the specified amount of progress. A represents the lowest number (25K in the image below), and B represents the highest number (250K in the image below). C and D represent the starting progress and ending progress.

To elaborate, here's an example, let's say the low number (A) is set to 0, and the high number (B) is set to 200, I would like the user to be able to put in 40 for the starting count (in a mogrt), and the bar will start at 20 percent full (40 is 20% of 200). My ideas is as follows; we use an expression to grab the low and high number, we divide the low number by the high number (which will give us a percentage as a decimal), and we multiply the newly gained decimal by 10 to make it work in the scaling setting.

Any help is greatly appreciated. I am new to expressions so I'm excited to see where this'll take me.

Ethan

TOPICS

Expressions
,
Scripting

Community guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

Community Expert
,
Oct 27, 2022
Oct 27, 2022

Three text layers and one shape layer with two rectangles one ellipse, a short stroked path, and three sliders is all it takes to get what you want. Instead of sharing all of the expressions I'll jsut share a project file.

I do this kind of thing all the time.

The starting point and the workflow involve creating a Rectangle Outline and, below that, a Rectangle Fill. The size of the rectangle fill layer is controlled by a linear expression that calculates the percentage of the Start Value to

...
5
Replies
5

/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/m-p/13301995#M214524
Oct 27, 2022
Oct 27, 2022

Copy link to clipboard

Copied

linear(Slider goes here,A,B,C,D)

Really no reason to make it more complicated than that. Of course you need to fill in the actual values and references.

Mylenium

Community guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

qEclipse
AUTHOR

New Here
,

/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/m-p/13302408#M214536
Oct 27, 2022
Oct 27, 2022

Copy link to clipboard

Copied

That didn't seem to accomplish the issue! That makes everything exactly related to the slider.

Community guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/m-p/13302433#M214540
Oct 27, 2022
Oct 27, 2022

Copy link to clipboard

Copied

As Mylenium suggests, linear is the key for translating one range to another:

```
A = 0; // low number
B = 200; // high number
C = 20; // starting progress
D = 80; // ending progress
low = linear(C,0,100,A,B); // will be 40 in this example
high = linear(D,0,100,A,B); // will be 160 in this example
```

Community guidelines

/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/m-p/13302705#M214551
Oct 27, 2022
Oct 27, 2022

Copy link to clipboard

Copied

Three text layers and one shape layer with two rectangles one ellipse, a short stroked path, and three sliders is all it takes to get what you want. Instead of sharing all of the expressions I'll jsut share a project file.

I do this kind of thing all the time.

The starting point and the workflow involve creating a Rectangle Outline and, below that, a Rectangle Fill. The size of the rectangle fill layer is controlled by a linear expression that calculates the percentage of the Start Value to the End Value, then looks at the Progress slider to grow the value so that it fills the Outline Rectangle. Here's the expression for Rectangle Fill/Rectangle 1/Size:

```
ref = content("Rectangle Outline").content("Rectangle Path 1").size;
sSize = effect("Num Start")("Slider");
eSize = effect("Num End")("Slider");
value1 = sSize / eSize ;
t = effect("Progress")("Slider");
x = linear(t, 0, 100, value1 * ref[0], ref[0]);
[x, ref[1]]
```

The Transform Rectangle Fill/Anchor point also needs an expression to keep the anchor point on the left edge of the shape so that it grows from the left. Here's that expression:

```
xRef = content("Rectangle Outline").content("Rectangle Path 1").size[0]/2;
x = - content("Rectangle Fill").content("Rectangle Path 1").size[0];
y = 0;
[x/2 + xRef, y]
```

A simple Math.round(Slider Value). expression gives you whole numbers for the text layers. That expression looks like this:

```
v = Math.floor(thisComp.layer("Shape Layer").effect("Num End")("Slider"));
v + ' K'
```

The value for the moving text layer is a little mor complex. It uses the same percentage calculation and linear method as the Rectangle Fill layer uses:

```
sSize = thisComp.layer("Shape Layer").effect("Num Start")("Slider");
eSize = thisComp.layer("Shape Layer").effect("Num End")("Slider");
t = thisComp.layer("Shape Layer").effect("Progress")("Slider");
v = Math.floor(linear(t, 0, 100, sSize, eSize));
v + " K"
```

The position for the moving text layer just uses the size value of the pointer, and the position for the pointer path just uses the size of the Fill rectangle. You just have to move the path so that it lines up with the right edge of the Rectangle Fill.

Hope this helps you figure it out.

Community guidelines

qEclipse
AUTHOR

New Here
,

LATEST
/t5/after-effects-discussions/how-to-scale-a-shape-based-on-dividing-two-numbers/m-p/13304990#M214633
Oct 28, 2022
Oct 28, 2022

Copy link to clipboard

Copied

Absolutely amazing. Thank you so much Rick. I am so inspired to learn more now.

Thanks,

Ethan

Community guidelines

Resources

Troubleshooting FAQs

After Effects Community Recap

Getting started with After Effects

Copyright © 2023 Adobe. All rights reserved.