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

[Andrei Popa]

cW = thisComp.width;
cH = thisComp.height;
antiClockwize = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
clockwize = [[cW/2,cH/2],[-cW/2,cH/2],[-cW/2,-cH/2], [cW/2,-cH/2]];
corners = (thisComp.layer("Null 1").effect("Clockwize")("Checkbox").value == 1) ? clockwize : antiClockwize;
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 = (thisComp.layer("Null 1").effect("Clockwize")("Checkbox") == 1) ? [1,3] : [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)

[Andrei Popa]

Actually, use this for the path expression

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);
if (thisComp.layer("Null 1").effect("Clockwize")("Checkbox") == 1) {
	b = corners[1];
	corners[1] = corners[3];
	corners[3]= b;
	};
createPath(corners)

[Nick Mara]

I AM ASTONISHED !!!

It’s all working perfectly now but I have another question…How can I repay you?

Magic !!!

Thank you so much

[Nick Mara]

Hey Andrei,

I have another question.

Is there a way to keep the Anchor Point of the Shape Layer always centered into the composition?

I’ve tried to add this expression to the anchor point but it’s not working properly:

R = sourceRectAtTime();

[R.left + R.width/2,R.top + R.height/2]

I think this is not the right solution.

Is there a way to add something more on the Path expression you provided me to keep the shape always centered and locked?

This would avoid anyone to commit a mistake and carelessly move the Shape Layer.

Any idea?

Thanks again

[Andrei Popa]

Well, if you try to prevent someone from moving the layer, you should add an expression to position, not to anchor point. Try this on position:

[thisComp.width/2, thisComp.height/2]

[Nick Mara]

Thank you so much,

the expression it’s working and you are always very helpful

[Nick Mara]

Hey Andrei,

I’m trying to apply your expression on the “Start” property of the Trim Path.

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 = effect("Slider Control")("Slider").value%4;
stopPoint = effect("Stop Point")("Slider") % 4;
shortPoints = (thisComp.layer("Loading_Bar_Control").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [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)

<div>

In this way the Stroke of the Shape Layer would unbuild, starting from 100 % and going down to 0%.

So it would work like a countdown.

Is there a way to make the countdown Path starting from a precise point of the shape?

I mean:

I would like to start the unbuilding of the Path from the first or from the second or from the third point not from the last one.

The chosen point could also be driven by a slider control, maybe the stopPoints property of the expression could be used.

I hope I was clear, if not please ask =)

Thank you so much

</div>

[Nick Mara]

Hey Andrei,

I’d love to do an update to the project, could you please help me further more?

I wanted the path to be simultaneously a loading bar and a countdown bar.

To do so I copied and paste the same expression of the “End” on the “Start” property of the Trim Path.

Then I created a Checkbox Controller on the Null object controller, which works as a switch function.

When the Checkbox is turn OFF, the path is building up as a loading bar, when the Checkbox is turn ON, the path unbuild itself as a countdown.

Here is the video:

https://www.youtube.com/watch?v=uAHQgzZrqqY

This is the complete expressions set up:

NULL OBJECTS CONTROLLERS

Start_Point = Slider Control

End_Point = Slider Control

Reverse_Direction = Checkbox Control

Enable/Disable Loading = Checkbox Control

EXPRESSIONS ON THE SHAPE LAYER:

Path property:

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").effect("Start_Point")("Slider").value%4;
p1 = (startCorner == 0) ? [] : corners.splice(0,startCorner);
corners = corners.concat(p1);
if (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) {
	b = corners[1];
	corners[1] = corners[3];
	corners[3]= b;
	};
createPath(corners)

Start property:

if (thisComp.layer("Null").effect("Enable/Disable Loading")("Checkbox")==1){
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").effect("Start_Point")("Slider").value%4;
stopPoint = thisComp.layer("Null").effect("End_Point")("Slider") % 4;
shortPoints = (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [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)
}else{value};

End property:

if (thisComp.layer("Null").effect("Enable/Disable Loading")("Checkbox")==0){
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").effect("Start_Point")("Slider").value%4;
stopPoint = thisComp.layer("Null").effect("End_Point")("Slider") % 4;
shortPoints = (thisComp.layer("Null").effect("Reverse_Direction")("Checkbox") == 1) ? [1,3] : [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)
}else{value};

I would like to make some variants of this frame where the stroke starts to unbuild itself not from the last point but for example from the third or second or first point.

Is there a way to make this possible?

Thanks in advance

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

[Andrei Popa]

The unbuilding starts after the whole path is loaded? Or does it break it? If you have 3 lines complete and start to “undo” the line from other point than the first, then you would have 2 lines.

So does this unbuild start after the entire lane has appeared?

[Nick Mara]

The Path unbilding is an option.

I can enable it or disable it via the Checkbox Control.

It doesn’t have to start unbuilding after the whole path is loaded.

It should just keep the position and revert it’s building direction which means unbulding the path.

Watch this short video, I hope it helps you to better understand what I mean.

https://www.youtube.com/watch?v=RqAw_L3K494

Is it something possible?

Thanks

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.