-
Notifications
You must be signed in to change notification settings - Fork 18
/
example.html
121 lines (103 loc) · 3.27 KB
/
example.html
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
<html>
<head>
<title>trilateration.js</title>
<script type="text/javascript" src="trilateration.js"></script>
</head>
<body>
<h1>Trilateration in 3D</h1>
<p>
<em>
"In geometry, trilateration is the process of determining absolute
or relative locations of points by measurement of distances, using
the geometry of circles, spheres or triangles.<br/>
<br/>
In addition to its interest as a geometric problem, trilateration
does have practical applications in surveying and navigation,
including global positioning systems (GPS). In contrast to
triangulation, it does not involve the measurement of angles."</em>
— <a href="https://en.wikipedia.org/wiki/Trilateration">Wikipedia</a>
</p>
<p>
The trilateration can result zero, one or two solutions, in these
cases trilaterate() will return <em>null</em>, an Object with
{ x, y, z } coordinates or an Array with two Objects with
{ x, y, z } coordinates, respectively.
</p>
<p>
There is an optional fourth parameter after the three points for
trilaterate() for the case of two solutions to return the middle
of them as one point.
</p>
<p>
In this example...
<ul>
<li>the canvas will turn red if no solution can be found,</li>
<li>a white dot will show the solution if one can be found,</li>
<li>a yellow and a cyan dot will show the two solutions if there
are two of them.</li>
</ul>
</p>
<p>
Note: the display of points and distances are projected to the X-Y
plane so the Z coordinates cannot be seen, but they are taken into
consideration by trilaterate()!
</p>
<canvas id="canvas1" width="800" height="800">
</canvas>
<script type="text/javascript">
var canvas, ctx;
function initialize()
{
canvas = document.getElementById("canvas1");
ctx = canvas.getContext("2d");
p1 = { x: 0, y: 0, z: 0, r: 320 };
p2 = { x: 500, y: 200, z: 0, r: 370 };
p3 = { x: 400, y: 500, z: 40, r: 350 };
p4 = trilaterate(p1, p2, p3);
if (p4 !== null)
{
ctx.fillStyle = "#111";
}
else
{
ctx.fillStyle = "#800";
}
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.strokeStyle = ctx.fillStyle;
ctx.fillRect(20 + p1.x - 2, 20 + p1.y - 2, 5, 5);
ctx.beginPath();
ctx.arc(20 + p1.x, 20 + p1.y, p1.r, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#0f0";
ctx.strokeStyle = ctx.fillStyle;
ctx.fillRect(20 + p2.x - 2, 20 + p2.y - 2, 5, 5);
ctx.beginPath();
ctx.arc(20 + p2.x, 20 + p2.y, p2.r, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#00f";
ctx.strokeStyle = ctx.fillStyle;
ctx.fillRect(20 + p3.x - 2, 20 + p3.y - 2, 5, 5);
ctx.beginPath();
ctx.arc(20 + p3.x, 20 + p3.y, p3.r, 0, 2 * Math.PI);
ctx.stroke();
if (p4 !== null)
{
if (p4 instanceof Array)
{
ctx.fillStyle = "#0ff";
ctx.fillRect(20 + p4[0].x - 2, 20 + p4[0].y - 2, 5, 5);
ctx.fillStyle = "#ff0";
ctx.fillRect(20 + p4[1].x - 2, 20 + p4[1].y - 2, 5, 5);
}
else
{
ctx.fillStyle = "#fff";
ctx.fillRect(20 + p4.x - 2, 20 + p4.y - 2, 5, 5);
}
}
}
window.onload = initialize;
</script>
</body>
</html>