-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
71 lines (55 loc) · 2.33 KB
/
script.js
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
const canvas = document.getElementById("myCanvas")
canvas.width = document.body.offsetWidth
canvas.height = document.body.offsetHeight
const ctx = canvas.getContext("2d")
const airplaneLocation = [120, 120]
const eAirport = [800, 350]
const distance = 50
const img = new Image(50, 50)
img.src = "airplane.png"
img.addEventListener('load', () => draw([120, 200]))
const vectorSize = (vec) => Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1])
const minus = (b, a) => [b[0] - a[0], b[1] - a[1]]
const plus = (a, b) => [a[0] + b[0], a[1] + b[1]]
const scale = (a, v) => [a * v[0], a * v[1]]
const calculateUnitVector = (vec) => {
const size = vectorSize(vec)
return [vec[0] / size, vec[1] / size]
}
function draw(estimatedLocation) {
const vecAirplaneToEstimation = minus(estimatedLocation, airplaneLocation)
const dirAirplaneToEstimation = calculateUnitVector(vecAirplaneToEstimation)
const angle = (dirAirplaneToEstimation[1] < 0 ? -1 : 1) * Math.acos(dirAirplaneToEstimation[0])
const adjustedDistance = Math.min(vectorSize(minus(estimatedLocation, eAirport)), 2 * distance) / 2
const bezierControlPoint = plus(scale(adjustedDistance, dirAirplaneToEstimation), estimatedLocation)
const vecControlPointToEndAirport = minus(eAirport, bezierControlPoint)
const dirControlPointToEndAirport = calculateUnitVector(vecControlPointToEndAirport)
const cappedDistance = Math.min(adjustedDistance, vectorSize(vecControlPointToEndAirport))
const bezierEndPoint = plus(scale(cappedDistance, dirControlPointToEndAirport), bezierControlPoint)
ctx.save()
ctx.beginPath();
ctx.moveTo(...estimatedLocation);
ctx.quadraticCurveTo(...bezierControlPoint, ...bezierEndPoint);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(...bezierEndPoint);
ctx.lineTo(...eAirport);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(...airplaneLocation);
ctx.lineTo(...estimatedLocation);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
const pos = [-img.width / 2, -img.height / 2]
ctx.translate(...airplaneLocation)
ctx.rotate(Math.PI / 4)
ctx.rotate(angle)
ctx.drawImage(img, ...pos, img.width, img.height)
ctx.restore()
}
canvas.onmousemove = (e) => {
var rect = canvas.getBoundingClientRect();
ctx.clearRect(0, 0, canvas.width, canvas.height)
draw([e.clientX - rect.left, e.clientY - rect.top])
}