trigonometry for geeks


goal: to repeat macos menu with aftereffects using shoe cream cans

more preciesely: to make growing cans wave, with controllable wave parameters

trouble: cans must be separated by equal distance and should not cross each other when they grow

solution: we’ll create an expression for this movement with help of aftereffects.

sample movie

1. let’s clear up the situation: we need our cans to move out and grow when some kind of a control object coming towards and they must smoothly take the initial phase when it goes away – And again, we need to keep in mind that cans should not intersect wıth each other when the control object is in movement.

2. let’s make a graph of the variation cans size and position depending on the control object movement

at the graphs:

X axis – distance between can and control object

Y axis – position (green colored) and size (red one) variations

a – distance, when the can begins to “react” to control object in a matter of a movement

b – initial size of the can

c – maximum size variation (wave height)

d – maximum movement of the can

e- distance, when the can is begins to “react” the control object in a matter of a resize

let’s recall some school trigonometry. seems like we need a pieces of sine and cosine graphs at the middle of our plot

if the distance to control object is less then “a” – the can moves by Y(X)=-d formula

if the distance to control object is more than “a” – the can moves by Y(X)=d formula

if the distance to control object fits into the interval of “a” and “-a” – the can moves by Y(X)=sin((x*pi)/(a*2))*d formula

if the distance to control object is less than “e” and “-e” – the can grows by Y(X)=((cos((x*pi)/e)+1)/2)*c+b formula

if the distance to control object is less than “-e” and more then “e” – the can grows by Y(X)=b formula

4. now we need to translate this data to ae expression language

let’s make a comp with all of the cans and add a null to it. the null will be a control object.

the ahchor point of all the cans must be at their bottom. so they grow upwards only.

let’s apply to the dummy four “Expression control – Slider control” effects, and rename them appropriately. they will be responsible for variables “a”, “c”, “d” and “e”. the “b” variable will be ecual to 1.

here is the expression we need to apply to the position of each can:

pos = thisComp.layer(“Null 1”).effect(“Shift”)(“Slider”);
if (thisComp.layer(“Null 1”).transform.position[0] – transform.position[0] < 0) {pos = -thisComp.layer(“Null 1”).effect(“Shift”)(“Slider”);}
if (Math.abs(thisComp.layer(“Null 1”).transform.position[0] – transform.position[0]) < thisComp.layer(“Null 1”).effect(“Affect pos”)(“Slider”))
{pos = Math.sin(3.14*(thisComp.layer(“Null 1”).transform.position[0] – transform.position[0])/thisComp.layer(“Null 1”).effect(“Affect pos”)(“Slider”)/2)*thisComp.layer(“Null 1”).effect(“Shift”)(“Slider”);}

and for the scale of every can apply this one below:

scl = thisComp.layer(“Null 1”).effect(“Max Scale”)(“Slider”)*((Math.cos(((thisComp.layer(“Null 1”).transform.position[0] – transform.position[0])/thisComp.layer(“Null 1”).effect(“Affect scale”)(“Slider”))*3.14))+1)/2+1;
if (Math.abs(thisComp.layer(“Null 1”).transform.position[0] – transform.position[0]) > thisComp.layer(“Null 1”).effect(“Affect scale”)(“Slider”)) {scl = 1;}

as you can see – our expressions means the same, that our formulas and plots mean.

That’s it! Let’s pull the control object and enjoy the result!

as a final touches to the project we add some back, shadows and “wet-floor” glossy reflections.


5 Responses to “trigonometry for geeks”

  1. Very interesting tutorial.

  2. 2 James

    I was wondering if you can help me with getting this expression to work. When i copy + paste the expression above i get an error. I’ve been pulling my hair for the past couple hours trying to figure out what the problem was but no luck. Let me know!

  3. 3 vitsly

    Hi James

    check out the quotes in pasted expressions

    may be aftereffects change em to interrogation mark or something else

    also the sliders names must be the same as in expressions

    or you can download the aep file here

    regards, Vitsly

  4. 4 fat burning boost

    Your means of describing everything in this article is really nice, all be able to without difficulty know it, Thanks
    a lot.

  5. 5 phil

    works like a charm, thanks, and a nice clear tutorial. curious to know if anything can be added to make sure the spacing between items remains the same at all times (ie 10px apart from each other) so there’s no overlap if items are very close together.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: