-
Notifications
You must be signed in to change notification settings - Fork 0
/
figures.html
126 lines (101 loc) · 3.96 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
<!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="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/tri-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>