diff options
| -rw-r--r-- | projects/projectile/index.html | 38 | ||||
| -rw-r--r-- | projects/projectile/index.js | 53 | ||||
| -rw-r--r-- | template.html | 13 |
3 files changed, 86 insertions, 18 deletions
diff --git a/projects/projectile/index.html b/projects/projectile/index.html index 63d2a68..455b6b6 100644 --- a/projects/projectile/index.html +++ b/projects/projectile/index.html @@ -1 +1,37 @@ -BLABLABLABL +<div class="row g-3"> + <div class="col-sm"> + <div class="input-group"> + <div class="input-group-text">\(x_0\)</div> + <input type="number" class="form-control" v-model="x0" value="0"> + <div class="input-group-text">\(m\)</div> + </div> + </div> + <div class="col-sm"> + <div class="input-group"> + <div class="input-group-text">\(y_0\)</div> + <input type="number" class="form-control" v-model="y0" value="50"> + <div class="input-group-text">\(m\)</div> + </div> + </div> + <div class="col-sm"> + <div class="input-group"> + <div class="input-group-text">\(v_0\)</div> + <input type="number" class="form-control" v-model="v0" value="50"> + <div class="input-group-text">\(m.s\)</div> + </div> + </div> + <div class="col-sm"> + <div class="input-group"> + <div class="input-group-text">\(g\)</div> + <input type="number" class="form-control" v-model="g"> + <div class="input-group-text">\(m.s^{-2}\)</div> + </div> + </div> + <div class="col-auto"> + <button class="btn btn-primary" onClick="refresh()">Refresh</button> + </div> +</div> +<br /><br /><br /> + +<h3>Projectile Motion</h3> +\[ \int_{0}^{10} \frac{56}{875} \] diff --git a/projects/projectile/index.js b/projects/projectile/index.js index 4226da5..b279eff 100644 --- a/projects/projectile/index.js +++ b/projects/projectile/index.js @@ -1,19 +1,20 @@ +let t=0; +let v0=50 +let x0=0 +let y0=50 +let g=9.81 let projectile= function (node){ node.setup = function() { node.createCanvas(width, height); }; + let width=800 + let height=300 + - let t=0; - let v0=50 - let x0=1 - let y0=50 - let g=9.81 - let width=800 - let height=200 let dots=[] function x(t) { return x0+v0*t @@ -25,16 +26,40 @@ let projectile= function (node){ node.draw = function() { node.background(50); - dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],4,4);}) + node.noStroke(); + dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);}) node.ellipse(x(t),y(t),20,20); dots.push([x(t),y(t)]) - if(t>10){ + if(t>50 || y(t)>height){ node.noLoop() } - t+=0.07 + t+=0.06 }; - - node.a=function(){ - node.remove() - } }; + +refresh=function(){ + t=0 + x0=parseFloat(app.x0) + y0=parseFloat(app.y0) + v0=parseFloat(app.v0) + g=parseFloat(app.g) + console.log(app.x0) + p5Load() +} + + + +project_init=function(){ + app = new Vue({ + el: '#app', + data :{ + x0:x0, + y0:y0, + v0:v0, + g:g + } + }) + p5Load() + +} + diff --git a/template.html b/template.html index 882d683..7eb17ef 100644 --- a/template.html +++ b/template.html @@ -4,7 +4,9 @@ <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> +<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}"></script> @@ -42,7 +44,7 @@ <div class="col"> <div class="container"> <div class="row"> - <div class="col"> + <div class="col" id="app"> ${CONTENT} </div> </div> @@ -52,7 +54,12 @@ </div> <script type="text/javascript"> - let p=new p5(${project_name},"canvas") + var p5_instance=null + p5Load=function(){ + if(p5_instance != null){p5_instance.remove()} + p5_instance=new p5(${project_name},"canvas") + } + project_init() </script> </body> </html> |