(mkosarek) Working on undamped and damped

1 files changed, 87 insertions, 16 deletions

diff --git a/2d/softbody/softbody_1.html b/2d/softbody/softbody_1.html
index b505f1b..f103545 100644
--- a/2d/softbody/softbody_1.html
+++ b/2d/softbody/softbody_1.html
@@ -27,7 +27,7 @@
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
 					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 					<li><label>Softbody</label></li>
-					<li><a title="/2d/softbody/softbody_1.html" href="/2d/softbody/softbody_1.html">Softbody</a></li>
+					<li><a title="/2d/softbody/softbody_1.html" href="/2d/softbody/softbody_1.html">Springs</a></li>
 				</ul>
 			</li>
 			<li>
@@ -54,40 +54,111 @@
 <script src="./softbody_1/dist/output.js"></script>
 <script>
   window.onload = function() {
-      var lPlayElement = document.getElementById('gl_canvas_play'),
-          lStopElement = document.getElementById('gl_canvas_stop');
-      lPlayElement.addEventListener('click', function() {
-          lPlayElement.style.display = 'none';
-          lStopElement.style.display = 'block';
-      });
-      lStopElement.addEventListener('click', function() {
-          lStopElement.style.display = 'none';
-          lPlayElement.style.display = 'block';
-      });
+      function addButtonListener(pPlay, pStop, pDisableElementList) {
+          var lPlayElement = document.getElementById(pPlay),
+              lStopElement = document.getElementById(pStop);
+          lPlayElement.addEventListener('click', function() {
+              lPlayElement.style.display = 'none';
+              lStopElement.style.display = 'block';
+
+              pDisableElementList.forEach(function(element) {
+                  element.disabled = true;
+              });
+          });
+          lStopElement.addEventListener('click', function() {
+              lStopElement.style.display = 'none';
+              lPlayElement.style.display = 'block';
+
+              pDisableElementList.forEach(function(element) {
+                  element.disabled = false;
+              });
+          });
+      }
+
+      addButtonListener('gl_canvas_play_undamped', 'gl_canvas_stop_undamped', [
+          document.getElementById('undamped_spring_length'),
+          document.getElementById('undamped_start_position')
+      ]);
+      addButtonListener('gl_canvas_play_damped', 'gl_canvas_stop_damped', [
+
+      ]);
   }
   
 </script>
 <article>
-  <h1>Softbody</h1>
+  <h1>Springs</h1>
+  <section>
+	<p>
+    It is time to investigate what it means to have a deformation in our physics system. By deformation, I mean that the
+    vertices of our shapes are no longer fixed to one point within the model. We will begin with what I believe
+    by investigating the most common of all deformations: a weight attached to a spring in two dimensions.
+	</p>
+  </section>
   <section>
 	<h2></h2>
   </section>
   <section>
 	<h2>
-	  Live Example
+	  Undamped Springs
+	</h2>
+    <p>
+      <span class='widget_container'>
+        <label for='undamped_spring_length'>Spring Length (m)</label>
+        <input type='range' id='undamped_spring_length'/>
+      </span>
+      
+      <span class='widget_container'>
+        <label for='undamped_start_position'>Start Displacement (m)</label>
+        <input type='range' id='undamped_start_position'/>
+      </span>
+      
+    </p>
+    <div class="opengl_canvas_container">
+      <canvas id="gl_canvas_undamped" width="800" height="600"></canvas>
+      <button id="gl_canvas_play_undamped" class="play_button">
+        Play
+      </button>
+      <button id="gl_canvas_stop_undamped" class="stop_button">
+        Stop
+      </button>
+    </div>
+  </section>
+
+  <section>
+	<h2>
+	  Damped Springs
 	</h2>
     <p>
+      
     </p>
     <div class="opengl_canvas_container">
-      <canvas id="gl_canvas" width="800" height="600"></canvas>
-      <button id="gl_canvas_play" class="play_button">
+      <canvas id="gl_canvas_damped" width="800" height="600"></canvas>
+      <button id="gl_canvas_play_damped" class="play_button">
         Play
       </button>
-      <button id="gl_canvas_stop" class="stop_button">
+      <button id="gl_canvas_stop_damped" class="stop_button">
         Stop
       </button>
     </div>
   </section>
+
+  <footer id='references'>
+    <h2>References</h2>
+    <ul>
+      <li>
+        <a href='https://www.youtube.com/watch?v=Z52emur7Rko'>Wonderful Undamped Resource</a>
+      </li>
+      <li>
+        <a href='https://www.youtube.com/watch?v=CTd1uVq5-l8'>Wonderful Damped Resource</a>
+      </li>
+      <li>
+        <a href='http://ambrsoft.com/CalcPhysics/Spring/SpringData.htm'>List of Equations for Spring Motion</a>
+      </li>
+      <li>
+        <a href='https://www.ryanjuckett.com/damped-springs/'>Ryan Juckett's Explanation of Damped Springs</a>
+      </li>
+    </ul>
+  </footer>
 </article>
 		</main>
 	</body>