Add animation

1 files changed, 98 insertions, 56 deletions

diff --git a/28x30-90⁰.svg b/28x30-90⁰.svg
index b2a7ea0..aa56506 100644
--- a/28x30-90⁰.svg
+++ b/28x30-90⁰.svg
@@ -19,86 +19,124 @@
   <script
      type="text/ecmascript"
      id="showMergeScript">
-
     // How long to sleep between steps
     var delta_time = 25;
 
-    //  Distances and angles needed for the transformation
-    var height;          // the height of the isolation
-    var r_angle_max;     // the maximum angle to rotate the isolation
-    var r_upper_left_x;
-    var r_upper_left_y;
-    var l_upper_left_y;
-
     // Tracking the transformation progress
-    var l_y_off = 0;
+    var m_angle = 0;
     var r_angle = 0;
+    var r_y_off = 0;
+    var r_rot_trans;
 
     // Paths representing the left and right half of the isolation
-    var l_iso, r_iso;
-    // used to pass along the rotation transformation
-    var r_rot_trans;
+    var l_iso, m_iso, r_iso;
+
+    var m_angle_max = -45;
+    var m_lower_left_x;
+    var m_lower_left_y;
+
+    var r_angle_max = -90;
+    var r_lower_left_x;
+    var r_lower_left_y;
 
     function Start(evt) {
 
       r_iso = evt.target.ownerDocument.getElementById(&quot;rightIso&quot;);
+      m_iso = evt.target.ownerDocument.getElementById(&quot;middleIso&quot;);
       l_iso = evt.target.ownerDocument.getElementById(&quot;leftIso&quot;);
 
       getDists();
-
-      rotateUp();
+      rotateMiddle();
     }
 
     // Get the distances we need to move objects from the paths
     function getDists() {
-        // The heigt of the isolation, since this is a 90⁰ angle it's also
-        // the distance from the &quot;midth line&quot; of the cut to the
-        //  &quot;0&quot; on the x-Axis
-        height = 336.625;
-	// We rotate about the left upper point of the right part
-	r_upper_left_x = 868.125;
-	r_upper_left_y = l_upper_left_y = 230.3125;
-	r_angle_max = -90;
+      var segments = m_iso.pathSegList;
+
+      for (var i=0,len = segments.numberOfItems;i &lt; len; ++i) {
+        var pathSeg = segments.getItem(i);
+        switch(pathSeg.pathSegType) {
+          case SVGPathSeg.PATHSEG_MOVETO_ABS:
+            m_lower_left_x = pathSeg.x;
+            m_lower_left_y = pathSeg.y;
+            break;
+	  case SVGPathSeg.PATHSEG_LINETO_ABS:
+	    if (pathSeg.y &gt; m_lower_left_y) {
+              m_lower_left_y = pathSeg.y;
+	    }
+	    if (pathSeg.x &lt; m_lower_left_x) {
+              m_lower_left_x = pathSeg.x;
+	    }
+	    break;
+          }
+      }
+
+      segments = r_iso.pathSegList;
+      for (var i=0,len = segments.numberOfItems;i &lt; len; ++i) {
+        var pathSeg = segments.getItem(i);
+        switch(pathSeg.pathSegType) {
+          case SVGPathSeg.PATHSEG_MOVETO_ABS:
+            r_lower_left_x = pathSeg.x;
+            r_lower_left_y = pathSeg.y;
+            break;
+	  case SVGPathSeg.PATHSEG_LINETO_ABS:
+	    if (pathSeg.y &gt; r_lower_left_y) {
+              r_lower_left_y = pathSeg.y;
+	    }
+	    if (pathSeg.x &lt; r_lower_left_x) {
+              r_lower_left_x = pathSeg.x;
+	    }
+	    break;
+          }
+      }
+    }
+
+    // First rotate the middle part
+    function rotateMiddle() {
+      if (m_angle  &gt; m_angle_max) {
+          m_angle -= 2;
+	  if (m_angle &lt; m_angle_max) m_angle = m_angle_max;
+
+	  var trans = &quot;rotate(&quot; + m_angle + &quot;, &quot; + m_lower_left_x + &quot;, &quot; + m_lower_left_y + &quot;)&quot;
+
+          m_iso.setAttribute(&quot;transform&quot;,
+	                     trans);
+	  setTimeout(&quot;rotateMiddle()&quot;,
+                     delta_time);
+      } else {
+          setTimeout(&quot;rotateRight()&quot;, delta_time);
+      }
     }
 
