111 lines
2.1 KiB
JavaScript
111 lines
2.1 KiB
JavaScript
|
|
let t=0;
|
|
let v0=50
|
|
let x0=60
|
|
let y0=60
|
|
let g=9.81
|
|
|
|
let projectile= function (p){
|
|
let width=800
|
|
let height=300
|
|
let dots=[] // Dots that show projectile path
|
|
let end=false;
|
|
|
|
p.setup = function() {
|
|
c=p.createCanvas(Math.min(window.innerWidth,width), height);
|
|
|
|
v0t=p.createElement('span', '');
|
|
katex.render("v_0", v0t.elt);
|
|
|
|
r=p.createElement('span', '');
|
|
katex.render("\\vec{r}(t)", r.elt);
|
|
|
|
vt=p.createElement('span', '');
|
|
katex.render("v(t)", vt.elt);
|
|
|
|
};
|
|
|
|
// See explanations
|
|
function xt(t) {
|
|
return x0+v0*t
|
|
}
|
|
|
|
function yt(t) {
|
|
return height - (-1/2 * g * t**2 + v0 * t + y0)
|
|
}
|
|
|
|
function v(t) {
|
|
return (-g * t + v0)
|
|
}
|
|
|
|
let draw_vectors=function(x,y,skiparrow=false){
|
|
p.push()
|
|
p.stroke(199, 141, 107)
|
|
draw_arrow(p,x,y,x+x0,y-v(t),vt,c,skiparrow)
|
|
p.stroke(200)
|
|
draw_arrow(p,x0,height-y0,x,y,r,c,skiparrow)
|
|
p.stroke(122, 199, 107)
|
|
draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
|
|
p.pop()
|
|
}
|
|
|
|
|
|
p.draw = function() {
|
|
p.clear()
|
|
let x=xt(t)
|
|
let y=yt(t)
|
|
|
|
// Draw projectile and path
|
|
p.push()
|
|
p.noStroke()
|
|
p.fill(100)
|
|
dots.forEach((elt)=>{p.ellipse(elt[0],elt[1],5,5);})
|
|
p.fill(0)
|
|
p.ellipse(x,y,20,20);
|
|
p.pop()
|
|
|
|
// Draw vectors
|
|
draw_vectors(x,y)
|
|
|
|
// Check simulation state and update it
|
|
if(t>50 || (height-y0)<y){
|
|
end=true
|
|
}
|
|
|
|
if(!end){
|
|
t+=0.1
|
|
dots.push([x,y])
|
|
}
|
|
};
|
|
|
|
p.windowResized = function(){
|
|
p.resizeCanvas(Math.min(window.innerWidth,width), height);
|
|
}
|
|
};
|
|
|
|
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()
|
|
|
|
}
|
|
|