-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfigures.html
139 lines (112 loc) · 4.39 KB
/
figures.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html>
<head>
<title>collision-2d examples</title>
<meta name=theme-color content=#303F9F><meta name=viewport content="width=device-width,minimum-scale=1">
<style>
body {
font-family: monospace;
background-color: white;
text-align: center;
padding: 60px 0px;
}
canvas {
padding: 5px 6px;
}
/*
html {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}
*/
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"@footgun/math-gap": "https://cdn.skypack.dev/@footgun/math-gap",
"clamp": "https://cdn.skypack.dev/clamp",
"gl-matrix": "https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/gl-matrix.js",
"point-to-segment-2d": "https:/cdn.skypack.dev/point-to-segment-2d",
"segseg": "https://cdn.skypack.dev/segseg"
}
}
</script>
<script type="module">
import aabbAabbOverlap from './figures/aabb-aabb-overlap.js'
import aabbAabbSweep1 from './figures/aabb-aabb-sweep1.js'
import aabbPoint from './figures/aabb-point-overlap.js'
import aabbSeg from './figures/aabb-segment-overlap.js'
import aabbAabbSweep2 from './figures/aabb-aabb-sweep2.js'
import aabbSegmentSweep1 from './figures/aabb-segment-sweep1.js'
import aabbSegmentsSweep1Indexed from './figures/aabb-segments-sweep1-indexed.js'
import conePointOverlap from './figures/cone-point-overlap.js'
import rayPlaneDistance from './figures/ray-plane-distance.js'
import raySphereOverlap from './figures/ray-sphere-overlap.js'
import segmentPointOverlap from './figures/segment-point-overlap.js'
import segmentSegmentOverlap from './figures/segment-segment-overlap.js'
import segmentSphereOverlap from './figures/segment-sphere-overlap.js'
import segmentsSegmentOverlap from './figures/segments-segment-overlap.js'
import segmentsSphereSweep1 from './figures/segments-sphere-sweep1.js'
import sphereSphereOverlap from './figures/sphere-sphere-overlap.js'
import triPointOverlap from './figures/triangle-point-overlap.js'
function createExample (impl) {
const canvas = document.createElement('canvas')
if (!canvas)
return
document.body.appendChild(canvas)
const width = (canvas.width = 400)
const height = (canvas.height = 180)
const context = canvas.getContext('2d')
if (!context)
return
context.translate(0.5, 0.5)
return impl.init(context, width, height)
}
let last = 0
function animate (t) {
const dt = (t - (last || t)) / 1000
last = t
aabbPoint.draw(example, dt)
aabbSeg.draw(example2, dt)
aabbAabbOverlap.draw(example3, dt)
aabbAabbSweep1.draw(example4, dt)
aabbAabbSweep2.draw(example5, dt)
segmentPointOverlap.draw(example6, dt)
segmentSegmentOverlap.draw(example7, dt)
segmentsSegmentOverlap.draw(example8, dt)
segmentsSphereSweep1.draw(example9, dt)
rayPlaneDistance.draw(example10, dt)
sphereSphereOverlap.draw(example11, dt)
triPointOverlap.draw(example12, dt)
aabbSegmentSweep1.draw(example13, dt)
aabbSegmentsSweep1Indexed.draw(example14, dt)
conePointOverlap.draw(example15, dt)
raySphereOverlap.draw(example16, dt)
segmentSphereOverlap.draw(example17, dt)
requestAnimationFrame(animate)
}
const example = createExample(aabbPoint)
const example2 = createExample(aabbSeg)
const example3 = createExample(aabbAabbOverlap)
const example4 = createExample(aabbAabbSweep1)
const example5 = createExample(aabbAabbSweep2)
const example6 = createExample(segmentPointOverlap)
const example7 = createExample(segmentSegmentOverlap)
const example8 = createExample(segmentsSegmentOverlap)
const example9 = createExample(segmentsSphereSweep1)
const example10 = createExample(rayPlaneDistance)
const example11 = createExample(sphereSphereOverlap)
const example12 = createExample(triPointOverlap)
const example13 = createExample(aabbSegmentSweep1)
const example14 = createExample(aabbSegmentsSweep1Indexed)
const example15 = createExample(conePointOverlap)
const example16 = createExample(raySphereOverlap)
const example17 = createExample(segmentSphereOverlap)
requestAnimationFrame(animate)
</script>
</body>
</html>