refactoring and pregenerated graphs

index.html

@@ -58,7 +58,7 @@ <h1>Hoop Generator</h1>>
         <input type="text" id="omega" name="omega" value="11" onBlur ="refresh()"><br>
 
         <label for="simspeed">simulation speed:</label><br>
-        <input type="text" id="simSpeed" name="simspeed" value="1.0" onBlur ="refresh()"><br>
+        <input type="text" id="simSpeed" name="simspeed" value=".3" onBlur ="refresh()"><br>
 
         <label for="graphint">Graph update interval:</label><br>
         <input type="text" id="graphint" name="graphint" value=".05" onBlur ="refresh()"><br>
@@ -81,14 +81,15 @@ <h1>Hoop Generator</h1>>
     <p class="time-label">Time(seconds):</p>
     <p class = "time-value" id="time">0</p>
     <p id = "equations-label">Leave Empty for default equations, (use o for ω, use t for θ):</p>
-    <p id = "thetadot">θ&#x307 = <span onchange = "refresh()" id="math-field"></span></p>
-    <p id ="velocitydot">v&#x307 = <span onchange = "refresh()" id="math-field2"></span></p>
+    <p id = "thetadot" >θ&#x307 = <span id="math-field"></span></p>
+    <p id ="velocitydot">v&#x307 = <span id="math-field2"></span></p>
 
 
     <link href = "./libraries/mathquill-0.10.1/mathquill-basic.css" rel = "stylesheet">
 <script src="./libraries/jquery/dist/jquery.min.js"></script>
 <script src="./libraries/mathquill-0.10.1/mathquill.js"></script>
-<script src="./src/bundle2.js"></script>
+<script src="./src/bundle2.js">
+</script>
     <script  type="importmap">{
         "imports": {
             "three": "https://threejs.org/build/three.module.js",
@@ -115,34 +116,49 @@ <h1>Hoop Generator</h1>>
         handlers: {
             edit: function() { // useful event handlers
             latexSpan = mathField.latex(); // simple API
-            refresh();
+            //refresh();
             }
         }
         });
+        //mathField.el().querySelector('math-field').addEventListener('focusout',refresh());
+
 
         let mathField2 = MQ.MathField(mathFieldSpan2, {
         spaceBehavesLikeTab: true, // configurable
         handlers: {
             edit: function() { // useful event handlers
             latexSpan2 = mathField2.latex(); // simple API
-            refresh();
+            //refresh();
             }
 
         }
         });
-        import{draw} from './src/index.js';
-        import {draw2} from './src/staticSim.js';
+        //mathField2.el().querySelector("latex").addEventListener('focusout',refresh());
+        // import{draw} from './src/index.js';
+        // import {draw2} from './src/staticSim.js';
+
+        import {draw} from "./src/runSim.js";
+
+
         document.getElementById("generate").addEventListener("click", () => {
             document.getElementById("time").innerHTML=0;
-            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()},window.evaluatex,window.tex);
-            draw2();
+            document.getElementById("variableSim-theta").innerHTML="";
+            document.getElementById("variableSim-velocity").innerHTML="";
+            document.getElementById("staticSim-theta").innerHTML="";
+            document.getElementById("staticSim-velocity").innerHTML="";
+            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()}, true, "variableSim-theta","variableSim-velocity",window.evaluatex);
+            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()},false, "staticSim-theta","staticSim-velocity",window.evaluatex);
 
         })
         window.refresh = function refreshDraw(){
             document.getElementById("time").innerHTML=0;
             document.getElementById("equations-label").innerHTML="Type equations below:, (use o for ω, use t for θ):";
-            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()},window.evaluatex,window.tex);
-            draw2();
+            document.getElementById("variableSim-theta").innerHTML="";
+            document.getElementById("variableSim-velocity").innerHTML="";
+            document.getElementById("staticSim-theta").innerHTML="";
+            document.getElementById("staticSim-velocity").innerHTML="";
+            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()}, true, "variableSim-theta","variableSim-velocity",window.evaluatex);
+            draw({thetadot:mathField.latex(),velocitydot: mathField2.latex()},false, "staticSim-theta","staticSim-velocity",window.evaluatex);
         }