(mkosarek) Working on undamped and damped

1 files changed, 78 insertions, 14 deletions

diff --git a/2d/softbody/softbody_1.html.content b/2d/softbody/softbody_1.html.content
index 92be361..9e48383 100644
--- a/2d/softbody/softbody_1.html.content
+++ b/2d/softbody/softbody_1.html.content
@@ -1,16 +1,34 @@
 <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>
@@ -28,18 +46,64 @@
   </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" width="800" height="600"></canvas>
-      <button id="gl_canvas_play" class="play_button">
+      <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" class="stop_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_damped" width="800" height="600"></canvas>
+      <button id="gl_canvas_play_damped" class="play_button">
+        Play
+      </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>