Added controls for damped motion

1 files changed, 79 insertions, 27 deletions

diff --git a/2d/softbody/softbody_1.html b/2d/softbody/softbody_1.html
index 12ee272..3f0fc40 100644
--- a/2d/softbody/softbody_1.html
+++ b/2d/softbody/softbody_1.html
@@ -78,10 +78,15 @@
 
       addButtonListener('gl_canvas_play_undamped', 'gl_canvas_stop_undamped', [
           document.getElementById('undamped_spring_length'),
-          document.getElementById('undamped_start_position')
+          document.getElementById('undamped_start_position'),
+		  document.getElementById('undamped_spring_constant'),
+          document.getElementById('undamped_spring_mass')
       ]);
       addButtonListener('gl_canvas_play_damped', 'gl_canvas_stop_damped', [
-
+		  document.getElementById('damped_spring_length'),
+          document.getElementById('damped_start_position'),
+		  document.getElementById('damped_spring_constant'),
+          document.getElementById('damped_spring_mass')
       ]);
 
       // -- Slider logic
@@ -108,40 +113,64 @@
               Undamped_SetDisplacement = Module.cwrap('Undamped_SetDisplacement', 'void', ['number']),
               Undamped_SetK = Module.cwrap('Undamped_SetK', 'void', ['number']),
               Undamped_SetMass = Module.cwrap('Undamped_SetMass', 'void', ['number']),
-              lengthSlider = document.getElementById('undamped_spring_length'),
-              displacementSlider = document.getElementById('undamped_start_position'),
-              kSlider = document.getElementById('undamped_spring_constant'),
-              massSlider = document.getElementById('undamped_spring_mass'),
-              setLength = function(value) {
+
+			  Damped_SetLength = Module.cwrap('Damped_SetLength', 'void', ['number']),
+              Damped_SetDisplacement = Module.cwrap('Damped_SetDisplacement', 'void', ['number']),
+              Damped_SetK = Module.cwrap('Damped_SetK', 'void', ['number']),
+              Damped_SetMass = Module.cwrap('Damped_SetMass', 'void', ['number']),
+			  
+              Undamped_lengthSlider = document.getElementById('undamped_spring_length'),
+              Undamped_displacementSlider = document.getElementById('undamped_start_position'),
+              Undamped_kSlider = document.getElementById('undamped_spring_constant'),
+              Undamped_massSlider = document.getElementById('undamped_spring_mass'),
+
+			  Damped_lengthSlider = document.getElementById('damped_spring_length'),
+              Damped_displacementSlider = document.getElementById('damped_start_position'),
+              Damped_kSlider = document.getElementById('damped_spring_constant'),
+              Damped_massSlider = document.getElementById('damped_spring_mass'),
+			  
+              undampedSetLength = function(value) {
                   value = Number(value);
                   Undamped_SetLength(value);
 
-                  var currentDisplacementValue = displacementSlider.value;
-                  var bound = value / 2.0;
-                  displacementSlider.setAttribute('max', bound);
-                  displacementSlider.setAttribute('min', -bound);
+                  var currentDisplacementValue = Undamped_displacementSlider.value;
+                  var bound = value;
+                  Undamped_displacementSlider.setAttribute('max', bound);
+                  Undamped_displacementSlider.setAttribute('min', -bound);
 
                   if (currentDisplacementValue < -bound) currentDisplacementValue = -bound;
                   else if (currentDisplacementValue > bound) currentDisplacementValue = bound;
 
                   var event = new Event('change');  
-                  displacementSlider.value = currentDisplacementValue;
-                  displacementSlider.dispatchEvent(event);
-              },
-              setDisplacement = function(value) {
-                  Undamped_SetDisplacement(value);
+                  Undamped_displacementSlider.value = currentDisplacementValue;
+                  Undamped_displacementSlider.dispatchEvent(event);
               },
-              setK = function(value) {
-                  Undamped_SetK(value);
-              },
-              setMass = function(mass) {
-                  Undamped_SetMass(mass);
+			  dampedSetLength = function(value) {
+                  value = Number(value);
+                  Damped_SetLength(value);
+
+                  var currentDisplacementValue = Damped_displacementSlider.value;
+                  var bound = value;
+                  Damped_displacementSlider.setAttribute('max', bound);
+                  Damped_displacementSlider.setAttribute('min', -bound);
+
+                  if (currentDisplacementValue < -bound) currentDisplacementValue = -bound;
+                  else if (currentDisplacementValue > bound) currentDisplacementValue = bound;
+
+                  var event = new Event('change');  
+                  Damped_displacementSlider.value = currentDisplacementValue;
+                  Damped_displacementSlider.dispatchEvent(event);
               };
 
-          lengthSlider.addEventListener('change', function(event) { setLength(Number(event.target.value)); });
-          displacementSlider.addEventListener('change', function(event) { setDisplacement(Number(event.target.value)); });
-          kSlider.addEventListener('change', function(event) { setK(Number(event.target.value)); });
-          massSlider.addEventListener('change', function(event) { setMass(Number(event.target.value)); });
+          Undamped_lengthSlider.addEventListener('change', function(event) { undampedSetLength(Number(event.target.value)); });
+          Undamped_displacementSlider.addEventListener('change', function(event) { Undamped_SetDisplacement(Number(event.target.value)); });
+          Undamped_kSlider.addEventListener('change', function(event) { Undamped_SetK(Number(event.target.value)); });
+          Undamped_massSlider.addEventListener('change', function(event) { Undamped_SetMass(Number(event.target.value)); });
+
+		  Damped_lengthSlider.addEventListener('change', function(event) { dampedSetLength(Number(event.target.value)); });
+          Damped_displacementSlider.addEventListener('change', function(event) { Damped_SetDisplacement(Number(event.target.value)); });
+          Damped_kSlider.addEventListener('change', function(event) { Damped_SetK(Number(event.target.value)); });
+          Damped_massSlider.addEventListener('change', function(event) { Damped_SetMass(Number(event.target.value)); });
       };
   }
   
