From f8614f0f3bc09b0f618fd76c61d4a933422fddf1 Mon Sep 17 00:00:00 2001
From: agyao2 <agyao2@illinois.edu>
Date: Tue, 30 Sep 2025 23:41:08 -0500
Subject: [PATCH 1/2] Slider cranks

Adds blurb about slider cranks and makes callout cards taking users between statics and dyn
---
 .../Slider_Crank_animation.svg                | 152 ++++++++++++++++++
 .../Slider_Crank_animation.svg                | 152 ++++++++++++++++++
 src/pages/dyn/multi_body_systems.astro        |  27 +++-
 src/pages/sta/reaction_forces.astro           |   9 ++
 4 files changed, 339 insertions(+), 1 deletion(-)
 create mode 100644 public/dyn/multi_body_systems/Slider_Crank_animation.svg
 create mode 100644 public/sta/reaction_forces/Slider_Crank_animation.svg

diff --git a/public/dyn/multi_body_systems/Slider_Crank_animation.svg b/public/dyn/multi_body_systems/Slider_Crank_animation.svg
new file mode 100644
index 000000000..d2aba650a
--- /dev/null
+++ b/public/dyn/multi_body_systems/Slider_Crank_animation.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+  <svg version="1.1"
+    baseProfile="full"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:ev="http://www.w3.org/2001/xml-events"
+    width="1100"
+    height="600">
+
+  <title>  Slider-Crank </title>
+
+  <defs>
+    <rect
+                id="Slidebar"
+      stroke-width="1"
+            stroke="black"
+              fill="silver"
+      fill-opacity="1"
+                 x="0"
+                 y="-12"
+             width="300"
+            height="24"
+    />
+    <g id="Crosshead" stroke-width="1" stroke="black" fill-opacity="1">
+      <rect
+           fill="gold"
+              x="-50"
+              y="-25"
+          width="100"
+         height="50"
+      />
+      <circle cx="0" cy="0" r="15" fill="white"/>
+    </g>
+    <g id="Crank" stroke-width="1" stroke="black" fill-opacity="1">
+      <path fill="silver"
+             d="M -99.959 40.000
+                A  40  40 0 0 1 -99.959, -40.000
+                A 450 450 0 0 0  -9.950, -49.000
+                A  50  50 0 1 1  -9.950,  49.000
+                A 450 450 0 0 0 -99.959,  40.000
+                z"/>
+      <circle cx="-100" cy="0" r="25" fill="white"/>
+      <circle cx="0"    cy="0" r="30" fill="lightgrey"/>
+    </g>
+    <g id="ConRod" stroke-width="1" stroke="black" fill-opacity="0.7">
+      <path fill="silver"
+             d="M  12.387  21.715
+                A 30 30 0 0 1  27.551  17.776
+                L 453.475  22.035
+                A 30 30 0 0 1 473.243  29.733
+                A 40 40 0 0 1 473.243 -29.733
+                A 30 30 0 0 1 453.475 -22.035
+                L  27.551 -17.776
+                A 30 30 0 0 1 12.387  -21.715
+                A 25 25 0 0 1 12.387   21.715
+                z"/>
+      <circle cx="0"   cy="0" r="25" fill="silver"/>
+      <circle cx="0"   cy="0" r="15" fill="white"/>
+      <circle cx="500" cy="0" r="40" fill="silver"/>
+      <circle cx="500" cy="0" r="25" fill="white"/>
+    </g>
+
+  </defs>
+
+  <use xlink:href="#Slidebar"  x="150" y="263"/>
+  <use xlink:href="#Slidebar"  x="150" y="337"/>
+  <use xlink:href="#Crosshead" x="200" y="300">
+    <animate
+      attributeName="x"
+            dur="3s"
+            values="  200.000;
+                      207.202;
+                      227.545;
+                      257.557;
+                      292.430;
+                      327.159;
+                      357.557;
+                      380.753;
+                      395.140;
+                      400.000;
+                      395.140;
+                      380.753;
+                      357.557;
+                      327.159;
+                      292.430;
+                      257.557;
+                      227.545;
+                      207.202;
+                      200.000"
+        repeatCount="indefinite"/>
+  </use>
+
+  <use xlink:href="#Crank" x="800" y="300">
+    <animateTransform
+      attributeName="transform" type="rotate" from="0,800,300"
+         by="360" dur="3s" repeatCount="indefinite"/>
+  </use>
+  <use xlink:href="#ConRod" x="200" y="300">
+    <animate
+      attributeName="x"
+            dur="3s"
+            values="  200.000;
+                      207.202;
+                      227.545;
+                      257.557;
+                      292.430;
+                      327.159;
+                      357.557;
+                      380.753;
+                      395.140;
+                      400.000;
+                      395.140;
+                      380.753;
+                      357.557;
+                      327.159;
+                      292.430;
+                      257.557;
+                      227.545;
+                      207.202;
+                      200.000"
+
+        repeatCount="indefinite"/>
+    <animateTransform
+      attributeName="transform" type="rotate" from="0,200,300"
+         repeatCount="indefinite" dur="3s"
+         values="  0.000, 200.000, 300;
+                  -3.922, 207.202, 300;
+                  -7.386, 227.545, 300;
+                  -9.974, 257.557, 300;
+                 -11.359, 292.430, 300;
+                 -11.359, 327.159, 300;
+                  -9.974, 357.557, 300;
+                  -7.386, 380.753, 300;
+                  -3.922, 395.140, 300;
+                   0.000, 400.000, 300;
+                   3.922, 395.140, 300;
+                   7.386, 380.753, 300;
+                   9.974, 357.557, 300;
+                  11.359, 327.159, 300;
+                  11.359, 292.430, 300;
+                   9.974, 257.557, 300;
+                   7.386, 227.545, 300;
+                   3.922, 207.202, 300;
+                   0.000, 200.000, 300"/>
+  </use>
+
+</svg>
+
+
+
diff --git a/public/sta/reaction_forces/Slider_Crank_animation.svg b/public/sta/reaction_forces/Slider_Crank_animation.svg
new file mode 100644
index 000000000..d2aba650a
--- /dev/null
+++ b/public/sta/reaction_forces/Slider_Crank_animation.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+  <svg version="1.1"
+    baseProfile="full"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:ev="http://www.w3.org/2001/xml-events"
+    width="1100"
+    height="600">
+
+  <title>  Slider-Crank </title>
+
+  <defs>
+    <rect
+                id="Slidebar"
+      stroke-width="1"
+            stroke="black"
+              fill="silver"
+      fill-opacity="1"
+                 x="0"
+                 y="-12"
+             width="300"
+            height="24"
+    />
+    <g id="Crosshead" stroke-width="1" stroke="black" fill-opacity="1">
+      <rect
+           fill="gold"
+              x="-50"
+              y="-25"
+          width="100"
+         height="50"
+      />
+      <circle cx="0" cy="0" r="15" fill="white"/>
+    </g>
+    <g id="Crank" stroke-width="1" stroke="black" fill-opacity="1">
+      <path fill="silver"
+             d="M -99.959 40.000
+                A  40  40 0 0 1 -99.959, -40.000
+                A 450 450 0 0 0  -9.950, -49.000
+                A  50  50 0 1 1  -9.950,  49.000
+                A 450 450 0 0 0 -99.959,  40.000
+                z"/>
+      <circle cx="-100" cy="0" r="25" fill="white"/>
+      <circle cx="0"    cy="0" r="30" fill="lightgrey"/>
+    </g>
+    <g id="ConRod" stroke-width="1" stroke="black" fill-opacity="0.7">
+      <path fill="silver"
+             d="M  12.387  21.715
+                A 30 30 0 0 1  27.551  17.776
+                L 453.475  22.035
+                A 30 30 0 0 1 473.243  29.733
+                A 40 40 0 0 1 473.243 -29.733
+                A 30 30 0 0 1 453.475 -22.035
+                L  27.551 -17.776
+                A 30 30 0 0 1 12.387  -21.715
+                A 25 25 0 0 1 12.387   21.715
+                z"/>
+      <circle cx="0"   cy="0" r="25" fill="silver"/>
+      <circle cx="0"   cy="0" r="15" fill="white"/>
+      <circle cx="500" cy="0" r="40" fill="silver"/>
+      <circle cx="500" cy="0" r="25" fill="white"/>
+    </g>
+
+  </defs>
+
+  <use xlink:href="#Slidebar"  x="150" y="263"/>
+  <use xlink:href="#Slidebar"  x="150" y="337"/>
+  <use xlink:href="#Crosshead" x="200" y="300">
+    <animate
+      attributeName="x"
+            dur="3s"
+            values="  200.000;
+                      207.202;
+                      227.545;
+                      257.557;
+                      292.430;
+                      327.159;
+                      357.557;
+                      380.753;
+                      395.140;
+                      400.000;
+                      395.140;
+                      380.753;
+                      357.557;
+                      327.159;
+                      292.430;
+                      257.557;
+                      227.545;
+                      207.202;
+                      200.000"
+        repeatCount="indefinite"/>
+  </use>
+
+  <use xlink:href="#Crank" x="800" y="300">
+    <animateTransform
+      attributeName="transform" type="rotate" from="0,800,300"
+         by="360" dur="3s" repeatCount="indefinite"/>
+  </use>
+  <use xlink:href="#ConRod" x="200" y="300">
+    <animate
+      attributeName="x"
+            dur="3s"
+            values="  200.000;
+                      207.202;
+                      227.545;
+                      257.557;
+                      292.430;
+                      327.159;
+                      357.557;
+                      380.753;
+                      395.140;
+                      400.000;
+                      395.140;
+                      380.753;
+                      357.557;
+                      327.159;
+                      292.430;
+                      257.557;
+                      227.545;
+                      207.202;
+                      200.000"
+
+        repeatCount="indefinite"/>
+    <animateTransform
+      attributeName="transform" type="rotate" from="0,200,300"
+         repeatCount="indefinite" dur="3s"
+         values="  0.000, 200.000, 300;
+                  -3.922, 207.202, 300;
+                  -7.386, 227.545, 300;
+                  -9.974, 257.557, 300;
+                 -11.359, 292.430, 300;
+                 -11.359, 327.159, 300;
+                  -9.974, 357.557, 300;
+                  -7.386, 380.753, 300;
+                  -3.922, 395.140, 300;
+                   0.000, 400.000, 300;
+                   3.922, 395.140, 300;
+                   7.386, 380.753, 300;
+                   9.974, 357.557, 300;
+                  11.359, 327.159, 300;
+                  11.359, 292.430, 300;
+                   9.974, 257.557, 300;
+                   7.386, 227.545, 300;
+                   3.922, 207.202, 300;
+                   0.000, 200.000, 300"/>
+  </use>
+
+</svg>
+
+
+
diff --git a/src/pages/dyn/multi_body_systems.astro b/src/pages/dyn/multi_body_systems.astro
index b69a4a31d..9e0ab642b 100644
--- a/src/pages/dyn/multi_body_systems.astro
+++ b/src/pages/dyn/multi_body_systems.astro
@@ -117,7 +117,32 @@ import DisplayTable from "../../components/DisplayTable.astro"
 
 <SubSubSection title = "Gear kinetics"  id = "gear_kinetics"/>
 
