ShapeLayer rectangle size and trim path start, end, offset, expression to adjust with rectangle siz

[manjunath MK]

Hi there,

please check image attached.

i have simple rectangle with stroke and trim path. When i adjust size of rectangle width or height then the start, end, offset of trim path shud adjust automatically to new rectangle size to retain original shape.

Please help.

[Rick Gerard]

All you have to do is divide the size of the rectangle by 360 and add that value to the offset. The expression looks like this:

var rectSize = content("Rectangle 1").content("Rectangle Path 1).size;
ofst = 360 / (rectSize[0] * 2 + rectSize[1] * 2);
value + ofst

Then set your roundness, start and end values, and adjust the offset to position the gap where you want it. The simple ratio generated by the expression on Offset keeps things lined up. That is by far the simplest solution.

Hint: Holding down the Cmnd/Ctrl key when dragging the offset value will divide the value by 10 and make fine-tuning the position of the gap easier. 

EDIT: Come to think of it, the roundness throws a kink in the expression. As it is, the expression keeps the gap the same size and allows you to position it anywhere. You will have to compensate for the roundness and make sure that it is limited to half the maximum width of the rectangle. I'll have to open up After Effects and fiddle with the expression for a while. I'll bet Dan Ebberts has the solution.

[manjunath MK]

Hi rick,

Thank u for ur reply.

I tried below expression and i found its not working wihtout roundness as well.Attached is screen shot for ur reference.

var rectSize = content("Rectangle 1").content("Rectangle Path 1).size;
ofst = 360 / (rectSize[0] * 2 + rectSize[1] * 2);
value + ofst

Trim paths is like nighmare for me while standardizing AE templates with expressions. Hope it ll get sorted.

Thank you

[Mylenium]

Here's something that works:

rectSize = content("Rectangle 1").content("Rectangle Path 1").size;
rectRound=content("Rectangle 1").content("Rectangle Path 1").roundness;
rectStart=content("Rectangle 1").content("Trim Paths 1").start;
rectEnd=content("Rectangle 1").content("Trim Paths 1").end;

rectLen= rectSize[0] * 2 + rectSize[1] * 2+Math.PI*rectRound*2;

realStart=linear(rectStart,0,100,0,rectLen);
realEnd=linear(rectEnd,100,0,rectLen,0);

realDiff=realEnd-realStart;

value+rectLen/realDiff

There's still some slight creep due to precision issues the larger the rectangle and the rounded corner radius gets, but this definitely should do the trick.

Mylenium

[manjunath MK]

Is  this code tested. its not working for me bro.attached is a screen shot.

also i have attached my version of code which works for trim end with known issues.

it seems like not working when end slider is at 1750.(right edge)

At slider 1585, when end goes to bottom edge, there size x maintains distance in relation to bottom left point, but y doesn't work.

like wise in differrent locations it behaves differently but it works perfect at slider -183.

Plz check if it helps and help me with custom start,end with rectangle size.

[manjunath MK]

@Dan Ebberts any code will be of great help. This seems like unsolved mystery while making ae assets.Hope u have some solution.

[Dan Ebberts]

I think to come up with an expression for this, you need to start with a good algorithm. In other words, you need to clearly define the rules and maybe provide some examples of how you would do it manually for different scenarios, so that the relationships among the various parameters are clearly defined. In your original post, "When i adjust size of rectangle width or height then the start, end, offset of trim path shud adjust automatically to new rectangle size to retain original shape." is pretty vague (in my opinion).

[Rick Gerard · Accepted solution]

I did some thinking. If you have the size of a rectangle you can divide that in half horizontally and vertically and then use Math.atan(x/y) * 180 * Math.PI to get the angle to the first corner of a rectangle. Fiddle with a little more math and you can take the roundness and calculate the size of a rectangle that would fit inside a circle then subtract that value from the outside rectangle. Now all you should have to do is add the offset value to that and you should be able to position a hole anywhere in the rectangle. 

Mathematically, this works:

ref = this.comp.layer(index); // looks at the current layer
recSize = ref.content("Rectangle 1").content.("Rectangle Path 1").size;
RndDia = ref.content("Rectangle 1").content.roundness * 2; // returns the diameter
RndComp = Math.pow(RndDia, 2) / 2;
RadFactor = Math.sqrt(RndComp, 2) / 2;
insideRect = recSize - [RadFactor, RadFactor]; // Calculates inside rectangle
x = insideRect[0];
y = insideRect[1];
angl = value - Math.atan(x/y) * 180 / Math.PI;

Mathematically, this is perfect. I applied it to a pointer and it always precisely bisects the corner of the inside rectangle. Always.

Unfortunately, there is a slight drift as the inside rectangle size ratio changes. With a sqyare you get precisely 90º. Change the rectangle to 2:1 angle and you have to add just a bit. Change the ration to 3:1 and you have to add a slightly different amount. This is a bug in the offset. I spend an hour trying to calculate the curve to automate the process but I could not figure it out. 

Maybe Dan could figure it out. 

On the other hand, if you lock the size ratio of a rectangle, you can increase or decrease the size of the rectangle and the hole will stay perfectly aligned.

Interesting problem. If I get a chance I'll upload an AEP file that shows how this works.

[manjunath MK]

Hi rick,

Thanks for all ur time and math.

I can see, if ratio of size x,y of rectangle is same , the trim start and end will not shift by default, no expression required.Real problem starts with different ratios.

[manjunath MK]

Hi dan, 

I understtod what ur saying. Attached is the exact trim shape to retain, even if size [x,y] of rectangle changes.

No need to touch offset.I ll make an edit to this question. just start and end of trim path

[manjunath MK · Accepted solution]

@Rick Gerard @Mylenium to keep things realistic, i have attached an exact shape to work for. Also, given the same to @Dan Ebberts as well. Thank you all, Math wizards.

[manjunath MK]

Hi Dan,

I tested with offset 0,90,180,270 and your code is working perfectly well.

Awesomeness!

Thank you.

Please check the attachment for my current status. haha

[Dan Ebberts]

OK, this is what I came up with for Start:

s = content("Rectangle 1").content("Rectangle Path 1").size;
r = content("Rectangle 1").content("Rectangle Path 1").roundness;
r = Math.min(r,s[0]/2,s[1]/2);
100*(s[0]/2 + s[1] - 3*r + r*Math.PI/2)/(2*(s[0] - 2*r) + 2*(s[1] - 2*r) + Math.PI*r*2)

and for End:

s = content("Rectangle 1").content("Rectangle Path 1").size;
r = content("Rectangle 1").content("Rectangle Path 1").roundness;
r = Math.min(r,s[0]/2,s[1]/2);
100 - 100*(s[0]/2 - r + r*Math.PI/2)/(2*(s[0] - 2*r) + 2*(s[1] - 2*r) + Math.PI*r*2)

[manjunath MK]

Hi Dan,

This is working perfect for this shape. Thank you for all ur time and math.

Hope it works for other shapes. Let me try. Can't ask morethan this.

Thank you all!

[Mylenium]

Yeah, you probably need to correlate the absolute path length to the values generated by the End and Start percentages somehow to get some real pinning. Should not be too difficult. Just another linear() function perhaps. The math is all there already...

Mylenium

[manjunath MK]

For me this math stuff is difficult, i ll get high fever Lol!