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.


USB Arduino Setup

This was an extra session held by spencer to introduce processing through an Arduino to those who were interested.


USB Port

Screen Shot 2017-04-01 at 17.24.09

Line 3: The serial library is what allows processing to receive data from the USB port.
Line 4: Serial myport is the path of communication to the Arduino

Line 117: The serial myport is setup here. Serial.list()[3] defines which USB port to use and 9600 is the speed of communication.


Println reveals that the serial.list array only has 2 drawers. Because I don’t have an arduino plugged in and serial list()[3] is out of bounds.

To catch this error we wrote a for loop…


with a new variable called havearduino (we had to define this at the top)


…and apply it with an if statement at the beginning of void draw so our check reader() function only runs if the arduino is plugged in

The next line down in void draw calls the function to replace the old ID with a new one.


Now the sketch runs, bypassing the need for an arduino because there is already some functionality built in that works based of keypresses.


Check reader function


Check reader needs to figure out the new ID

336: Listen for information from the arduino and store it in dat
338: We use asterisks to separate the id numbers so the if statement checks to see if the current character is an asterisk. It will use this break to store non-asterisk characters in thisreading.
342: If the character IS and asterisk, that means we have come to the end of the id, and it can now be compared with the lastreading. If they are not the same, then thisreading replaces lastreading.

348: Int stpos6 is about applying the numbers to a string UID: 01 23 45 67


Get data function

This function searches within the data and makes arrays from chunks of it. We end up with 3 arrays based on the FMP, Special Study and Dissertation data. The way you write this function will vary depending on the data that you are reading.


Applying Interactivity

Now, to apply the connection with the Arduino to an existing sketch. For this, we used the generative letter project we had been working on in Tuesday sessions.


For this we work by pasting the necessary parts of the code across part by part.


First import the library.


Then copy over the havearduino variable and all the other strings utilised in the checking and receiving parts of the code


create the link to card reader

check the card reader each frame at the beginning of void draw, note that you’ll also need to paste in the checkreader() function.

Now the id and new id values are being picked up.

Screen Shot 2017-01-26 at 12.10.14

paste across the if statement that compares the new and old id. Remember to paste in the getdata function AND copy across the data text file too.

Screen Shot 2017-01-26 at 12.13.11

some of the variables in get data are undeclared, we could declare them but a lot of them are not necessary, since the only part of the data we are using in this sketch is the name.

Screen Shot 2017-01-26 at 12.14.53

Strip down the get data function accordingly.

Now paste your original variables into get data and redeclare them to link them up with getdata

This works, except we need to add asterisks onto the end of currentname

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.1.04/B.04 Random with Constraints

At the end of SS.3.01 Auto-Random Colour Picker with Expressions, I concluded that the expression I wrote would need modification, since true randomness brings about the possibility of the same colour being picked twice. The time I spend rectifying this by selecting and modifying individual layers meant that this expression could not realistically be used as a time saving device.

Today in the open coding session I requested that Spencer show us how to write a code that would generate a random number but while also storing the number it picked previously, ensuring that the same number is not picked twice in a row. This is the code:


There are two arrays in this code (If we think of arrays like filing cabinets, this makes a lot more sense).

Line 1: The first array is called stuff and it contains all of the seven options.
Line 2: The second array is called used and will only contain 1’s and 0’s. The used array is define to always be the same size as the stuff array.
Line 3: A new integer called numpicked keeps track of how many times we have picked an option out of the stuff array. We will use this later to check if it is more than seven, and reset the used drawer if it is.
Line 4: Int total is just for the user to define how many random choices the program has to make.

Line 6: Void setup() is used because we do NOT need to repeat the whole function. The main repetition power comes from the for loop on line 14. Even this loop has a limit, which is defined on line 4 and called in the loop’s condition.
Line 8: Set numpicked to zero.
Line 10: This for loop then runs through completely, from lop=0 to lop=7. It goes through all seven ‘drawers’ of the used array ‘filing cabinet’ and putting a value of 0 into each one.
Line 14: Here, a large for loop begins, using lop2 this time. Every time lop2 increases in value, the following happens…

