Update

projects/projectile/index.js

@@ -5,34 +5,32 @@ let x0=60
 let y0=60
 let g=9.81
 
-let projectile= function (node){
+let projectile= function (p){
     let width=800
     let height=300
     let dots=[] // Dots that show projectile path
+    let end=false;
     
-    node.setup = function() {
-        c=node.createCanvas(Math.min(window.innerWidth,width), height);
+    p.setup = function() {
+        c=p.createCanvas(Math.min(window.innerWidth,width), height);
 
-        v0t=node.createElement('span', '');
+        v0t=p.createElement('span', '');
         katex.render("v_0", v0t.elt);
-        v0t.elt.style.color="white"
 
-        r=node.createElement('span', '');
+        r=p.createElement('span', '');
         katex.render("\\vec{r}(t)", r.elt);
-        r.elt.style.color="white"
         
-        vt=node.createElement('span', '');
+        vt=p.createElement('span', '');
         katex.render("v(t)", vt.elt);
-        vt.elt.style.color="white"
 
     };
 
     // See explanations
-    function x(t) {
+    function xt(t) {
         return x0+v0*t
     }
 
-    function y(t) {
+    function yt(t) {
         return height - (-1/2 * g * t**2 + v0 * t + y0)
     }
 
@@ -40,32 +38,48 @@ let projectile= function (node){
         return (-g * t + v0)
     }
 
-    
-    node.draw = function() {
-        node.background(70);
-        node.noStroke();
-        dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);})
-        node.fill(255)
-        node.ellipse(x(t),y(t),20,20);
-        node.fill(255)
-        dots.push([x(t),y(t)])
-        node.push()
-        node.fill(22)
-        node.stroke(180)
-        draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c)
-        draw_arrow(node,x0,height-y0,x(t),y(t),r,c)
-        draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c)
-        if(t>50 || (height-y0)<y(t)){
-            node.stop()
+    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)
+        p.stroke(200)
+        draw_arrow(p,x0,height-y0,x,y,r,c,skiparrow)
+        p.stroke(122, 199, 107)
+        draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
+        p.pop()
+    }
+    
+    
+    p.draw = function() {
+        p.clear()
+        let x=xt(t)
+        let y=yt(t)
+        
+        // Draw projectile and path
+        p.push()
+        p.noStroke()
+        p.fill(100)
+        dots.forEach((elt)=>{p.ellipse(elt[0],elt[1],5,5);})
+        p.fill(0)
+        p.ellipse(x,y,20,20);
+        p.pop()
+               
+        // Draw vectors
+        draw_vectors(x,y)
+
+        // Check simulation state and update it
+        if(t>50 || (height-y0)<y){
+              end=true
+        }
+        
+        if(!end){
+            t+=0.1
+            dots.push([x,y])
         }
-        t+=0.05
     };
     
-    node.windowResized = function(){
-        node.resizeCanvas(Math.min(window.innerWidth,width), height);
-        draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c,true)
-        draw_arrow(node,x0,height-y0,x(t),y(t),r,c,true)
-        draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,true)
+    p.windowResized = function(){
+        p.resizeCanvas(Math.min(window.innerWidth,width), height);
     }
 };