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
|
let t=0;
let v0=50
let x0=60
let y0=60
let g=9.81
let projectile= function (node){
let width=800
let height=300
let dots=[] // Dots that show projectile path
node.setup = function() {
c=node.createCanvas(Math.min(window.innerWidth,width), height);
v0t=node.createElement('span', '');
katex.render("v_0", v0t.elt);
v0t.elt.style.color="white"
r=node.createElement('span', '');
katex.render("\\vec{r}(t)", r.elt);
r.elt.style.color="white"
vt=node.createElement('span', '');
katex.render("v(t)", vt.elt);
vt.elt.style.color="white"
};
// See explanations
function x(t) {
return x0+v0*t
}
function y(t) {
return height - (-1/2 * g * t**2 + v0 * t + y0)
}
function v(t) {
return (-g * t + v0)
}
node.draw = function() {
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)])
node.push()
node.fill(22)
node.stroke(180)
draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c)
draw_arrow(node,x0,height-y0,x(t),y(t),r,c)
draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c)
if(t>50 || (height-y0)<y(t)){
node.stop()
}
t+=0.05
};
node.windowResized = function(){
node.resizeCanvas(Math.min(window.innerWidth,width), height);
draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c,true)
draw_arrow(node,x0,height-y0,x(t),y(t),r,c,true)
draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,true)
}
};
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()
}
|
