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