summaryrefslogtreecommitdiff
path: root/2d/softbody/softbody_1.html.content
diff options
context:
space:
mode:
Diffstat (limited to '2d/softbody/softbody_1.html.content')
-rw-r--r--2d/softbody/softbody_1.html.content92
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>