Line 15: A random number between 1-7 is picked and stored locally as thisran.
Line 16: A while loop is used to see if the used ‘drawer’ that correlates to the number thisran contains a 1. If it does, a new thisran is picked. (A while loop is used instead of an if statement because it repeats until used[thisran] does not equal 1 – meaning we have found an unused value.)
Line 19: When we are happy with thisran, we elect to use it. A number has been chosen, so numpicked increases by 1.
Line 21: If this increase in numpicked bring us to numpicked = 6, we know that the number we have just picked will be the last in the sequence (see paragraph below). Line 22: If this is the case, numpicked is reset to equal 0.
Line 23: The for loop from line 10 is run through again, setting all the ‘drawers’ in the used array to 0.
Line 27: On this clean slate, the ‘drawer’ in the used array that corresponds to thisran is given a value of 1.
Line 28: The ‘drawer’ in the stuff array that corresponds to thisran is printed.

This code actually picks out numbers in groups of six before resetting to do another six, I originally intended it to be 7, so that all numbers would be scrambled but still equally represented. Increasing the condition of the if statement on line 21 to (numpicked == stuff.length) meant that regardless of the value I plugged into total, I would still only get 13 values. I could investigate this and spend time fixing it, but I have elected not to, since I believe that, having one less space than there are options brings about another element of randomness. There is no guarantee that any one choice will be picked at all, and they all have a 1 in seven chance every time 6 options are picked.

If I can later figure out how to change this, I might add a button into my script that allows the user to pick between these two modes, scrambled or random.

I realise that processing has a slightly different syntax to the javascript expressions inside After Effect, but I believe I can figure out how to apply the principle of the code spencer showed us to the context of expressions.

SS.1.03 Processing and p5.js: Maps and other Functions

As part of my efforts to widen my knowledge of code i’m learning Processing and JavaScript from Daniel Schiffman. Today I followed Coding Challenge 01:

This was fun and interesting, but really speedy! This is good though because its pushing me to get better and quicker and more comfortable with typing out the basics quickly and spending more energy on the important stuff.

Here’s my outcome.

The thing I took away from this short challenge was that I was a little behind on maps. I understand how they work but don’t remember that syntax and cannot write one myself. Soo THIS is what i’ll go over next.

Another part which was fairly new ground for me was the idea of multiple tabs within a sketch, and defining and running a function like he did. It seems to be written differently to how I remember writing functions in Codecademy, and I’d like to cover that again so I can completely understand.

OKAY SO. Map Function.

I found another Dan Schiffman tutorial on the Map() function for JavaScript. This is probably more useful for me as i’ll be writing my script in JS anyway. (I don’t really forsee a use for the map function at this point though, who knows). First, though i’ll watch this tutorial on the map function within processing, since its the only time i’ve used one and the syntax may be different for JavaScript.

I understand that, the first letter in the brackets is the property we are looking at, the next two are the max and min values to take from that property and the second two values are the max and min values to assign to the variable (in the example above, that’s x or y). I was able to understand what was going on here because I was also able to correct a mistake in the video. Where he assigned x and y to the position on the box and not mouseX, mouseY.

Right, on to p5.js now.

While Schiffman was explaining the basics of a map() function, I tried my hand at writing one in p5 using what I knew from processing. It didn’t work.


Originally put my map function up at the top before function setup but then I got an error message telling me to put it inside setup. I did but the effect still didn’t work. I thought it was probably a syntax difference between Processing and JS so I followed the rest of the video to see how he did it.

Turns out, that map functions in JavaScript are written the exact same way they are in Processing, I was however supposed to put my map function in the draw not the setup. Now it works!

Next up, Functions. Not the ones written like map() or line() but the ones that require curly brackets, and how to call them. In processing, they begin with ‘void’, and in JavaScript they seem to begin with ‘function’. I do vaguely remember a lesson in functions on Codecademy. So lets revisit that and then try to figure out how this translates to Processing.

The functions i’m working with in this lesson are a little different to the map function since it has steps to complete {inside the curly brackets}. This makes it feel a little more similar to the void functions i’ve seen in Processing, even though the void functions i’ve seen so far all leave the () brackets blank. They don’t seem to have any need for parameters just yet. Maybe that’s because i’ve never had to call these functions yet (except earlier in this post in the starfield challenge).

Calling a function in Javascript feels pretty different to calling one in Processing too. I’m pretty sure that they use . (dot) in the syntax for Processing. Maybe I should try writing the same functions in both, to identify the differences.

Yet again Daniel Schiffman has become super useful as he has a series of videos on Functions within Processing.

Screen Shot 2016-12-18 at 14.51.48.png

In this series, Schiffman introduces functions, explains the make up of them:

returnType name (parameters){block of code}

