Update

projects/projectile/index.html

@@ -15,8 +15,15 @@
   </div>
   <div class="col-sm">
     <div class="input-group">
-      <div class="input-group-text">\(v_{0,x},v_{0,y}\)</div>
-      <input type="number" class="form-control" v-model="v0" value="50">
+      <div class="input-group-text">\(v_{0,x}\)</div>
+      <input type="number" class="form-control" v-model="vx0" 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">\(v_{0,y}\)</div>
+      <input type="number" class="form-control" v-model="vy0" value="50">
       <div class="input-group-text">\(m.s\)</div>
     </div>
   </div>
@@ -28,7 +35,7 @@
     </div>
   </div>
   <div class="col-auto">
-    <button class="btn btn-primary" onClick="refresh()">Refresh</button>
+    <button class="btn btn-primary" onClick="refresh()">Restart</button>
   </div>
 </div>
 <br /><br /><br />

projects/projectile/index.js

@@ -1,21 +1,22 @@
 
 let t=0;
-let v0=50
-let x0=60
-let y0=60
+let vy0=50
+let vx0=vy0
+let x0=140
+let y0=80
 let g=9.81
 
 let projectile= function (p){
     let width=800
     let height=300
-    let dots=[] // Dots that show projectile path
+    let dots=[] // Dots that show the projectile path
     let end=false;
     
     p.setup = function() {
         c=p.createCanvas(Math.min(window.innerWidth,width), height);
         
-        v0t=p.createElement('span', '');
-        katex.render("v_0", v0t.elt);
+        vy0t=p.createElement('span', '');
+        katex.render("v_0", vy0t.elt);
 
         r=p.createElement('span', '');
         katex.render("\\vec{r}(t)", r.elt);
@@ -32,30 +33,34 @@ let projectile= function (p){
         
     };
 
-    // See explanations
+    // See explanations in html
     function xt(t) {
-        return x0+v0*t
+        return x0+vx0*t
     }
-
     function yt(t) {
-        return height - (-1/2 * g * t**2 + v0 * t + y0)
+        return height - (-1/2 * g * t**2 + vy0 * t + y0)
     }
-
-    function v(t) {
-        return -g * t + v0
+    function vx(t) {
+        return vx0
     }
-
+    function vy(t) {
+        return -g * t + vy0
+    }
+    
     let draw_vectors=function(x,y,skiparrow=false){
         p.push()
         p.stroke(199, 141, 107)
-        draw_arrow(p,x,y,x+x0,y-v(t),vt,c,skiparrow)
+        draw_arrow(p,x,y,x+vx(t),y-vy(t),vt,c,skiparrow)
+
         p.stroke(200)
         draw_arrow(p,x0,height-y0,x,y,r,c,skiparrow)
+
         p.stroke(181, 107, 199)
-        draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
+        draw_arrow(p,x0,height-y0,x0+vx0,height-(y0+vy0),vy0t,c,skiparrow)
 
         p.stroke(121, 199, 107)
         draw_arrow(p,x0,height-y0,x0,height-y0-50,vj,c,skiparrow,true)
+
         p.stroke(199,119,107)
         draw_arrow(p,x0,height-y0,x0+50,height-y0,vi,c,skiparrow)
 
@@ -80,9 +85,15 @@ let projectile= function (p){
         // Draw vectors
         draw_vectors(x,y)
 
+        p.push()
+        p.stroke(0)
+        p.ellipse(x0,height-y0,8)
+        p.pop()
+        
         // Check simulation state and update it
         if(t>50 || (height-y0)<y){
-              end=true
+            end=true
+            p.noLoop()
         }
 
         // Update state
@@ -101,7 +112,8 @@ refresh=function(){
     t=0
     x0=parseFloat(app.x0)
     y0=parseFloat(app.y0)
-    v0=parseFloat(app.v0)
+    vx0=parseFloat(app.vx0)
+    vy0=parseFloat(app.vy0)
     g=parseFloat(app.g)
     p5Load()
 }
@@ -114,7 +126,8 @@ project_init=function(){
         data :{
             x0:x0,
             y0:y0,
-            v0:v0,
+            vy0:vy0,
+            vx0:vx0,
             g:g
         }
     })