loic/physics
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update

Browse source
This commit is contained in:
Loic Guegan 2021-10-04 10:32:14 +02:00
parent f36f132e42
commit eb92a8ef2a
3 changed files with 50 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
projects/projectile/index.js
View file

@ -1,14 +1,17 @@
let t=0; let t=0;
let v0=50 let v0=50
let x0=0 let x0=50
let y0=50 let y0=50
let g=9.81 let g=9.81
let projectile= function (node){ let projectile= function (node){
node.setup = function() { 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 width=800
let height=300 let height=300
@ -25,16 +28,29 @@ let projectile= function (node){
} }
node.draw = function() { node.draw = function() {
node.background(50); node.background(70);
node.noStroke(); node.noStroke();
dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);}) dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);})
node.fill(255)
node.ellipse(x(t),y(t),20,20); node.ellipse(x(t),y(t),20,20);
node.fill(255)
dots.push([x(t),y(t)]) dots.push([x(t),y(t)])
if(t>50 || y(t)>height){ if(t>50 || y(t)>height){
node.noLoop() 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(){ refresh=function(){

18
template.html
View file

@ -4,11 +4,23 @@
<title>Physics Simulation</title> <title>Physics Simulation</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"> <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 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/bootstrap.min.js"></script>
<script type="text/javascript" src="js/p5.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> <script type="text/javascript" src="${JS}"></script>
<body> <body>
@ -36,7 +48,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<center> <center>
<div id="canvas"></div> <div id="canvas" style="margin-bottom:2em;"></div>
</center> </center>
</div> </div>
</div> </div>

15
www/js/p5_custom.js Normal file
View file

@ -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))
}