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
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body {margin: 0;padding: 0;background: Skyblue; }
#stage{
background :#101010;
}
</style>
<script src="snap.svg-min.js"></script>
</head>
<body>
<svg width="100%" height="auto" viewBox="0 0 1000 350" id="stage"></svg>
<script>
var paper= Snap("#stage");
class Roue{
constructor(cx,cy,R){
this.cx = cx || 0;
this.cy = cy || 0;
this.R = R || 100;
this.snapgroup = this.createRoue();
}
createRoue(){
let group=paper.g();
let cercle=paper.circle(this.cx,this.cy,this.R).attr({
'stroke-width' :3,
stroke: '#00FF00',
fill:'none'});
group.add(cercle);
let rayon=[];
for (let i=0;i<8;i++) {
rayon.push(paper.line(this.cx,this.cy,this.cx+this.R,this.cy).attr({'stroke-width' :2,stroke: 'white'}) );
rayon[i].transform('r'+(45*i)+','+(this.cx)+','+(this.cy) );
group.add(rayon[i]);
}
return group;
}
}
var rouearriere = new Roue(52,236,50);
var roueavant = new Roue(218,236,50);
var velo=paper.image('cadre.svg',15,10,204,255);
var bicycle=paper.g(roueavant.snapgroup,rouearriere.snapgroup,velo);
let sol=paper.line(0,288,1000,288).attr( {'stroke-width' :3, stroke: 'white'} );
var balle= paper.circle(218,25,15).attr({
fill:'yellow'
});
const f=0.25; //tr/s
const ftp=60; //images/s
const deg=180/Math.PI;
const coeff=4;
const g=9.81*coeff;
var tau=1/ftp;
var omega=2*Math.PI*f;
var theta=0,frame=-1;
var traj=[218,25];
var parabole=paper.polyline(traj);
function anime(){
parabole.remove();
frame++;
theta=omega*tau*frame;
let Rtheta=roueavant.R*theta;
let dh=0.5*g*Math.pow(tau*frame,2);
if (Rtheta>1000) {frame=0;traj=[218,25];}
bicycle.transform('t'+ (Rtheta) );
roueavant.snapgroup.transform('r'+(theta*deg)+','+ 218 +','+ 236 );
rouearriere.snapgroup.transform('r'+(theta*deg)+','+ 52 +','+ 236 );
if (25+dh<273) {
traj.push(Rtheta+218,25+dh);
parabole= paper.polyline(traj).attr({
'stroke-width' :2,
stroke: '#FF0000',
fill:'none'
});
balle.transform('t'+ (Rtheta) + ','+ (dh) );
}
window.requestAnimFrame(anime);
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000*tau);
};
})();
anime();
</script>
</body>
</html> |
