<p>You could try moving shapes around in 3D in AE, but I think the free version of Cinema 4D included with AE would be a much easier tool for the job. Look up cinema 4DLite and after effects integration. </p>

CC BY-SA 3.0
2016-08-18T16:19:20.793Z
2016-08-18T16:19:20.793Z
tomh
<p>The tool you need is <strong>Maths</strong> (or Math, if you like), specifically that most beautiful of mathematickal arts: trigonometry.</p>

<p>First set the width of the base of your triangle to be the same as the sides of your polygon. Since you know the radius of the polygon, and it's a hexagon, that's easy - a hexagon is basically six equilateral triangles so the sides are the same as the radius. </p>

<p><a href="https://i.sstatic.net/AErus.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/AErus.png" alt="enter image description here"></a></p>

<p>So once you've made your hexagon, make a triangle with it's base the same as the radius of your polygon. Hmm, that's a bit more tricky. The measurement for polygons is always the outer radius, and the base of a triangle is not the same as the radius. We're going to need Pythagoras, and his Persian mates.</p>

<p><a href="https://i.sstatic.net/RfR6K.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RfR6K.png" alt="enter image description here"></a></p>

<p>Since we know the base (labeled b) and we know the angles (it should be obvious that the acute angle is half of the outer angle of the equilateral triangle - 30˚), we can use the law of sines to work out the base. Wikipedia states as did Abu Mahmud Hamid ibn Khidr Khojandi (but in Persian):</p>

<p><a href="https://i.sstatic.net/JsGVP.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/JsGVP.png" alt="enter image description here"></a></p>

<p>where a, b, and c are the lengths of the sides of a triangle, and A, B, and C are the opposite angles (see the figure to the right), while d is the diameter of the triangle's circumcircle.</p>

<p>We're in luck. The circumcircle of an equilateral triangle is its radius, so we can use <strong>d</strong> as our radius, and since we know b = half the radius of the polygon–lets call it <strong>p</strong>–and the angle B we can write:</p>

<pre><code>(p/2)/sin(B) = d
</code></pre>

<p>filling in the numbers for B</p>

<pre><code>d = (p/2)/sin(60) = p/1.73205080756888
</code></pre>

<p>where p is the radius of the hexagon. Now you can work this all out with a calculator, but if you change your hexagon you'll have to do it all again. <strong>Machines will do the work</strong>: use expressions to do the heavy lifting. <kbd>alt/opt</kbd>-click the stopwatch next to the <strong>outer radius</strong> property of the triangle and we put in this expression:</p>

<pre><code>var p = thisComp.layer("Shape Layer 1").content("Polystar 1").content("Polystar Path 1").outerRadius;
0.5 * p/Math.sin(Math.PI/3)
</code></pre>

<p>Hopefully you can see that this is the same operation as above, but since expressions use <a href="https://en.wikipedia.org/wiki/Radian" rel="nofollow noreferrer">radians</a> instead of degrees we're using π/3 instead of 60˚. Now no matter what size you make your polygon the side of the triangle will always match it.</p>

<p>Onwards and upwards. Now we need to attach the triangle to the edge of the hexagon. First, we'll make the hexagon the parent of the triangle, so that if we want to transform the hexagon all the triangles will follow. It also means that we can calculate the position of the triangle relative to the hexagon, avoiding having to do a lot of unnecessary transforms.</p>

<p>So for the right side of the hexagon, we can work out how far along the x axis the triangle has to be to be lined up with the edge exactly. Once again trigonometry is the key. There's a right angle triangle who's hypotenuse is the outer radius of he hexagon and whose base is the distance we need to offset the edge of the triangle.</p>

<p><a href="https://i.sstatic.net/CGkwL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/CGkwL.png" alt="enter image description here"></a></p>

<pre><code>b/sin(60) = r/sin(90) = r
</code></pre>

<p>because sine 90˚ is 1, so </p>

<pre><code>b=r*sin(60)
</code></pre>

<p>So in the position property of the triangle we put</p>

<pre><code>r=thisComp.layer("Shape Layer 1").content("Polystar 1").content("Polystar Path 1").outerRadius;
[r * Math.sin(Math.PI/3), 0]
</code></pre>

<p>Now you can see that the anchor point of the triangle aligns perfectly with the edge of the hexagon.</p>

<p><a href="https://i.sstatic.net/Pp4bq.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Pp4bq.png" alt="enter image description here"></a></p>

<p>Problem is, we want the base of the triangle to be the part that is aligned. So we'll offset the anchor point from the centre to the base. How do we work out how far that is. Yes, you already know, some more trig.</p>

