-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
136 lines (124 loc) · 5.56 KB
/
index.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
<html>
<head>
<title>Canvas demo</title>
<script src="build/Utils.js"></script>
<script src="build/Vec2.js"></script>
<script src="build/Raycast.js"></script>
<script src="build/Vertex.js"></script>
<script src="build/Coordinate.js"></script>
<script src="build/Convex.js"></script>
<script src="build/Circle.js"></script>
<script src="build/Capsule.js"></script>
<script src="build/Polygon.js"></script>
<script src="build/SimplexVertex.js"></script>
<script src="build/Simplex.js"></script>
<script src="build/Framework.js"></script>
<script src="build/Algorithms.js"></script>
<script src="build/ShowCase_GJK.js"></script>
<script src="build/ShowCase_EPA.js"></script>
<script src="build/ShowCase_AddConvex.js"></script>
<script src="build/ShowCase_MinkowskiDiff.js"></script>
<script src="build/ShowCase_GJKRaycast.js"></script>
<script src="build/ShowCase_Paint.js"></script>
<script src="build/main.js"></script>
</head>
<body>
<div style="width:2400">
<canvas id="canvas" width="1600" height="1600"
style="border: 1px solid black; float: left;">
</canvas>
<div id="buttons" style="margin-top: 400;float: left;">
<button id="ClearAllConvex">Clear All Convex Objects</button>
<br/>
<select id="ConvexType">
<option value ="1">Polygon</option>
<option value ="2">Circle</option>
<option value ="3">Capsule</option>
</select>
<br/>
<button id="BeginAddNewConvex" >Begin Add Convex</button>
<button id="CancelAddNewConvex" disabled>Cancel Add Convex</button>
<button id="FinishAddNewConvex" disabled>Finish Add Convex</button>
<br/>
<br/>
<button id="MinkowskiDiffToggle">Full Minkowski Difference Toggle</button>
<br/>
<br/>
<button id="GJKStep">GJK Step</button>
<button id="GJKUndoStep">GJK Undo Step</button>
<br/>
<button id="GJKClear">GJK Clear</button>
<br/>
<br/>
<button id="EPAStep">EPA Step</button>
<button id="EPAUndoStep">EPA Undo Step</button>
<br/>
<button id="EPAClear">EPA Clear</button>
<br/>
<button id="EPAPushOutToggle">EPA Push Out Toggle</button>
<br/>
<br/>
<button id="GJKRaycastStep">Raycast Step</button>
<button id="GJKRaycastUndoStep">Raycast Undo</button>
<br/>
<button id="GJKRaycastClear">Raycast Clear</button>
<br/>
<button id="GJKRaycastRuntime">Raycast Runtime Toggle</button>
<h4>Paint</h4>
<div id="strokeColors">
<span>stroke color</span>
<button id="" style="background-color: red;"> _ </button>
<button id="" style="background-color:royalblue;"> _ </button>
<button id="" style="background-color:orange;"> _ </button>
<button id="" style="background-color:black "> _ </button>
<button id="" style="background-color:green"> _ </button>
</div>
<div id="fillColors">
<span>fill color</span>
<button id="" style="background-color:#00000000;"> _ </button>
<button id="" style="background-color: red;"> _ </button>
<button id="" style="background-color:royalblue;"> _ </button>
<button id="" style="background-color:orange;"> _ </button>
<button id="" style="background-color:black "> _ </button>
<button id="" style="background-color:green"> _ </button>
</div>
<br/>
<div>
<button id="lineThick">Line Width Thick</button>
<button id="lineMedium">Line Width Medium</button>
<button id="lineThin">Line Width Thin</button>
</div>
<br/>
<div>
<button id="SolidLine">Solid Line</button>
<button id="DashLine">Dash Line</button>
</div>
<br/>
<div>
<button id="disablePaint">Disable Paint Brush</button>
<button id="drawLine">Draw Line</button>
<button id="drawCircle">Draw Circle</button>
<button id="drawRectangle">Draw Rectangle</button>
<button id="drawArrow">Draw Arrow</button>
</div>
<br/>
<div>
<button id="undoPaint">Undo Paint</button>
<button id="clearPaint">Clear Paint</button>
</div>
</div>
<div id="informations" style="float: left;">
<h4>How to add Convex:</h4>
<div style="text-indent: 2em;">
Click "BeginAddConvex" button, add click your left mouse button to add vertices of the new convex object. You can also click right mouse button to remove the last vertex you've added.
</div>
<div style="text-indent: 2em;">
Click "CancelAddNewConvex" button to cancel current "Adding Convex Object" action, all the vertices you've just added for this convex object will be removed.
</div>
<div style="text-indent: 2em;">
Click "FinishAddConvex" button will add the convex object to the coordinate and you can use it to test the collision detecting.
</div>
</div>
</div>
</body>
</html>