-<SubSection title = "Slider cranks"  id = "slider_cranks"/>
+<SubSection title = "Slider cranks"  id = "slider_cranks">
+  <Image src = "/dyn/multi_body_systems/Slider_Crank_animation.svg" width = "7">Image from <a target = "_blank" rel = "noopener noreferrer" href = "https://commons.wikimedia.org/wiki/File:Slider_Crank_animation.svg">Wikimedia.</a> CC BY 2.0</Image>
+  <p>
+    A slider crank mechanism is a common mechanical system that converts rotational motion into linear motion.
+    It consists of a crank, a connecting rod, and a slider.
+    The crank rotates about a fixed axis, the connecting rod connects the crank to the slider, and the slider moves linearly along a guide or track.
+  </p>
+  <p>
+    Here are some things to keep in mind when solving problems involving slider-crank mechanisms:
+  </p>
+  <ul>
+        <li>Velocity is tangential to the path of the slider.</li>
+        <li>Acceleration is tangential to the path of the slider.</li>
+				<li>There is a reaction force normal to the path of the slider.</li>
+    </ul>
+  <CalloutContainer slot = "cards">
+    <CalloutCard title = "Review?">
+      <p>
+        Need a review of <strong>types of connections?</strong>
+      </p>
+      <p>
+        This content has also been in <a href = "/sta/reaction_forces#types_of_connections">statics.</a>
+      </p>
+    </CalloutCard>
+  </CalloutContainer>
+</SubSection>
 
 </Layout>
 
