Debug cleaning

projects/projectile/index.html

@@ -34,7 +34,7 @@
 <br /><br /><br />
 
 <h3>Projectile Motion</h3>
-<p>To determine to position of the projectile we should compute the position vector \(\vec{r}=x(t)\vec{i}+y(t)\vec{i}\).</p>
+<p>To determine to position of the projectile we should compute the position vector \(\vec{r}(t)=x(t)\vec{i}+y(t)\vec{i}\).</p>
 <h5>\(x(t)\):</h5>
 <p>We know from Newton second law that \(\sum \vec{F} = m\times \vec{a}_x = m\times a_x(t)\vec{i}\)</p>
 <p>However, the projectile as a constant speed along \(\vec{i}\). Hence, \(a_x(t) = 0 \).</p>
@@ -42,7 +42,9 @@
 \[ x(t) = \int_{t_0}^t v_{0,x}dt = v_{0,x}t + C = v_{0,x}t + x_0\]
 <h5>\(y(t)\):</h5>
 <p>We know from Newton second law that \(\sum \vec{F} = m\times \vec{a}_y = m\times a_y(t)\vec{i}\)</p>
-<p>The projectile is under the influence of the gravity that is oriented <em>downwarde</em>. Hence, \(a_y(t) = -g \).</p>
+<p>The projectile is under the influence of the gravity that is oriented <em>downward</em>. Hence, \(a_y(t) = -g \).</p>
 <p>Thus:</p>
 \[ v_y(t) = \int_{t_0}^t a_{y}(t)dt = -gt+C = -gt + v_{0,y}\]
 \[ y(t) = \int_{t_0}^t v_y(t)dt = -\frac{1}{2}gt^2 + v_{0,y}t+C=-\frac{1}{2}gt^2 + v_{0,y}t+y_0\]
+<h5>\(\vec{r}(t)\):</h5>
+Finally knowing \(x(t)\) and \(y(t)\) we have \( \vec{r}(t) = \left(\begin{smallmatrix}x(t)\\y(t)\end{smallmatrix}\right) = \left(\begin{smallmatrix}v_{0,x}t + x_0\\-\frac{1}{2}gt^2 + v_{0,y}t+y_0\end{smallmatrix}\right)\)

projects/projectile/index.js

@@ -1,8 +1,8 @@
 
 let t=0;
 let v0=50
-let x0=50
-let y0=50
+let x0=60
+let y0=60
 let g=9.81
 
 let projectile= function (node){
@@ -12,9 +12,19 @@ let projectile= function (node){
     
     node.setup = function() {
         c=node.createCanvas(Math.min(window.innerWidth,width), height);
-        v0t=node.createElement('p', '');
+
+        v0t=node.createElement('span', '');
         katex.render("v_0", v0t.elt);
-        v0t.elt.style.color="#b4b4b4"
+        v0t.elt.style.color="white"
+
+        r=node.createElement('span', '');
+        katex.render("\\vec{r}(t)", r.elt);
+        r.elt.style.color="white"
+        
+        vt=node.createElement('span', '');
+        katex.render("v(t)", vt.elt);
+        vt.elt.style.color="white"
+
     };
 
     // See explanations
@@ -26,6 +36,10 @@ let projectile= function (node){
         return height - (-1/2 * g * t**2 + v0 * t + y0)
     }
 
+    function v(t) {
+        return (-g * t + v0)
+    }
+
     
     node.draw = function() {
         node.background(70);
@@ -35,23 +49,23 @@ let projectile= function (node){
         node.ellipse(x(t),y(t),20,20);
         node.fill(255)
         dots.push([x(t),y(t)])
-        if(t>50 || y(t)>height){
-            node.noLoop()
-        }
-        t+=0.05
         node.push()
         node.fill(22)
         node.stroke(180)
-        m=draw_arrow(node,x0,height-y0,x0+v0,height-y0-v0)
-        console.log(m.y)
-        v0t.position(c.position().x+m.x,c.position().y+m.y)
-        node.pop()
+        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()
+        }
+        t+=0.05
     };
     
     node.windowResized = function(){
-        v0t.position(c.position().x+m.x,c.position().y+m.y)
         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)
     }
 };
 

public/js/p5_custom.js

@@ -1,15 +1,47 @@
 
-draw_arrow=function(p,x1,y1,x2,y2){
-    p.push()
-    p.strokeWeight(5)
-    p.line(x1,y1,x2,y2)
-    offset=5
-    var angle = p.atan2(y1 - y2, x1 - x2); //gets the angle of the line
-    p.translate(x2, y2); //translates to the destination vertex
-    p.rotate(angle-p.HALF_PI); //rotates the arrow point
-    p.triangle(-offset*0.8, offset, offset*0.8, offset, 0, -offset/2); //draws the arrow point as a triangle
-    p.pop();
+draw_arrow=function(p,x1,y1,x2,y2,elt=null,canvas,skiparrow=false){
+    var offset=5
+    
+    // Reduce the length of the vector to have a better tip location
+    let v=p.createVector(x2-x1,y2-y1)
+    v.setMag(v.mag()-offset*2)
+    x2=x1+v.x
+    y2=y1+v.y
 
-    // Return the center of the arrow
-    return(p.createVector(x1+(x2-x1)/2,y1+(y2-y1)/2))
+    // Draw the vector
+    if(!skiparrow){
+        p.push()
+        p.strokeWeight(5)
+        p.line(x1,y1,x2,y2)
+        var angle = p.atan2(y1 - y2, x1 - x2); //gets the angle of the line
+        p.translate(x2, y2); //translates to the destination vertex
+        p.rotate(angle-p.HALF_PI); //rotates the arrow point
+        p.triangle(-offset*0.8, offset, offset*0.8, offset, 0, -offset/2); //draws the arrow point as a triangle
+        p.pop();
+    }
+    
+    if(elt != null){
+        // Compute center of the vector
+        v.setMag(v.mag()/2)
+        center=p.createVector(x1,y1).add(v)
+
+        // Compute x and y factor to offset elt
+        yfactor=p.abs(p.PI/2-p.abs(angle))/(p.PI/2)
+        xfactor=1-yfactor
+        justify=15
+
+        if(angle>0){
+            yfactor=-yfactor
+        }
+
+        cp=canvas.position()        
+        elt.position(cp.x+center.x+justify*xfactor-5,cp.y+center.y-justify*yfactor-elt.elt.offsetHeight/2)
+
+        
+    }
+    
+}
+
+draw_elt_on_arrow=function(p,canvas,center,elt){
+    
 }

template.html

@@ -55,7 +55,7 @@
         <div class="container">
           <div class="row">
             <div class="col" id="app">
-              ${CONTENT}
+                ${CONTENT}
             </div>
           </div>
         </div>