1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
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);
vi=p.createElement('span', '');
katex.render("\\vec{i}", vi.elt);
vj=p.createElement('span', '');
katex.render("\\vec{j}", vj.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(181, 107, 199)
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)
p.stroke(199,119,107)
draw_arrow(p,50,50,100,50,vi,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
}
// Update state
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)
p5Load()
}
project_init=function(){
app = new Vue({
el: '#app',
data :{
x0:x0,
y0:y0,
v0:v0,
g:g
}
})
p5Load()
}
|
