Update

3 files changed, 15 insertions, 6 deletions

diff --git a/projects/projectile/index.js b/projects/projectile/index.js
index ce6ba44..3f2a2c3 100644
--- a/projects/projectile/index.js
+++ b/projects/projectile/index.js
@@ -13,7 +13,7 @@ let projectile= function (p){
     
     p.setup = function() {
         c=p.createCanvas(Math.min(window.innerWidth,width), height);
-
+        
         v0t=p.createElement('span', '');
         katex.render("v_0", v0t.elt);
 
@@ -55,9 +55,9 @@ let projectile= function (p){
         draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
 
         p.stroke(121, 199, 107)
-        draw_arrow(p,50,50,50,0,vj,c,skiparrow,true)
+        draw_arrow(p,x0,height-y0,x0,height-y0-50,vj,c,skiparrow,true)
         p.stroke(199,119,107)
-        draw_arrow(p,50,50,100,50,vi,c,skiparrow)
+        draw_arrow(p,x0,height-y0,x0+50,height-y0,vi,c,skiparrow)
 
         p.pop()
     }
diff --git a/public/js/p5_custom.js b/public/js/p5_custom.js
index 19a8dd0..53a1156 100644
--- a/public/js/p5_custom.js
+++ b/public/js/p5_custom.js
@@ -40,8 +40,15 @@ draw_arrow=function(p,x1,y1,x2,y2,elt=null,canvas,skiparrow=false,flip=false){
             yfactor=-yfactor
         }
 
-        cp=canvas.position()        
-        elt.position(cp.x+center.x+justify*xfactor-5,cp.y+center.y-justify*yfactor-elt.elt.offsetHeight/2)
+        cp=canvas.position()
+        elt_x=cp.x+center.x+justify*xfactor-5
+        elt_y=cp.y+center.y-justify*yfactor-elt.elt.offsetHeight/2
+        if (elt_x<cp.x ||  elt_y < cp.y || elt_x>(canvas.width+cp.x) || elt_y>(canvas.height+cp.y)){
+            elt.elt.style.display="none"
+        } else {
+            elt.elt.style.display="block"
+        }
+        elt.position(elt_x,elt_y)
 
         
     }
diff --git a/template.html b/template.html
index b695d8f..53be03b 100644
--- a/template.html
+++ b/template.html
@@ -47,7 +47,9 @@
     <br />
     <div class="row">
       <div class="col" style="padding:0px;">
-        <div id="canvas" style="margin-bottom:2em" align="center"></div>
+        <center>
+          <div id="canvas" class="img-thumbnail" style="margin-bottom:2em;width:fit-content;height:fit-content;"></div>
+        </center>
       </div>
     </div>
     <div class="row">