Self – Resize a Bezier Path Shape Layer to Comp size and more

[Andrei Popa]

Hey. Add this to your path property. The path should be at position [0,0] with anchorPoint [0,0] and the layer in the middle of the composition(double clicking on the rectangle tool creates just this)

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = 2;
p1 = corners.splice(0,startCorner-1);
corners = corners.concat(p1);
createPath(corners)

startCorner should be linked to your effect on the null(the one you want to control the start point with, obviously :D)

[Andrei Popa]

I just watched the way you create your rectangle. That works too in this case but double clicking on the rectangle tool would save you some seconds 😀

[Nick Mara]

Andrei Popa WOW!!!

Thank you so much for your help.

The expression you provided me works very nicely.

Now if I resize the composition, the Rectangle resizes itself and most important, the starting point of the path can be easily chosen via the slider control !

Amazing!!!

Can I ask you another question?

The slider control now works within the range which goes from 2 to 5.

Each number it’s equal to a corner point starting from number 2, which refers to the Bottom left corner.

If I input a parameter of 0 or 1 an error occur.

Is there a way to shift that range of a -1 value and lock the slider range ?

I mean:

Number 1 = Bottom right corner

Number 2 = Bottom left corner

Number 3 = Top right corner

Number 4 = Top left corner

I hope you could assist me again.

Thanks in advance for you time and for you priceless help =)

[Nick Mara]

<div>

That’s so true, I used to go with the double-click but then something happened in my life and now I’m going this way

Thanks again Andrei !!

</div>

[Andrei Popa]

I added a slider control to the layer.

This works for me with a slider with values 1-4 but other order than you said.

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = effect("Slider Control")("Slider");
p1 = corners.splice(0,startCorner-1);
corners = corners.concat(p1);
createPath(corners)

This is to make the order as you wanted it

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = effect("Slider Control")("Slider");
cOrder = [2,1,3,0];
p1 = corners.splice(0,cOrder[startCorner-1]);
corners = corners.concat(p1);
createPath(corners)

[Nick Mara]

Andrei, thanks again !!

I understood why the expression was not working for me.

My project setting for the Expressions was set to Legacy ExtendScript not to JavaScript.

Is there a way to turn this expression working in Legacy ExtendScript?

In Legacy ExtendScript the expression it’s working within the range of 1-3.

I also had to reorder the numbers of the cOrder to make it change the starting point clockwise like:

cOrder= [1,2,3,0];

If I input the number 0 or 4, an error occur.

Is there a way to make like a sort of loop?

I mean, is it possible to increase the number of the slider control and make the first chosen point always changing per each value in round?

For Example:

0 = First point

1 = Second point

2 = Third point

3 = Fourth point

4 = First point

5 = Second point

6 = Third point

7 = Fourth point

8 = ……………….. and so on

Thankssssss

[Andrei Popa]

Ok, try this for your path

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = effect("Slider Control")("Slider").value%4;
cOrder = [2,1,3,0];
p1 = (startCorner == 0) ? [] : corners.splice(0,cOrder[startCorner-1]);
corners = corners.concat(p1);
createPath(corners)

[Nick Mara]

SUPER !!!

This expression works like a charm !!!

I’ve seen that you also answered me on my other discussion:

https://creativecow.net/forums/thread/i-need-help-with-this-expression-lineartime-0-thiscomp-duration-0-100/

So what I want to tell you is that the expressions you provided me are working well with some adjustments.

I created a video to show you from start to end the entire process, pointing out some “bugs” I found:

https://www.youtube.com/watch?v=6Cw9oE0tAiQ

Tell me If I’m doing something wrong.

Anyway the problem now is that there are two functions working together:

1 The”Start_Point” Slider Control which controls the starting point of the Path.

2 – The “End_Point” SLider Control which controls the ending point of the Path.

These are the changes I’ve made to the expression:

Path expression:

1 – cOrder=[1,2,3,0]

Now it’s rotating anticlockwise one step to another, that’s perfect.

End expression:

1 – percentL = 50.5 * L / (L + l);

percentl = 50.5 * l / (L + l);

If I leave the value of 50, as you suggest (which should work perfectly), at the end of the path a little gap remains uncovered. So I’ve tried to add an extra 0.5 % and it seems to work.

2 – shortPoints = [0, 4];

With the range [1,4] something weird happened as you can see from the video but with [0,4] everything it’s good.

That said I need to point out another issue.

There is a sort of “bug” which is not a real “bug” but it’s annoying:

The whole process works well when you first choose the starting point and then you change the end point.

But if you first choose the End Point and then the Starting Point the stroke shifts.

It’s pretty tricky to explain but you can see what I mean at the end of the video.

Is there a solution for that?

Thanks again

I need help with this Expression: linear(time, 0, thisComp.duration, 0, 100);

[Andrei Popa]

“1 – cOrder=[1,2,3,0]” this does nothing. It works anticlockwise without this.

The rectangle does not complete because the last frame in the composition is invisible. You should subtract a frame from linear in order to fix this, not add to the percentage.

linear(time, 0, thisComp.duration-thisComp.frameDuration, 0, theEnd)

And you have to change those numbers for corners because you described it wrongfully in your post. You said in this order: bottom right, bottom left, top right, top left(it was bottom left, bottom right etc.). It actually was more complicated to me to do it the way you described it.

All in all, this should work now:

cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = thisComp.layer("Null 1").effect("Start_Point")("Slider").value%4;
p1 = (startCorner == 0) ? [] : corners.splice(0,startCorner);
corners = corners.concat(p1);
createPath(corners)

function arrIncludes(arr, element) {
    for (var i = 0; i < arr.length; i++) {
        if (element == arr[i]) return true
    }
    return false;
}
L = thisComp.width;
l = thisComp.height;
percentL = 50 * L / (L + l);
percentl = 50 * l / (L + l);
beginPoint = thisComp.layer("Null 1").effect("Start_Point")("Slider").value%4;
stopPoint = thisComp.layer("Null 1").effect("End_Point")("Slider") % 4;
shortPoints = [0, 2];
firstLInstances = Math.ceil(stopPoint / 2);
if (arrIncludes(shortPoints, beginPoint)) {
    theEnd = percentl * firstLInstances + percentL * (stopPoint - firstLInstances);
} else {
    theEnd = percentL * firstLInstances + percentl * (stopPoint - firstLInstances);
}
theEnd = theEnd == 0 ? 100 : theEnd;
linear(time, 0, thisComp.duration-thisComp.frameDuration, 0, theEnd)

[Nick Mara]

THIS IS AWESOME !!!

Now everything is working perfectly =)

I’m so sorry I’ve described the order of the corners wrongfully in the post.

All the issues are now solved and so I have my last question:

Is it possible to add a Checkbox Control to the expression able to invert the Path direction?

I mean:

Checkbox ON = The Path’s direction goes anticlockwise

Checkbox OFF = The Path’s direction goes clockwise

I can’t thank you enough for helping me !!!