SS.3.02 Line Taper Expression

I created this expression setup as a work around during a live brief (logo animation). Many motion designers will agree that the tool After Effects is missing the most is one that will taper a stroke like illustrator does:


It would be ideal to have a small script that can create lines that follow a path with a range of profiles for the user to choose from. In my work around, I used expressions to create a ‘line’ with the uniform taper profile. Much like my other expression this works off of the index of a layer and requires multiple (50 in this case) copies of layers so that the effect will work.

The main line drawn is in fact the entire motion path of the animation, so forward planning is required here.



The line is given a stroke with the Trim Paths effect applied. The start value of Trim Paths is keyframed, this is the driving force of the animation. The end value is given an expression, parenting it to the start value but with a ‘delay’ (an offset) of a value which is dictated by its index.

delay = (index/4);

content(“Shape 2”).content(“Trim Paths 1”).start-0.1-delay;

The divider value used in line 1 (4 in this case) will change how long the line taper is. If I develop this into a script, this value will be open for the user to edit. The 0.1 in line 2 is just an offset and will remain a constant.

Since each line is longer than the last this provides us with increments, allowing for the stroke width to also be reduced in incrementally along the line.

The layer with an index of 1 returns this line:


The layer with an index of 47 returns this line:


The final animation looks like this:


If I am to develop this into a usable script, I will need to adjust the incrementation of the lines so that they are all the same length but appear at different points along the path. A profile that gets thinner and then thicker again for example, would not work with the current setup.


3.02 Applying Random Constraints to AE

I moved into AE ready to translate processing to JavaScript only to find that OH SHIT its not just syntax that is different but the entire principle of how the code is looped through.

I managed to find a blog post from 2012 that addresses this issue [link]. Basically, for and while loops are not all that common in after effects expressions because AE tries to run through the entire for loop every time there is a new frame. In his blog post Lovatt finds a workaround and even provides the AE projects he made with working For, While and Do While loops.

I downloaded them and poked around inside the projects trying to figure out how they work.

Screen Shot 2017-01-21 at 16.48.38.png

It looked as if what Zack had created was a while loop that constrained the cycles of the loop to one per frame of the composition. Within that, he just wrote an if statement that acted like a switch, and was dependent on the position of the star being over a certain y value (the star moved randomly with a wiggle expression). If it was then hit count would increase for each frame this was true and be displayed as the small number in the corner of the composition.


To begin with I tried copying the code over from processing and then working through it, debugging as I went along.


I almost got the code to work (I suspect) using a new integer curFrame to count frames and ensure that each new frame on the composition was a cycle of the main for loop. The only (visible) issue is the line while(used[thisran]!==0] that checks whether the number has been picked before.

I also have a suspicion that I will need to restructure the code, because ideally, the colours would all be assigned in the first frame of the composition. I’m going to build this code up again line by line and see where it falls apart…

Firstly, I managed to get the expressions to pick a random number and call it’s assignment from within the array.

Next I got it to call thisran’s assignment from within both the stuff and the used arrays. Now the number changes randomly and the used array counts how many times they have been used.

You’ll notice that the array has 7 spaces but never calls value 7. After Effects throws an error if I reduce the array to 6 so i’m just keeping it like this for now. Further down the line, however I would like to introduce the option of increasing and decreasing the number of colours that can be used in my script.


Ok so here I am still getting the same issue I found when copying the code across from processing. AE really doesn’t like my while loop so i’m going to have to replace it with 6 nestled if statements.


Even with 6 if statements, some duplicates come through. I now realise that this is because of the random picker, it choses a new number at random every time. So it could take more than 6 attempts to get a number that hasn’t been chosen before, especially towards the end of the 6 value sequence.

All in all, I haven’t been able to figure out a way to make this code work inside After Effects, however this is not a huge issue since I only need to make it work in my script, which will be constructed in Script Editor.

SS.3.01 Auto-Random Colour Picker with Expressions

My journey into Javascript with After Effects starts relatively simply with this Monday morning activity. This is actually a do-over of something I created in my free time on placement. The first time I made this, I didn’t set out to create something using expressions but I did end up using my existing knowledge of if/else statements to build a randomised colour picker.

The scene was an existing one from 1:14 in Buck’s video, Onward Internet.

Onward Internet from Buck on Vimeo.

The first time round, I set out to reproduce it just to see if I could do it with my skillset. This was a good few months ago, and I didn’t save the original file so I used this morning to create it again from scratch.

I remembered my general approach to this scene but not the code itself. The scene is simply made from triangular masked solids with a rotation of (index-1)*18 so that when the layer is duplicated, the layer is rotated automatically, this is just a time saving trick so that I can easily create and delete the layers, like this:


Next there was a struggle to get the if/else statement right. A syntax that may make sense to me might not translate well to after effects, I had to tray a few different methods before I found one that worked. As a result though, I have learned a little more about how After Effects thinks with random numbers.


Eventually I managed to establish a code that worked, producing random colours from my palette of 6.

screen Shot (1-36-57-28).png

The only downfall of this is that the code did use pure random numbers meaning that some consecutive shapes had the same colour. I had to go into quite a few individual layers and change their colours, which defeats the point of using expressions to achieve that effect. To make this work as a script I’d have to code in some sort of clause that recognises the colours either side and ensures that those ones are different. The issue of course will also occur less if more colours are used.
Highlighted in purple are the layers that I had to change manually. Both on the base composition and on the 2nd layer composition.



Just for fun, here is a comparison to show my final shot next to the one from Buck.



Edit: November 14th 2016

It might be possible to develop a script from this, to create random colour backgrounds IF i can get my hands on the code behind the repeater function found in AE shape layers.