<p><a href="https://i.sstatic.net/GcA8v.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/GcA8v.png" alt="enter image description here"></a></p>

<p>We know r, we worked it out before. and we knwo the angles so we can just give the Law of Sines another thrashing.</p>

<pre><code>a/sin(30) = r/sin(90) = r
a = r*sin(30)
</code></pre>

<p>Look familiar yet? So to get r for the triangle into this equation we just grab the radius value (or you could put in the formula, that's probably more precise, but it's unlikely to make a difference). The easy way of plugging in the correctly worded value of the triangle's radius is to use the pick-whip:</p>

<p><a href="https://i.sstatic.net/xRhSx.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/xRhSx.png" alt="enter image description here"></a></p>

<p>With the expression editor for the anchor point active, delete the contents, then type <code>[0,</code> to open some square brackets and provide 0 as the X value, don't forget the comma, then to provide the Y value drag the pick-whip to the radius value, then type in <code>* Math.sin(Math.PI/6)]</code>, don't forget to close the square brackets. The expression should be something like:</p>

<pre><code>[0, content("Polystar 1").content("Polystar Path 1").outerRadius*Math.sin(Math.PI/6)]
</code></pre>

<p>Now we just need to rotate the triangle 90˚ to line it up.</p>

<p><a href="https://i.sstatic.net/TRxB8.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TRxB8.png" alt="enter image description here"></a></p>

<p>Ok, now it's time to enter three dee land. Turn both layers into 3D layers. Everything should stay as it is, but now we can fold the triangle up.</p>

<p><a href="https://i.sstatic.net/AmAEK.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/AmAEK.png" alt="enter image description here"></a></p>

<p>If you activate the rotate tool you'll see the rotation handles for the triangle coming out of its anchor point. As you can see the one we need to rotate is around the x axis. Give it a try with the rotate tool and you'll notice that is actually affecting the Y rotation. This is because we've rotated the triangle 90˚ on the Z axis already. The reason I used the rotate tool is that trying to work out rotation transforms like that makes my head hurt too much. Now I know what property I need to add our next expression to, I just have to work a couple of things out.</p>

<p>Firstly, the triangle can't stay as an equilateral triangle, because it won't make a diamond shape that way, it will just fold perfectly flat on to the hexagon. we need to increase its scale, then we have to do some more trig.</p>

<p>Let's scale it an arbitrary amount. Whatever looks good for you. Imma just grab the drag handles with the move tool and stretch.</p>

<p><a href="https://i.sstatic.net/ZOs2r.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZOs2r.png" alt="enter image description here"></a></p>

<p>Now we have to work out what angle we need to rotate to get the tip of the triangle above the centre of the hexagon. Here's a screen shot from custom view, where I've approximated it by eye, and drawn the triangle we need to solve to work out our angle.</p>

<p><a href="https://i.sstatic.net/W68iP.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/W68iP.png" alt="enter image description here"></a></p>

<p>We know b, we don't know a, and we have to work out h. h will be the height of the triangle once it has been scaled up. </p>

<p>The height of the triangle can be worked out with the Law of Sines, or if you're bored of that you can also use the fact that we know the distance from the center to the base - it's the amount we offset the anchor point - and we know the distance from the centre to the tip - that's the outer radius. Multiply it by the scale/100 to get the final, scaled height. In expression form:</p>

<pre><code>h = (transform.scale[1]/100)*(transform.anchorPoint[1] + content("Polystar 1").content("Polystar Path 1").outerRadius);
</code></pre>

<p>So, again with the Law-o-Sines, and the previous diagram. We know b, that's the distance from the centre of the hexagon to the base of the triangle, and we know that the angle A that we want to find out will be 90-B (the sum of the angles in a triangle being 180˚). So:</p>

<pre><code>B/sin(B) = h/sin(90)  = h
sin(B) = b/h
</code></pre>

<p>so B is arc-cosine(b/h) arc-cosine being the inverse of sine, AKA asin.</p>

<p>in expression form:</p>

<pre><code>h = transform.scale[1]*content("Polystar 1").content("Polystar Path 1").outerRadius/(100*Math.sin(Math.PI/6));
b = transform.position[0];
90+radiansToDegrees(Math.asin(b/h))
</code></pre>

<p>The 90+ in the last line is because it was 90˚ out when I tried it, there's probably a sound mathematical reason, like I should have used acos instead of asin, but whatevs, it works.</p>

<p>So now our triangle will always have the tip in line with the midpoint of the hexagon, no matter what you scale it. Here's how it looks from side on:</p>

<p><a href="https://i.sstatic.net/0ntc3.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0ntc3.png" alt="enter image description here"></a></p>

<p>A thing of beauty. Now to avoid doing a whole lot more thinkination for the other sides, let's use a hack. Make a new null, make it a 3D layer and set its parent to the hexagon, placing its centre at the centre of the hexagon (hold the shift key while you drag the parenting pick-whip).</p>

<p><a href="https://i.sstatic.net/Ftpxt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Ftpxt.png" alt="enter image description here"></a></p>

<p>Now change the parent of the triangle to the null. Select the null and the triangle and duplicate them. Rotate the newly created null 60˚ on the Z-axis, and voila, your second facet. Rinse, repeat four more times. I'll leave you to work out how to get the bottom half of the diamond. Ok, all right, <em>hint: rotate the seventh null 180˚ on the x or y axis</em>. </p>

<p>Oh, WAIT Stop, before you do this, just one thing you might want to do. Link the scale of the new triangle you made when you duplicated the original one to the scale of the original triangle. That way you can scale them all easily. Do that by <kbd>alt/option</kbd>-clicking the scale stopwatch on the second triangle and dragging the pick-whip to the scale property of the first. Use this second layer as the source of all succesive clones and they will follow the scale of the first layer, meanign you could easily animate that.</p>

<p>Add some lights and fiddle around with the material options of the layers until it looks super special, and you're gold. Maths: it works, suckers.</p>

<p><a href="https://i.sstatic.net/F9dWh.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/F9dWh.gif" alt="![enter image description here"></a></p>

<h1>TL;DR</h1>

<p>Download the project file <a href="http://adobe.ly/2b81Sk9" rel="nofollow noreferrer">here</a>.</p>

<p>Also, yeah, do this in a proper 3D program like C4D (since you've already got it with AE) or Blender (since free), unless you're nuts like me.</p>

CC BY-SA 3.0
2016-08-20T13:16:25.763Z
If you were a women I would definitely marry you. Are you a woman?
Jacob
CC BY-SA 3.0
2016-08-20T13:16:50.987Z
We could build 3d things and have kids that would build them too
Jacob
CC BY-SA 3.0
2016-09-05T15:06:27.237Z
Best comment I have seen yet ^
KenzoEngineer
CC BY-SA 3.0
2016-08-20T11:55:42.283Z
2016-08-20T12:07:23.583Z
2016-08-20T12:07:23.583Z
stib
<p>I'm new to After Effects but I did some work with Photoshop in the past.</p>

<p>I'm trying to create a diamond with AE (and make a gif later so it rotates).
To be super clear - I'm trying to convert the image below into 3D:</p>

<p><a href="https://i.sstatic.net/jz6Uv.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jz6Uv.png" alt="enter image description here"></a></p>

<p>I'm sitting here for 12 hours and trying to perform some basic operations in 3D and I'm totally stuck. For now I have two shapes in my composition, a simple rectangle and a polygon (polygon to make things easier):</p>

<p><a href="https://i.sstatic.net/K2FNx.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/K2FNx.png" alt="enter image description here"></a></p>

<p>I'm trying to align the triangle to the polygon somehow in a 'smart' way, not by moving the x/y/z position by 1/10 of the pixel each time, rotating the camera and checking if it fits. </p>

<p>Is there any tool in Adobe AE which will help me do this?
I just need to fit the triangle's basis to one of the polygon's edges so it matches perfectly like this:</p>

<p><a href="https://i.sstatic.net/S9Umo.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S9Umo.gif" alt="enter image description here"></a></p>

<p>Thanks for any help! :)</p>

CC BY-SA 3.0
2016-08-18T16:19:14.547Z
This may not be the answer you are looking for but I suggest doing the 3d modelling in another program like blender, then importing it into after effects.
KenzoEngineer
<after-effects><3d><shape>
How to align a shape to stick to another in AE?
Jacob
# How to align a shape to stick to another in AE?

(Asked by: username_0 on 2016-08-17)

I'm new to After Effects but I did some work with Photoshop in the past.

I'm trying to create a diamond with AE (and make a gif later so it rotates).
To be super clear - I'm trying to convert the image below into 3D:

[![enter image description here](https://i.sstatic.net/jz6Uv.png)](https://i.sstatic.net/jz6Uv.png)

I'm sitting here for 12 hours and trying to perform some basic operations in 3D and I'm totally stuck. For now I have two shapes in my composition, a simple rectangle and a polygon (polygon to make things easier):

[![enter image description here](https://i.sstatic.net/K2FNx.png)](https://i.sstatic.net/K2FNx.png)

I'm trying to align the triangle to the polygon somehow in a 'smart' way, not by moving the x/y/z position by 1/10 of the pixel each time, rotating the camera and checking if it fits.

Is there any tool in Adobe AE which will help me do this?
I just need to fit the triangle's basis to one of the polygon's edges so it matches perfectly like this:

[![enter image description here](https://i.sstatic.net/S9Umo.gif)](https://i.sstatic.net/S9Umo.gif)

Thanks for any help! :)

**Tags:** after-effects, 3d, shape

> **Comments:**
> **username_1**: This may not be the answer you are looking for but I suggest doing the 3d modelling in another program like blender, then importing it into after effects.  

---

## 2 answers

### Answer by username_3 on 2016-08-20. Score: 3 | Accepted answer

The tool you need is Maths (or Math, if you like), specifically that most beautiful of mathematickal arts: trigonometry.
First set the width of the base of your triangle to be the same as the sides of your polygon. Since you know the radius of the polygon, and it's a hexagon, that's easy - a hexagon is basically six equilateral triangles so the sides are the same as the radius. 

So once you've made your hexagon, make a triangle with it's base the same as the radius of your polygon. Hmm, that's a bit more tricky. The measurement for polygons is always the outer radius, and the base of a triangle is not the same as the radius. We're going to need Pythagoras, and his Persian mates.

Since we know the base (labeled b) and we know the angles (it should be obvious that the acute angle is half of the outer angle of the equilateral triangle - 30˚), we can use the law of sines to work out the base. Wikipedia states as did Abu Mahmud Hamid ibn Khidr Khojandi (but in Persian):

where a, b, and c are the lengths of the sides of a triangle, and A, B, and C are the opposite angles (see the figure to the right), while d is the diameter of the triangle's circumcircle.
We're in luck. The circumcircle of an equilateral triangle is its radius, so we can use d as our radius, and since we know b = half the radius of the polygon–lets call it p–and the angle B we can write:
(p/2)/sin(B) = d

filling in the numbers for B
d = (p/2)/sin(60) = p/1.73205080756888

where p is the radius of the hexagon. Now you can work this all out with a calculator, but if you change your hexagon you'll have to do it all again. Machines will do the work: use expressions to do the heavy lifting. alt/opt-click the stopwatch next to the outer radius property of the triangle and we put in this expression:
var p = thisComp.layer("Shape Layer 1").content("Polystar 1").content("Polystar Path 1").outerRadius;
0.5 * p/Math.sin(Math.PI/3)

Hopefully you can see that this is the same operation as above, but since expressions use radians instead of degrees we're using π/3 instead of 60˚. Now no matter what size you make your polygon the side of the triangle will always match it.
Onwards and upwards. Now we need to attach the triangle to the edge of the hexagon. First, we'll make the hexagon the parent of the triangle, so that if we want to transform the hexagon all the triangles will follow. It also means that we can calculate the position of the triangle relative to the hexagon, avoiding having to do a lot of unnecessary transforms.
So for the right side of the hexagon, we can work out how far along the x axis the triangle has to be to be lined up with the edge exactly. Once again trigonometry is the key. There's a right angle triangle who's hypotenuse is the outer radius of he hexagon and whose base is the distance we need to offset the edge of the triangle.

b/sin(60) = r/sin(90) = r

because sine 90˚ is 1, so 
b=r*sin(60)

So in the position property of the triangle we put
r=thisComp.layer("Shape Layer 1").content("Polystar 1").content("Polystar Path 1").outerRadius;
[r * Math.sin(Math.PI/3), 0]

Now you can see that the anchor point of the triangle aligns perfectly with the edge of the hexagon.

Problem is, we want the base of the triangle to be the part that is aligned. So we'll offset the anchor point from the centre to the base. How do we work out how far that is. Yes, you already know, some more trig.

We know r, we worked it out before. and we knwo the angles so we can just give the Law of Sines another thrashing.
a/sin(30) = r/sin(90) = r
a = r*sin(30)

Look familiar yet? So to get r for the triangle into this equation we just grab the radius value (or you could put in the formula, that's probably more precise, but it's unlikely to make a difference). The easy way of plugging in the correctly worded value of the triangle's radius is to use the pick-whip:

With the expression editor for the anchor point active, delete the contents, then type [0, to open some square brackets and provide 0 as the X value, don't forget the comma, then to provide the Y value drag the pick-whip to the radius value, then type in * Math.sin(Math.PI/6)], don't forget to close the square brackets. The expression should be something like:
[0, content("Polystar 1").content("Polystar Path 1").outerRadius*Math.sin(Math.PI/6)]

Now we just need to rotate the triangle 90˚ to line it up.

Ok, now it's time to enter three dee land. Turn both layers into 3D layers. Everything should stay as it is, but now we can fold the triangle up.

If you activate the rotate tool you'll see the rotation handles for the triangle coming out of its anchor point. As you can see the one we need to rotate is around the x axis. Give it a try with the rotate tool and you'll notice that is actually affecting the Y rotation. This is because we've rotated the triangle 90˚ on the Z axis already. The reason I used the rotate tool is that trying to work out rotation transforms like that makes my head hurt too much. Now I know what property I need to add our next expression to, I just have to work a couple of things out.
Firstly, the triangle can't stay as an equilateral triangle, because it won't make a diamond shape that way, it will just fold perfectly flat on to the hexagon. we need to increase its scale, then we have to do some more trig.
Let's scale it an arbitrary amount. Whatever looks good for you. Imma just grab the drag handles with the move tool and stretch.

Now we have to work out what angle we need to rotate to get the tip of the triangle above the centre of the hexagon. Here's a screen shot from custom view, where I've approximated it by eye, and drawn the triangle we need to solve to work out our angle.

We know b, we don't know a, and we have to work out h. h will be the height of the triangle once it has been scaled up. 
The height of the triangle can be worked out with the Law of Sines, or if you're bored of that you can also use the fact that we know the distance from the center to the base - it's the amount we offset the anchor point - and we know the distance from the centre to the tip - that's the outer radius. Multiply it by the scale/100 to get the final, scaled height. In expression form:
h = (transform.scale[1]/100)*(transform.anchorPoint[1] + content("Polystar 1").content("Polystar Path 1").outerRadius);

So, again with the Law-o-Sines, and the previous diagram. We know b, that's the distance from the centre of the hexagon to the base of the triangle, and we know that the angle A that we want to find out will be 90-B (the sum of the angles in a triangle being 180˚). So:
B/sin(B) = h/sin(90)  = h
sin(B) = b/h

so B is arc-cosine(b/h) arc-cosine being the inverse of sine, AKA asin.
in expression form:
h = transform.scale[1]*content("Polystar 1").content("Polystar Path 1").outerRadius/(100*Math.sin(Math.PI/6));
b = transform.position[0];
90+radiansToDegrees(Math.asin(b/h))

The 90+ in the last line is because it was 90˚ out when I tried it, there's probably a sound mathematical reason, like I should have used acos instead of asin, but whatevs, it works.
So now our triangle will always have the tip in line with the midpoint of the hexagon, no matter what you scale it. Here's how it looks from side on:

A thing of beauty. Now to avoid doing a whole lot more thinkination for the other sides, let's use a hack. Make a new null, make it a 3D layer and set its parent to the hexagon, placing its centre at the centre of the hexagon (hold the shift key while you drag the parenting pick-whip).

Now change the parent of the triangle to the null. Select the null and the triangle and duplicate them. Rotate the newly created null 60˚ on the Z-axis, and voila, your second facet. Rinse, repeat four more times. I'll leave you to work out how to get the bottom half of the diamond. Ok, all right, hint: rotate the seventh null 180˚ on the x or y axis. 
Oh, WAIT Stop, before you do this, just one thing you might want to do. Link the scale of the new triangle you made when you duplicated the original one to the scale of the original triangle. That way you can scale them all easily. Do that by alt/option-clicking the scale stopwatch on the second triangle and dragging the pick-whip to the scale property of the first. Use this second layer as the source of all succesive clones and they will follow the scale of the first layer, meanign you could easily animate that.
Add some lights and fiddle around with the material options of the layers until it looks super special, and you're gold. Maths: it works, suckers.

TL;DR
Download the project file here.
Also, yeah, do this in a proper 3D program like C4D (since you've already got it with AE) or Blender (since free), unless you're nuts like me.

> **Comments:**
> **username_0**: If you were a women I would definitely marry you. Are you a woman?  
> **username_0**: We could build 3d things and have kids that would build them too  
> **username_1**: Best comment I have seen yet ^  

---

### Answer by username_2 on 2016-08-18. Score: 1

You could try moving shapes around in 3D in AE, but I think the free version of Cinema 4D included with AE would be a much easier tool for the job. Look up cinema 4DLite and after effects integration.


---

