Update project

projects/projectile/index.html

@@ -15,7 +15,7 @@
   </div>
   <div class="col-sm">
     <div class="input-group">
-      <div class="input-group-text">\(v_0\)</div>
+      <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">\(m.s\)</div>
     </div>
@@ -34,4 +34,15 @@
 <br /><br /><br />
 
 <h3>Projectile Motion</h3>
-\[ \int_{0}^{10} \frac{56}{875} \]
+<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>
+<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>
+<p>Thus:</p>
+\[ 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>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\]

projects/projectile/index.js

@@ -6,6 +6,9 @@ let y0=50
 let g=9.81
 
 let projectile= function (node){
+    let width=800
+    let height=300
+    let dots=[] // Dots that show projectile path
     
     node.setup = function() {
         c=node.createCanvas(width, height);
@@ -13,12 +16,8 @@ let projectile= function (node){
         katex.render("v_0", v0t.elt);
         v0t.elt.style.color="#b4b4b4"
     };
-    let width=800
-    let height=300
 
-
-
-    let dots=[]
+    // See explanations
     function x(t) {
         return x0+v0*t
     }
@@ -27,6 +26,7 @@ let projectile= function (node){
         return height - (-1/2 * g * t**2 + v0 * t + y0)
     }
 
+    
     node.draw = function() {
         node.background(70);
         node.noStroke();
@@ -47,8 +47,10 @@ let projectile= function (node){
         v0t.position(c.position().x+m.x,c.position().y+m.y)
         node.pop()
     };
+    
     node.windowResized = function(){
         v0t.position(c.position().x+m.x,c.position().y+m.y)
+        node.resizeCanvas(Math.min(window.innerWidth,width), height);
 
     }
 };

template.html

@@ -46,10 +46,8 @@
     </div>
     <br />
     <div class="row">
-      <div class="col">
-        <center>
-          <div id="canvas" style="margin-bottom:2em;"></div>
-        </center>
+      <div class="col" style="padding:0px;">
+        <div id="canvas" style="margin-bottom:2em" align="center"></div>
       </div>
     </div>
     <div class="row">