Update

projects/projectile/index.html

@@ -1 +1,37 @@
-BLABLABLABL
+<div class="row g-3">
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(x_0\)</div>
+      <input type="number" class="form-control" v-model="x0" value="0">
+      <div class="input-group-text">\(m\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(y_0\)</div>
+      <input type="number" class="form-control" v-model="y0" value="50">
+      <div class="input-group-text">\(m\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(v_0\)</div>
+      <input type="number" class="form-control" v-model="v0" value="50">
+      <div class="input-group-text">\(m.s\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(g\)</div>
+      <input type="number" class="form-control" v-model="g">
+      <div class="input-group-text">\(m.s^{-2}\)</div>
+    </div>
+  </div>
+  <div class="col-auto">
+    <button class="btn btn-primary" onClick="refresh()">Refresh</button>
+  </div>
+</div>
+<br /><br /><br />
+
+<h3>Projectile Motion</h3>
+\[ \int_{0}^{10} \frac{56}{875} \]

projects/projectile/index.js

@@ -1,19 +1,20 @@
 
+let t=0;
+let v0=50
+let x0=0
+let y0=50
+let g=9.81
 
 let projectile= function (node){
 
     node.setup = function() {
         node.createCanvas(width, height);
     };
-
-
-    let t=0;
-    let v0=50
-    let x0=1
-    let y0=50
-    let g=9.81
     let width=800
-    let height=200
+    let height=300
+
+
+
     let dots=[]
     function x(t) {
         return x0+v0*t
@@ -25,16 +26,40 @@ let projectile= function (node){
 
     node.draw = function() {
         node.background(50);
-        dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],4,4);})
+        node.noStroke();
+        dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);})
         node.ellipse(x(t),y(t),20,20);
         dots.push([x(t),y(t)])
-        if(t>10){
+        if(t>50 || y(t)>height){
             node.noLoop()
         }
-        t+=0.07
+        t+=0.06
     };
-
-    node.a=function(){
-        node.remove()
-    }
 };
+
+refresh=function(){
+    t=0
+    x0=parseFloat(app.x0)
+    y0=parseFloat(app.y0)
+    v0=parseFloat(app.v0)
+    g=parseFloat(app.g)
+    console.log(app.x0)
+    p5Load()
+}
+
+
+
+project_init=function(){
+    app = new Vue({
+        el: '#app',
+        data :{
+            x0:x0,
+            y0:y0,
+            v0:v0,
+            g:g
+        }
+    })
+    p5Load()
+    
+}
+

template.html

@@ -4,7 +4,9 @@
 <title>Physics Simulation</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="css/bootstrap.min.css">
-
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/p5.min.js"></script>
 <script type="text/javascript" src="${JS}"></script>
@@ -42,7 +44,7 @@
       <div class="col">
         <div class="container">
           <div class="row">
-            <div class="col">
+            <div class="col" id="app">
               ${CONTENT}
             </div>
           </div>
@@ -52,7 +54,12 @@
   </div>
 
   <script type="text/javascript">
-    let p=new p5(${project_name},"canvas")
+    var p5_instance=null
+    p5Load=function(){
+        if(p5_instance != null){p5_instance.remove()}
+        p5_instance=new p5(${project_name},"canvas")
+    }
+    project_init()
   </script>
 </body>
 </html>