diff options
| -rw-r--r-- | projects/projectile/index.js | 24 | ||||
| -rw-r--r-- | template.html | 18 | ||||
| -rw-r--r-- | www/js/p5_custom.js | 15 |
3 files changed, 50 insertions, 7 deletions
diff --git a/projects/projectile/index.js b/projects/projectile/index.js index b279eff..29ebfba 100644 --- a/projects/projectile/index.js +++ b/projects/projectile/index.js @@ -1,14 +1,17 @@ let t=0; let v0=50 -let x0=0 +let x0=50 let y0=50 let g=9.81 let projectile= function (node){ node.setup = function() { - node.createCanvas(width, height); + c=node.createCanvas(width, height); + v0t=node.createElement('p', ''); + katex.render("v_0", v0t.elt); + v0t.elt.style.color="#b4b4b4" }; let width=800 let height=300 @@ -25,16 +28,29 @@ let projectile= function (node){ } node.draw = function() { - node.background(50); + 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)]) if(t>50 || y(t)>height){ node.noLoop() } - t+=0.06 + 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() }; + node.windowResized = function(){ + v0t.position(c.position().x+m.x,c.position().y+m.y) + + } }; refresh=function(){ diff --git a/template.html b/template.html index 7eb17ef..cb27812 100644 --- a/template.html +++ b/template.html @@ -4,11 +4,23 @@ <title>Physics Simulation</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> -<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> + + +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css" integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET" crossorigin="anonymous"> + + <!-- The loading of KaTeX is deferred to speed up page rendering --> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js" integrity="sha384-GxNFqL3r9uRJQhR+47eDxuPoNE7yLftQM8LcxzgS4HT73tp970WS/wV5p8UzCOmb" crossorigin="anonymous"></script> + + <!-- To automatically render math in text elements, include the auto-render extension: --> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous" + onload="renderMathInElement(document.body);"></script> + + + <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/p5.min.js"></script> +<script type="text/javascript" src="js/p5_custom.js"></script> <script type="text/javascript" src="${JS}"></script> <body> @@ -36,7 +48,7 @@ <div class="row"> <div class="col"> <center> - <div id="canvas"></div> + <div id="canvas" style="margin-bottom:2em;"></div> </center> </div> </div> diff --git a/www/js/p5_custom.js b/www/js/p5_custom.js new file mode 100644 index 0000000..b25e636 --- /dev/null +++ b/www/js/p5_custom.js @@ -0,0 +1,15 @@ + +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(); + + // Return the center of the arrow + return(p.createVector(x1+(x2-x1)/2,y1+(y2-y1)/2)) +} |