<p>The setup is reasonably simple, built in functions, trigonometry and some Pythagoras will get you there. Have a look at the diagram below:</p>

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

<p>The orange solid is the <strong>crank</strong>, with its anchor point shown at the bottom. Its rotation drives the whole thing (you could drive it from the piston, but this is probably easier(?)). In your diagram the crank isn't shown, so you can just use a solid, and make it a <strong>guide layer</strong>. Attached to the crank is a null called <strong>pivot</strong>, lined up to the where the <strong>crank</strong> and <strong>piston</strong> are attached to each other, with the crank as its parent. I use that to save myself a little bit of maths, The green solid is the <strong>piston</strong>, its anchor point is at the top, lined up with the blue solid.</p>

<p>Now to find the position of the piston we have to find <code>Yc</code>, <code>x</code>, and <code>Yp</code>. That will also allow us to find the angle <code>ϴ</code>. </p>

<p>First we need to find the position of the pivot. Fortunately we can use the built-in function <strong>toComp</strong>. That will return the absolute position of the <strong>pivot</strong> null. If we subtract the position of the crank we're left with <code>[x, Yc]</code>.</p>

<p>Since we know the length of the piston—<code>p</code> in the diagram above—and the value of <code>x</code>, we can use Pythagoras' theorem to find <code>Yp</code>, because <code>x² + Yp² = P²</code>, then it follows <code>Yp = sqrt(P² - x²)</code>.</p>

<p>Putting it all together, plus some offsets to keep the piston lined up with the crank, we get this for the position expression on the piston arm:</p>

<pre><code>var PistonLength = 200; //set this to whatever length your piston is
var crankPos = thisComp.layer("crank").transform.position;
var pivot = thisComp.layer("pivot").toComp(thisComp.layer("pivot").transform.anchorPoint, t = time) - crankPos;
var y = Math.sqrt(Math.pow(PistonLength,2) - Math.pow(pivot[0], 2));
crankPos + [0, pivot[1] - y]
</code></pre>

<p>Once we have the lengths of the sides of the triangle we can find the angle using trigonometry. We know that <code>sin ϴ = x / P</code> so <code>ϴ = asin(x / P)</code>. Here's the expression:</p>

<pre><code>var pistonLength = 200;
var crankPos = thisComp.layer("crank").transform.position;
var pivot = crankPos - thisComp.layer("pivot").toComp(thisComp.layer("pivot").transform.anchorPoint, t = time);
theta = Math.asin(pivot[0]/pistonLength);
radiansToDegrees(theta)
</code></pre>

<p>So in the diagram above these expressions are applied to the green solid on the position and rotation properties respectively.</p>

<p>The blue solid just has to line up with the green piston, but you don't want to parent it, or it will inherit the rotation. So just put this simple expression on its position property (obviously with all these expressions you need to change the names of the layers to match (or change your layer names):</p>

<pre><code>thisComp.layer("piston arm").transform.position
</code></pre>

<p>Here's a screenshot of the comp, with all the expressions in place.</p>

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

CC BY-SA 3.0
2017-09-15T11:19:49.147Z
if it's not uncomfortable, could you create a GIF animate using my images in your solution?
JPeter
CC BY-SA 3.0
2017-09-16T13:41:48.367Z
Sure. Let me know where to send the invoice.
stib
CC BY-SA 3.0
2017-09-15T09:30:57.677Z
2017-09-15T09:36:02.507Z
2017-09-15T09:36:02.507Z
stib
<p>I'm trying to create an animation of a slider-crank mechanism system in After Effects, but I'm finding it difficult to create a move closer to a real simulation.</p>

<p><strong>Would anyone have an idea how I should proceed?</strong></p>

<p>The link below shows what I'm trying to get:</p>

<p><a href="https://sites.esm.psu.edu/courses/emch12/IntDyn/activities/kinematics/slider-crank1" rel="nofollow noreferrer">Slider-crank Mechanism System</a></p>

<p>This was my attempt, but it's getting very strange:</p>

<p><a href="https://i.sstatic.net/gqgsx.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/gqgsx.gif" alt="Animation"></a></p>

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

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

<after-effects><after-effects-expressions>
Create an animation of a slider-crank mechanism system
LCarvalho
# Create an animation of a slider-crank mechanism system

(Asked by: username_0 on 2017-09-14)

I'm trying to create an animation of a slider-crank mechanism system in After Effects, but I'm finding it difficult to create a move closer to a real simulation.

**Would anyone have an idea how I should proceed?**

The link below shows what I'm trying to get:

[Slider-crank Mechanism System](https://sites.esm.psu.edu/courses/emch12/IntDyn/activities/kinematics/slider-crank1)

This was my attempt, but it's getting very strange:

[![Animation](https://i.sstatic.net/gqgsx.gif)](https://i.sstatic.net/gqgsx.gif)

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

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

**Tags:** after-effects, after-effects-expressions


---

## 1 answers

### Answer by username_1 on 2017-09-15. Score: 2 | Accepted answer

The setup is reasonably simple, built in functions, trigonometry and some Pythagoras will get you there. Have a look at the diagram below:

The orange solid is the crank, with its anchor point shown at the bottom. Its rotation drives the whole thing (you could drive it from the piston, but this is probably easier(?)). In your diagram the crank isn't shown, so you can just use a solid, and make it a guide layer. Attached to the crank is a null called pivot, lined up to the where the crank and piston are attached to each other, with the crank as its parent. I use that to save myself a little bit of maths, The green solid is the piston, its anchor point is at the top, lined up with the blue solid.
Now to find the position of the piston we have to find Yc, x, and Yp. That will also allow us to find the angle ϴ. 
First we need to find the position of the pivot. Fortunately we can use the built-in function toComp. That will return the absolute position of the pivot null. If we subtract the position of the crank we're left with [x, Yc].
Since we know the length of the piston—p in the diagram above—and the value of x, we can use Pythagoras' theorem to find Yp, because x² + Yp² = P², then it follows Yp = sqrt(P² - x²).
Putting it all together, plus some offsets to keep the piston lined up with the crank, we get this for the position expression on the piston arm:
var PistonLength = 200; //set this to whatever length your piston is
var crankPos = thisComp.layer("crank").transform.position;
var pivot = thisComp.layer("pivot").toComp(thisComp.layer("pivot").transform.anchorPoint, t = time) - crankPos;
var y = Math.sqrt(Math.pow(PistonLength,2) - Math.pow(pivot[0], 2));
crankPos + [0, pivot[1] - y]

Once we have the lengths of the sides of the triangle we can find the angle using trigonometry. We know that sin ϴ = x / P so ϴ = asin(x / P). Here's the expression:
var pistonLength = 200;
var crankPos = thisComp.layer("crank").transform.position;
var pivot = crankPos - thisComp.layer("pivot").toComp(thisComp.layer("pivot").transform.anchorPoint, t = time);
theta = Math.asin(pivot[0]/pistonLength);
radiansToDegrees(theta)

So in the diagram above these expressions are applied to the green solid on the position and rotation properties respectively.
The blue solid just has to line up with the green piston, but you don't want to parent it, or it will inherit the rotation. So just put this simple expression on its position property (obviously with all these expressions you need to change the names of the layers to match (or change your layer names):
thisComp.layer("piston arm").transform.position

Here's a screenshot of the comp, with all the expressions in place.

> **Comments:**
> **username_2**: if it's not uncomfortable, could you create a GIF animate using my images in your solution?  
> **username_1**: Sure. Let me know where to send the invoice.  

---