@@ -171,13 +200,13 @@
       
       <span class='widget_container'>
         <label for='undamped_start_position'>Start Displacement (m)</label>
-        <input type='range' id='undamped_start_position' min='-75' max='75' value='0'/>
+        <input type='range' id='undamped_start_position' min='-150' max='150' value='0'/>
         <span></span>
       </span>
 
       <span class='widget_container'>
         <label for='undamped_spring_constant'>Spring Constant (N / m)</label>
-        <input type='range' id='undamped_spring_constant' min='0.1' max='5.0' value='1.0' step='0.1'/>
+        <input type='range' id='undamped_spring_constant' min='0.1' max='20.0' value='1.0' step='0.1'/>
         <span></span>
       </span>
 
@@ -204,6 +233,29 @@
 	  Damped Springs
 	</h2>
     <p>
+      <span class='widget_container'>
+        <label for='undamped_spring_length'>Spring Length (m)</label>
+        <input type='range' id='damped_spring_length' min="50" max="300" value="150"/>
+        <span></span>
+      </span>
+      
+      <span class='widget_container'>
+        <label for='undamped_start_position'>Start Displacement (m)</label>
+        <input type='range' id='damped_start_position' min='-150' max='150' value='0'/>
+        <span></span>
+      </span>
+
+      <span class='widget_container'>
+        <label for='undamped_spring_constant'>Spring Constant (N / m)</label>
+        <input type='range' id='damped_spring_constant' min='0.1' max='20.0' value='1.0' step='0.1'/>
+        <span></span>
+      </span>
+
+      <span class='widget_container'>
+        <label for='undamped_spring_mass'>Mass (kg)</label>
+        <input type='range' id='damped_spring_mass' min='0.1' max='10.0' value='1.0' step='0.1'/>
+        <span></span>
+      </span>
       
     </p>
     <div class="opengl_canvas_container">