added pause button, added midpoint and semi-implicit Euler, added a b…

…unch of other little ui tweaks
jason-s · Sep 29, 2013 · 5d40039 · 5d40039
1 parent f6a4474
commit 5d40039
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 39 deletions.
diff --git a/demos/gravity1/gravity1.css b/demos/gravity1/gravity1.css
@@ -0,0 +1,5 @@
+div#statistics table td {
+    margin: 0px;
+    padding: 0px 30px;
+    font-family: sans-serif;
+}
diff --git a/demos/gravity1/gravity1.html b/demos/gravity1/gravity1.html
@@ -1,11 +1,7 @@
 <html>
 <head>
 <style type="text/css">
-    div#statistics p {
-        font-family: sans-serif;
-        padding: 0;
-        margin: 0;
-    }
+
     form#options {
         width: 640px;
     }
@@ -56,7 +52,7 @@
         if (modkey(event, false)) {  event.preventDefault(true); return false;} });
     function settextvalue(id,value)
     {
-        var s = isNaN(value) ? '---' : (''+value.toFixed(7)); 
+        var s = isNaN(value) ? '---' : (''+value.toFixed(8)); 
         document.getElementById(id).textContent = s;
     }
     function showStatistics(sim)
@@ -77,9 +73,14 @@
     {
         return state.derivCalcRate/gravity1.solvers[gravity1.solvername].n;
     }
+    var paused = false;
+
     setInterval(function() {
-        ++state.tick;
-        state.t += 1.0/fps;
+        if (!paused)
+        {
+            ++state.tick;
+            state.t += 1.0/fps;
+        }
         gravity1.updateControls(keystate,keypress);
         keypress = {};
 
@@ -106,20 +107,33 @@
             gravity1.solvername = event.target.value;
             displayUpdateRate();
     }
+    function dcE(tag) { return document.createElement(tag); }
+    function createHref(text,href)
+    {
+        var a = dcE('a');
+        a.appendChild(document.createTextNode(text));
+        a.href = href;
+        return a;
+    }
     var solverDiv = document.getElementById('solvers');
-    for (var i = 0; i < gravity1.solverNames.length; ++i)
+    for (var i = 0; i < gravity1.solverList.length; ++i)
     {
-        var name = gravity1.solverNames[i];
-        var rbtn = document.createElement('input');
+        var solver = gravity1.solverList[i];
+        var name = solver.name;
+        var rbtn = dcE('input');
         rbtn.setAttribute('type','radio');
         rbtn.setAttribute('name','solver');
         rbtn.setAttribute('value',name);
         if (gravity1.solvername == name)
             rbtn.setAttribute('checked',true);
         rbtn.addEventListener('change',solverChange);
         solverDiv.appendChild(rbtn);
-        solverDiv.appendChild(document.createTextNode(name+' ('+gravity1.solvers[name].n+')'));
-        solverDiv.appendChild(document.createElement('br'));
+        if (solver.href != null)
+            solverDiv.appendChild(createHref(name, solver.href));
+        else
+            solverDiv.appendChild(document.createTextNode(name));
+        solverDiv.appendChild(document.createTextNode(' ('+solver.n+')'));
+        solverDiv.appendChild(dcE('br'));
     }
     var derivRates = [22,27,33,39,47,56,68,82,100,120,150,180,220,270,330,390,470,560,680,820,1000,1200,1500];
     var N = derivRates.length;
@@ -140,6 +154,7 @@
         $("#rateDisplay").html(state.derivCalcRate+" &rarr; "+rateChoice);
     }
     });
+    $("#pausebox").change(function() { paused = this.checked; });
 }
 </script>
 </head>
@@ -148,14 +163,16 @@
     <canvas id="gravity1-canvas" height="480" width="640" />
     </div>
     <div id='statistics'>
-        <p>Speed = <span id='speed'></span></p>
-        <p>Radius = <span id='radius'></span></p>
-        <p>Min radius = <span id='minradius'></span></p>
-        <p>Max radius = <span id='maxradius'></span></p>
-        <p>Period = <span id='period'></span></p>
-        <p>Angular momentum = <span id='angmomentum'></span></p>
-        <p>Eccentricity = <span id='eccentricity'></span></p>
-        <p>Total energy = <span id='total energy'></span></p>
+        <table>
+        <tr><td>Speed</td><td><span id='speed'></span></td></tr>
+        <tr><td>Radius</td><td><span id='radius'></span></td></tr>
+        <tr><td>Min radius</td><td><span id='minradius'></span></td></tr>
+        <tr><td>Max radius</td><td><span id='maxradius'></span></td></tr>
+        <tr><td>Period</td><td><span id='period'></span></td></tr>
+        <tr><td>Angular momentum</td><td><span id='angmomentum'></span></td></tr>
+        <tr><td>Eccentricity</td><td><span id='eccentricity'></span></td></tr>
+        <tr><td>Total energy</td><td><span id='total energy'></span></td></tr>
+        </table>
     </div>
     <div id='optionsForm'>
         <form name='options'>
@@ -164,7 +181,10 @@
             <div id='updateRate'>  
                <div>Update rate: <span id="updateRateDisplay" /></div>
                <div>Acceleration calculations per second: <span id="rateDisplay" /></div>      