diff --git a/src/pages/sta/reaction_forces.astro b/src/pages/sta/reaction_forces.astro
index 38e120f44..bc04a3eaa 100644
--- a/src/pages/sta/reaction_forces.astro
+++ b/src/pages/sta/reaction_forces.astro
@@ -69,6 +69,15 @@ A roller support only constrains movement in the y-direction, and thus only has
 			You can learn more about the Krannert Center for the Performing Arts <a target = "_blank" rel = "noopener noreferrer" href = "https://krannertcenter.com/events/krannert-center-tours">here.</a>
 		</p>
 	</CalloutCard>
+	<CalloutCard title = "Heads up!">
+		<p>
+			<strong><a href = "/dyn/multi_body_systems#slider_cranks">Slider cranks</a></strong> builds on this content in dynamics.
+		</p>
+		<Image src = '/dyn/multi_body_systems/Slider_Crank_animation.svg' width = '7'>Image from <a target = "_blank" rel = "noopener noreferrer" href = "https://commons.wikimedia.org/wiki/File:Slider_Crank_animation.svg">Wikimedia.</a> CC BY 2.0</Image>
+		<p>
+			The slider component of a slider crank mechanism has a reaction force like the "Roller/pin in confined slot" connection shown to the left.
+		</p>
+	</CalloutCard>
 </CalloutContainer>
 
 </SubSection>

