diff options
Diffstat (limited to '2d/softbody/softbody_1.html.content')
| -rw-r--r-- | 2d/softbody/softbody_1.html.content | 92 |
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> |