-
Notifications
You must be signed in to change notification settings - Fork 153
/
projectile.ts
50 lines (37 loc) · 1.35 KB
/
projectile.ts
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
// =============================================================================
// Projectile Component
// (c) Mathigon
// =============================================================================
import {Line, Point} from '@mathigon/euclid';
import {$N, animate, CustomElementView, register, slide, SVGView} from '@mathigon/boost';
@register('x-projectile')
export class Projectile extends CustomElementView {
ready() {
const $svg = $N('svg', {width: 740, height: 480}, this);
const center = new Point(50, 400);
const ball = new Point(50, 400);
const $slingshot = $N('circle', {r: 5}, $svg) as SVGView;
const $ball = $N('circle', {r: 10, fill: 'red'}, $svg) as SVGView;
const $line = $N('line', {stroke: 'red'}, $svg) as SVGView;
$slingshot.setCenter(center);
$ball.setCenter(ball);
slide($ball, {
move(posn) {
$ball.setCenter(posn);
$line.setLine(posn, center);
},
end(posn) {
const speed = Point.distance(posn, center) * 10;
const angle = new Line(posn, center).angle;
const ux = speed * Math.cos(angle);
const uy = speed * Math.sin(angle);
animate((t) => {
t = t * 3;
const x = posn.x + ux * t;
const y = posn.y + uy * t + t * t * 600 / 2;
$ball.setCenter({x, y});
}, 3000);
}
});
}
}