-               <div id="rateSlider" />
+               <div id="rateSlider" ></div>
+               <div>
+               <input type="checkbox" id="pausebox">Pause</input>
+               </div>
             </div>
         </form>
     </div>

diff --git a/demos/gravity1/gravity1.js b/demos/gravity1/gravity1.js
@@ -75,10 +75,12 @@ function xstep(vx,w)
     vx[2] += vx[0]*w;
     vx[3] += vx[1]*w;
 }
-function Solver(n,f)
+function Solver(name,f,n,href)
 {
+    this.name = name;
     this.func = f;
     this.n = n;
+    this.href = href;
 }
 Solver.prototype =
 {
@@ -199,22 +201,28 @@ Gravity1Simulation.prototype =
         }
         this.thrusterAcceleration = [ax,ay];
     },
-    solverNames: ['Euler', 'Trapezoidal', 'Runge-Kutta', 'Velocity Verlet', 'Position Verlet','Forest-Ruth'],
-    solvers: { 
-        'Euler': new Solver(1, function(vx, f, dt)
+    solverList: [ 
+        new Solver('Euler', function(vx, f, dt)
         {
             var dvxdt = f(vx);
             return weightedsum([1,dt], [vx,dvxdt], 4);
             // vx + dt*dvxdt
-        }),
-        'Trapezoidal': new Solver(2, function(vx, f, dt)
+        }, 1, 'http://en.wikipedia.org/wiki/Euler_method'),
+        new Solver('Trapezoidal', function(vx, f, dt)
         {
             var dvxdt1 = f(vx);
             var vx1 = weightedsum([1,dt], [vx,dvxdt1], 4);
             var dvxdt2 = f(vx1);
             return weightedsum([1,dt/2,dt/2], [vx,dvxdt1,dvxdt2], 4);
-        }),
-        'Runge-Kutta': new Solver(4,function(vx, f, dt)
+        }, 2, 'http://en.wikipedia.org/wiki/Heun%27s_method'),
+        new Solver('Midpoint', function(vx, f, dt)
+        {
+            var dvxdt1 = f(vx);
+            var vxmid = weightedsum([1,dt/2], [vx,dvxdt1], 4);
+            var dvxdt2 = f(vxmid);
+            return weightedsum([1,dt], [vx,dvxdt2], 4);
+        }, 2, 'http://en.wikipedia.org/wiki/Midpoint_method'),
+        new Solver('Runge-Kutta',function(vx, f, dt)
         {
             var dvxdt1 = f(vx);
             var vx1 = weightedsum([1,dt/2], [vx,dvxdt1], 4);
@@ -225,8 +233,16 @@ Gravity1Simulation.prototype =
             var dvxdt4 = f(vx3);            
             return weightedsum([1,dt/6,dt/3,dt/3,dt/6], 
                 [vx,dvxdt1,dvxdt2,dvxdt3,dvxdt4], 4);
-        }),
-        'Velocity Verlet': new Solver(1,function(vx0, f, dt)
+        },4,'http://en.wikipedia.org/wiki/Runge%E2%80%93Kutta_method#The_Runge.E2.80.93Kutta_method'),
+        new Solver('Semi-implicit Euler', function(vx0, f, dt)
+        {
+            // assumes v=dx/dt
+            var vx = vx0.slice()
+            vstep(vx,f,dt);
+            xstep(vx,dt);
+            return vx;
+        }, 1, 'http://en.wikipedia.org/wiki/Semi-implicit_Euler_method'),
+        new Solver('Velocity Verlet',function(vx0, f, dt)
         {  
             // assumes v=dx/dt
             var vx = vx0.slice(); // copy
@@ -238,8 +254,8 @@ Gravity1Simulation.prototype =
             // full step with position,
             // other half step with velocity
             return vx;
-        }),
-        'Position Verlet': new Solver(1,function(vx0, f, dt)
+        }, 1,'http://en.wikipedia.org/wiki/Velocity_Verlet#Velocity_Verlet'),
+        new Solver('Position Verlet',function(vx0, f, dt)
         {  
             // assumes v=dx/dt
             var vx = vx0.slice(); // copy
@@ -250,8 +266,8 @@ Gravity1Simulation.prototype =
             // full step with velocity,
             // other half step with position
             return vx;
-        }),
-        'Forest-Ruth': new Solver(3,function(vx0,f,dt)
+        }, 1),
+        new Solver('Forest-Ruth',function(vx0,f,dt)
         {
             // assumes v=dx/dt
             var k = 1/(2-Math.pow(2,1/3));
@@ -279,8 +295,8 @@ Gravity1Simulation.prototype =
             xstep(vx,k*dt/2);
 
             return vx;
-        })
-    },
+        }, 3, 'http://www.slac.stanford.edu/cgi-wrap/getdoc/slac-pub-5071.pdf')
+    ],
     getStatistics: function() {
         var result = {};
         result.radius = this.getRadius();
@@ -486,5 +502,14 @@ Gravity1Simulation.prototype =
             //    dotpath(ctx,xy[0],xy[1],2);
         }
     }
-}
+};
 
+(function(simproto) {
+    var solvers = {};
+    for (var i = 0; i < simproto.solverList.length; ++i)
+    {
+        var solver = simproto.solverList[i];
+        solvers[solver.name] = solver;
+    }
+    simproto.solvers = solvers;
+})(Gravity1Simulation.prototype);