From 6df28bc5b47bb29ed455b509d7443f12df76f7f6 Mon Sep 17 00:00:00 2001
From: agyao2 <agyao2@illinois.edu>
Date: Wed, 1 Oct 2025 20:46:40 -0500
Subject: [PATCH 2/2] Conditions clarifications

Clarifies the conditions of a slider crank
---
 src/pages/dyn/multi_body_systems.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/dyn/multi_body_systems.astro b/src/pages/dyn/multi_body_systems.astro
index 9e0ab642b..2e628bd0b 100644
--- a/src/pages/dyn/multi_body_systems.astro
+++ b/src/pages/dyn/multi_body_systems.astro
@@ -128,9 +128,9 @@ import DisplayTable from "../../components/DisplayTable.astro"
     Here are some things to keep in mind when solving problems involving slider-crank mechanisms:
   </p>
   <ul>
-        <li>Velocity is tangential to the path of the slider.</li>
-        <li>Acceleration is tangential to the path of the slider.</li>
-				<li>There is a reaction force normal to the path of the slider.</li>
+        <li>The velocity of the slider is purely tangential to the path of the slider.</li>
+        <li>The acceleration of the slider is purely tangential to the path of the slider.</li>
+				<li>The slider has a reaction force normal to the path of the slider.</li>
     </ul>
   <CalloutContainer slot = "cards">
     <CalloutCard title = "Review?">
@@ -146,4 +146,4 @@ import DisplayTable from "../../components/DisplayTable.astro"
 
 </Layout>
 
-<script src="/dyn/multi_body_systems/canvases.js" is:inline></script>
\ No newline at end of file
+<script src="/dyn/multi_body_systems/canvases.js" is:inline></script>