Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-15T11:19:49.147Z
Answers.Text: if it's not uncomfortable, could you create a GIF animate using my images in your solution?
Answers.UserDisplayName: JPeter
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-16T13:41:48.367Z
Answers.Text: Sure. Let me know where to send the invoice.
Answers.UserDisplayName: stib
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-15T09:30:57.677Z
Answers.LastActivityDate: 2017-09-15T09:36:02.507Z
Answers.LastEditDate: 2017-09-15T09:36:02.507Z
Answers.UserDisplayName: stib
Body: <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>
  
Tags: <after-effects><after-effects-expressions>
Title: Create an animation of a slider-crank mechanism system
UserDisplayName: LCarvalho
ThreadText: # 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:
  
  [![enter image description here](https://i.sstatic.net/FdFmY.png)](https://i.sstatic.net/FdFmY.png)
  
  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.
  
  [![enter image description here](https://i.sstatic.net/Q4REl.png)](https://i.sstatic.net/Q4REl.png)
  
  > **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.  
  
  ---
  
  