for instance:
void draw (){}
rect(30,30,50,50); and
int map(mouseX,0,600,0,255);

A quick refresher on return types. Void is used when a return type is not necessary, AND the function in being defined by you. Rect, Map, Line ect are all functions that were defined by Casey and Fry when they developed processing.


Using a made up function as an example – flower(); – he demonstrates how you can store a block of code in a function and use it in elsewhere in your code. The ‘flower’ was actually a red ellipse but after the tutorial, I went ahead and made an element that looked vaguely more like a flower.

Screen Shot 2016-12-18 at 14.39.23.png

This is extremely useful and I can already see where this could be used. Before progressing with this tutorial, I went back to the code from Processing Week 01 to alter the way I organised clouds as a repeating element.


In the next video, Schiffman shows how to call a function in Processing. It’s exactly the same as JavaScript (though this example requires no parameters). I still haven’t found out where the . (dot) comes into this. So I’ll complete the tutorial to find out.


I finished the tutorial and never found out the use for a . (dot) but now I know how to call a function in Processing I can translate the JS function I wrote in Codecademy to make it work in Processing.

I even made an interactive version where the user can input the length and width of the box with mousePressed. To aid understanding, I included visual feedback in the form of a rectangle drawn showing what the user inputted when they clicked the mouse and the calculated perimeter displayed on screen.

SS.1.02 Processing Week 02

Since I missed James’s workshop this week, he sent me the annotated code that they had produced in the session.

The first sketch was an ellipse and a rectangle which changed size depending on which keys were pressed. Something I couldn’t understand however was why, when I pressed the ‘q’ ‘u’ and ‘e’ keys to change the size of the shapes, all previously drawn shapes would dissappear. I looked through the code for a line that might suggest, deletion of the old shape. But couldn’t find one. This didn’t make sense to me because in the code we wrote last week, the ellispes drawn by the mouse click stayed on the screen as new ones were drawn. It seems like this is just the nature of the programming language, or maybe that the mouse click is an essential factor here.

Comparing the code for both sketches. Why do the shapes seem to ‘despawn’ in colour_scroll but not in sketch_161108_002

I think the main difference here might be that in last week’s sketch an ellipse is only drawn when the mouse is pressed but in the color_scroll, the shapes are drawn and then those same shapes change depending on the parameters set by the rest of the code.


I studied the code of colour_scroll and proceeded to write my own, instead of copying it word for word from the version that was given to me, I opened last week’s sketch to help me through the syntax. My end result was as follows:




SS.0.04 Outcome proposals

For today’s session, we are expected to deliver a visual proposal of our final year outcomes. I felt that to best illustrate this, I should sketch up how I envision my work to be presented at the end of year show.

First, I sketched out how I would present the results of my special study.

  • On the large screen, I’ll loop a 1 min presentation/advertisement for my script. That briefly outlines what it does and its capabilities.
  • I’m also considering presenting the full tutorial that i’ll be making for this script. Potentially this will also be shown on the large screen, but only when the viewer, but only when someone wants to watch it. This would mean installing a play button, providing headphones and setting the screen up so that it loops the short ad until a viewer presses play to run the tutorial. Alternatively, I can make do with just outlining the content of the tutorial in my special study book/zine and attaching a QR code to the tutorial online somewhere in the vicinity.
  • As aforementioned, i’ll also be presenting a book of my script  and all the expressions and other chunks of code I developed as part of my special study. Each section will introduce the code, provide a short insight into the development process and showcase what it can do.
  • The last piece in this section falls under my FMP rather than the special study. Its an interactive haptic manifestation of the code my script is built on. In this example I have sketched a machine that selects a new colour at random, while ensuring that the same colour is not picked successively. This was inspired by the code I wrote for After Effects a few weeks ago. This piece is a step towards engaging viewers who may not be so interested in the inner working of after effects by bringing the thought process out of the screen and showing what task the code can undertake.


Secondly, I sketched up how my other two FMP outcomes will be presented.

  • The large screen will show my main piece, which is a homage to the DIY culture in the motion graphics industry. This is likely to be a motion graphics piece, though i have considered an interactive timeline as an alternative approach.
  • On the small screen there will be an interactive quiz where people can check off all the types of ‘hacking’ they have done in their lifetime. This will then generate a video comprised of clips I have premade that should tell the (brief) history of that user’s involvement in this ‘hack’ culture. The idea is that those born closer to the end of the 20th century will have grown up with computers and feel more comfortable making modifications and designing their own user experience.