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
         }
     })

public/js/p5_custom.js

@@ -48,13 +48,8 @@ draw_arrow=function(p,x1,y1,x2,y2,elt=null,canvas,skiparrow=false,flip=false){
         } else {
             elt.elt.style.display="block"
         }
+
+        // Move element
         elt.position(elt_x,elt_y)
-
-        
     }    
-    
-}
-
-draw_elt_on_arrow=function(p,canvas,center,elt){
-    
 }

refresh.sh

@@ -6,6 +6,9 @@ projects=${wai}/projects
 template=${wai}/template.html
 main="projectile"
 
+# Check if auto enabled
+[ $# -gt 0 ] && { echo -e "$(find ${projects}/ -type f)\n$template" | entr $0; exit 0; }
+
 # Clean before
 rm -rf $public/projects
 rm -rf $public/*.html

template.html

@@ -23,6 +23,20 @@
 <script type="text/javascript" src="js/p5_custom.js"></script>
 <script type="text/javascript" src="${JS}"></script>
 
+<style>
+  #canvas {
+      width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+      width: -moz-max-content;    /* Firefox/Gecko */
+      width: -webkit-max-content; /* Chrome */
+      width:fit-content;
+      height: intrinsic;           /* Safari/WebKit uses a non-standard name */
+      height: -moz-max-content;    /* Firefox/Gecko */
+      height: -webkit-max-content; /* Chrome */
+      height:fit-content;
+      margin-bottom:2em;
+  }
+</style>
+
 <body>
   <div class="container-fluid">
     <div class="row">
@@ -48,7 +62,7 @@
     <div class="row">
       <div class="col" style="padding:0px;">
         <center>
-          <div id="canvas" class="img-thumbnail" style="margin-bottom:2em;width:fit-content;height:fit-content;"></div>
+          <div id="canvas" class="img-thumbnail"></div>
         </center>
       </div>
     </div>