commit 9ecf2a1514ac6a11ed35ce3a701ca92a9c806156
parent abac18fd7911e089915e196d36a320f809a8c6a8
Author: Charles Baptista <charles@charlesbaptista.com>
Date: Wed, 24 Jun 2020 23:03:11 -0400
Improved image scaling and overflow
Diffstat:
3 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/fkik.html b/fkik.html
@@ -46,8 +46,8 @@
<p>In the case of Smart Lamp’s arm they look like this:</p>
<p><img src="./imgs/DH_ex_iso-768x524.png" alt="DH_ex_iso" width="600" height="410"/></p>
<p>Once these frames are established each link’s position can be defined relative to the previous link using four parameters:</p>
- <p><b>a</b> – <b>Link Length</b> – Distance from joint (i-1) to (i) on the X<sub>i</sub> axis</p>
- <p><b>α</b>– <b>Link Twist</b> – Angle between Z<sub>i-1</sub> axis and Z<sub>i</sub> axis about the X<sub>i</sub> axis</p>
+ <p><b>a</b>– <b>Link Length</b> – Distance from joint (i-1) to (i) on the X<sub>i</sub> axis</p>
+ <p><b>α</b>– <b>Link Twist</b> – Angle between Z<sub>i-1</sub> axis and Z<sub>i</sub> axis about the X<sub>i</sub> axis</p>
<p><b>d</b>– <b>Link Offset</b> – Distance from joint (i-1) to (i) on the Z<sub>i-1</sub> axis</p>
<p><b>θ</b>– <b>Joint Angle</b> – Angle between X<sub>i-1</sub> axis and X<sub>i</sub> axis about the Z<sub>i-1</sub> axis</p>
<p>Parameters <b>d</b> (Link Offset) and <b>θ</b> (Joint Angle) are the “joint variables” for a link and respectively represent prismatic and revolute actuation. </p>
@@ -55,7 +55,7 @@
<p><img src="./imgs/HT_mat.png" alt="HT_mat" width="600" height="140"/></p>
<p>By multiplying the homogeneous transform matrices together the position of the end effector can be found with respect to the frame of reference associated with any previous link in the kinematic chain.</p>
<p>The last part of my FK system is handling the parallelogram four-bar joints in our arm. This type linkage causes the next link in the chain to rotate as the previous link moves, such that its angle relative to the floor remains fixed. The animations below demonstrate how this behavior differs between a regular joint and a four-bar linkage:</p>
- <p><img src="./imgs/reg_rot.gif" alt="reg_rot" width="300" height="206" /> <img src="./imgs/4bar_rot.gif" alt="4bar_rot" width="300" height="206" /></p>
+ <p><img src="./imgs/reg_rot.gif" width="300" height="206" /> <img src="./imgs/4bar_rot.gif" width="300" height="206" /></p>
<p>To account for this in the FK system, the two four-bar links are flagged and whenever their position is updated they rotate the subsequent link an equal and opposite amount, to match the behavior of the real mechanism.</p>
<p>Solving IK is more complicated. For FK there is only one solution for any configuration of the arm; However for IK there can be multiple, one or no solutions for any desired position of the end-effector. I decided to use a rudimentary method called gradient following, which was acceptable for the scope of this project.</p>
<p>In this example, the arm needs to move from it’s current position at (13.7, 12.4) to a goal position of (8.0, 8.0).
diff --git a/style.css b/style.css
@@ -66,10 +66,16 @@ img {
}
#center_content {
- width: 75%;
+ max-width: 75%;
font-size:14px;
- padding: 0 0 0 20px;
-}
+ padding: 0 20px 0 20px;
+ overflow: hidden;
+}
+
+#center_content img {
+ max-width: 100%;
+ height: auto;
+}
#center_content a {
color: #07E;
diff --git a/tapestry.html b/tapestry.html
@@ -31,11 +31,11 @@
<h3>Tapestry Engine</h3>
<p><img src="./imgs/cropped-screen1.png"/></p>
<p>The Tapestry game engine is a 2D side-scroller engine written in C++ using the <a href="https://www.libsdl.org/" target="_blank">SDL2</a> library. Over the year+ of time I’ve dedicated to the project it’s grown from a window with a couple static images drifting around to a complex and powerful program that features actors, animation, sound, terrain & water physics, actor collisions, level loading, events, and particles among a number of other systems.</p>
- <p><img src="./imgs/screen2-768x344.png" width="485" height="217"/></p>
- <p><img src="./imgs/screen6-300x297.png" width="218" height="216"/></p>
+ <p><img src="./imgs/screen2-768x344.png"/></p>
+ <p><img src="./imgs/screen6-300x297.png"/></p>
<p>Developing this program has been an extremely fun and instructive process. It has presented me with a wide range of unique problems to solve and systems to engineer; from text wrapping and scrolling to writing my own <a href="http://charlesbaptista.com/2016/12/22/red-black-trees/">red-black trees</a> to JSON based level loading. This project continuously pushes my horizons as a programmer and always presents new challenges.</p>
- <p><img src="./imgs/screen6-1-768x432.png" width="699" height="394"/></p>
- <p><img src="./imgs/screen4-768x329.png" width="698" height="298"/></p>
+ <p><img src="./imgs/screen6-1-768x432.png"/></p>
+ <p><img src="./imgs/screen4-768x329.png"/></p>
<p> </p>
<p>All the images shown are screenshots from levels created in the engine. Art assets created by <a href="https://sofiabaptistacrafts.wordpress.com/">Sofia Baptista</a>.</p>
<p> </p>
