x = Math.pow(a-d, 2)+Math.pow(b-e, 2)+Math.pow(c-f, 2);
x = Math.sqrt(x);
m = Math.pow(d-g, 2)+Math.pow(e-h, 2)+Math.pow(f-i, 2);
m = Math.sqrt(m);

x = x / m;
x = x * 100;
x = 100 - x;

if(x<10){
x=10
}

Alright.

What we know is where the camera starts and ends. In After Effects, all the elements in 3D space have an x, y and z position, which is written like this

thisComp.layer("Roving Camera").position[0, 1, 2]

thisComp —the selected composition
layer("Roving Camera") — name of layer (which was actually a “virtual camera”)
position — the attribute we are editing
[0, 1, 2] — the three elements in a position attribute, that is, x y and z.

So, if I have a layer named ‘Han Solo’ and i wanted to make the variable ‘t’ its y position I would write

t = thisComp.layer("Han Solo").position[1]

Or, if I have a layer named ‘Ghengis’ and i wanted to make the variable ‘t’ its z position I would write

t = thisComp.layer("Ghengis").position[2]

So now we want the opacity of a layer (lets call it Jedi) to be proportional to how far away the Roving Camera is. We know the start point of the Roving Camera (an x, y, z coordinate) and we know its end point (and x, y, z coordinate in front of layer Jedi)

Now how to we find the distance between two points?

And so what about a z point? Well, the equation for that is

Distance between two points in 3D space =

So now we know the distance between the Roving Camera and layer Jedi.

in After Effects expression language this is:

a = thisComp.layer("Roving Camera").pointOfInterest[0];
b = thisComp.layer("Roving Camera").pointOfInterest[1];
c = thisComp.layer("Roving Camera").pointOfInterest[2];


d = thisComp.layer("Jedi").position[0];
e = thisComp.layer("Jedi").position[1];
f = thisComp.layer("Jedi").position[2];


x = Math.pow(a-d, 2)+Math.pow(b-e, 2)+Math.pow(c-f, 2);
x = Math.sqrt(x);

(I’m using the Camera’s Point of Interest value instead of position as I what the layer Jedi to be fully opaque when the camera is in front of it rather than being on top of it. )

Now, what i did next was do another pythagorean distance equation, this time with a layer at the start position and the layer Jedi

g = thisComp.layer("Start").pointOfInterest[0];
h = thisComp.layer("Start").pointOfInterest[1];
i = thisComp.layer("Start").pointOfInterest[2];


m = Math.pow(d-g, 2)+Math.pow(e-h, 2)+Math.pow(f-i, 2);
m = Math.sqrt(m);


Now I’ve got two distances, the total distance (m) and the distance of the camera to the final layer Jedi (x)

I can express the camera distance as a percentage of the final distance

x = x / m;

x = x * 100;


And because I want the end to be 100% opaque, I subtract the total amount by the traveled distance.

x = 100 - x;


Now what we found was that we wanted to slightly see all the objects at the start, so I made a condition that the layer Jedi is always 10% opaque.

if(x<10){
x=10
}

Going from a static look to a 3D environment was a pretty big leap, and meant that we would have to look in to using software capable of dealing with it. I decided on After Effects, as I’m pretty familiar with it and have used its 3D tools in the past.

What is really cool about it, that i only really discovered recently was Expressions. Expressions are like little scripts that changes a layer’s property. You can reference other layer’s properties and there is a whole range of math tools to help you out.

For instance, I had a whole bunch of buttons for the DVD which I needed to see when designing, but then turn them off when I output. So I put an expression on each button-layer’s opacity that referenced the opacity of an adjustment layer. I could then change one variable instead of 30.

So thats a pretty simple example. What was more complex was my next brain-wave.
The DVD menus are designed so that when you go from one to another, its like you are going though into a different part – See this example on Youtube

What we wanted to do was, as the “camera” moved towards an object went from transparent to opaque. The way we did this was through an expression (special thanks to an old friend Stuart Evans, a math teacher at Heathdale Christian College).

Stay tuned for part 2…

Cutting Sons of Korah Desktop

Originally uploaded by thefunklab.

But the product looks great at the end.