-    // First rotate the right side up
-    function rotateUp() {
+    // then rotate the right part
+    function rotateRight() {
       if (r_angle  &gt; r_angle_max) {
           r_angle -= 2;
-	  r_rot_trans = &quot;rotate(&quot; + r_angle + &quot;, &quot; + r_upper_left_x + &quot;, &quot; + r_upper_left_y + &quot;)&quot;
+	  if (r_angle &lt; r_angle_max) r_angle = r_angle_max;
 
+	  r_rot_trans = &quot;rotate(&quot; + r_angle + &quot;, &quot; + r_lower_left_x + &quot;, &quot; + r_lower_left_y + &quot;)&quot;
           r_iso.setAttribute(&quot;transform&quot;,
 	                     r_rot_trans);
-	  setTimeout(&quot;rotateUp()&quot;,
+	  setTimeout(&quot;rotateRight()&quot;,
                      delta_time);
       } else {
-          setTimeout(&quot;flip()&quot;, delta_time);
+          setTimeout(&quot;moveRight()&quot;, delta_time);
       }
     }
 
-    // Flip the left end
-    function flip() {
-        var delta = -1 * (l_upper_left_y + height);
-	var l_flip_trans = &quot;translate(0, &quot; + l_upper_left_y + &quot;) scale(1, -1) translate( 0, &quot; + delta + &quot; )&quot;
-
-        l_iso.setAttribute(&quot;transform&quot;,
-	                   l_flip_trans);
-        setTimeout(&quot;moveLeft()&quot;, delta_time);
-    }
-
     // Move pieces together
-    function moveLeft() {
-        l_y_off_max = -height;
+    function moveRight() {
+        r_y_off_max = -80;
 
-        if (l_y_off &gt; l_y_off_max) {
-          l_y_off -= 5;
-	  if (l_y_off &lt; l_y_off_max) l_y_off = l_y_off_max;
-          trans = r_rot_trans + &quot; translate(0.0, &quot; + l_y_off + &quot;)&quot;
+        if (r_y_off &gt; r_y_off_max) {
+          r_y_off -= 5;
+	  if (r_y_off &lt; r_y_off_max) r_y_off = r_y_off_max;
+          trans = r_rot_trans + &quot; translate(&quot; + 2.35 * -r_y_off + &quot;, &quot; + r_y_off + &quot;)&quot;
 
           r_iso.setAttribute(&quot;transform&quot;, trans);
-	  setTimeout(&quot;moveLeft()&quot;, delta_time);
-      }
-    }
+	  setTimeout(&quot;moveRight()&quot;, delta_time);
+	}
+     }
    </script>
   <sodipodi:namedview
      id="base"
@@ -107,9 +145,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="6.278452"
-     inkscape:cx="461.61414"
-     inkscape:cy="179.42309"
+     inkscape:zoom="1.569613"
+     inkscape:cx="694.57114"
+     inkscape:cy="247.15905"
      inkscape:document-units="cm"
      inkscape:current-layer="layer3"
      showgrid="true"
@@ -369,7 +407,8 @@
     <path
        style="color:#000000;fill:#284550;fill-opacity:0.28627452;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        d="M 106.3125 262.21875 L 106.3125 566.9375 L 389.3125 566.9375 L 262.875 262.21875 L 106.3125 262.21875 z "
-       id="rect3067" />
+       id="leftIso"
+       inkscape:label="#rect3067" />
     <path
        style="fill:none;stroke:#000000;stroke-width:0.99212598;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        d="M 213.22716,141.47086 389.76378,566.92913 566.92913,141.73228"
@@ -378,9 +417,10 @@
        sodipodi:nodetypes="ccc" />
     <path
        inkscape:connector-curvature="0"
-       style="color:#000000;fill:#284550;fill-opacity:0.28627452;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       d="m 939.42913,262.21875 0,304.71875 -283,0 126.4375,-304.71875 156.5625,0 z"
-       id="rect3067-0" />
+       style="color:#000000;fill:#284550;fill-opacity:0.28627451;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 939.42913,262.21875 939.42913,566.9375 656.42913,566.9375 782.86663,262.21875 939.42913,262.21875 z"
+       id="rightIso"
+       inkscape:label="#rect3067-0" />
     <path
        style="fill:none;stroke:#000000;stroke-width:0.99212598;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"
        d="M 832.6432,142.23228 656.10658,567.69055 478.8125,141.73228"
@@ -388,9 +428,11 @@
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccc" />
     <path
-       style="color:#000000;fill:#284550;fill-opacity:0.28627452;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       d="M 514.25 262.21875 L 514.25 268.3125 L 389.9375 566.9375 L 514.25 566.9375 L 531.5 566.9375 L 655.8125 566.9375 L 531.5 268.3125 L 531.5 262.21875 L 528.96875 262.21875 L 516.78125 262.21875 L 514.25 262.21875 z "
-       id="rect3153" />
+       style="color:#000000;fill:#284550;fill-opacity:0.28627451;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 514.25,262.21875 514.25,268.3125 389.9375,566.9375 514.25,566.9375 531.5,566.9375 655.8125,566.9375 531.5,268.3125 531.5,262.21875 528.96875,262.21875 516.78125,262.21875 514.25,262.21875 z"
+       id="middleIso"
+       inkscape:label="#rect3153"
+       inkscape:connector-curvature="0" />
     <text
        sodipodi:linespacing="125%"
        id="text3811-8"