-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (150 loc) · 8.45 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convex Polygon Collisions</title>
<link rel="icon" href="assets/icon.svg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script defer src="script.js"></script>
<canvas id="gc"></canvas>
<img style="display:none" id="spawn" src="assets/spawn.png">
<div id="algoText">
<h1 id="algoText-algo"></h1>
</div>
<div id="buttons">
<button data-modal-target="#modal-settings" id="settings" class="button" onclick="resetSettings()">
<img class="icon" id="settings-icon" src="assets/gear.svg"/>
</button>
<button data-modal-target="#modal-tutorial" id="tutorial" class="button" onclick="resetPage()">
<img class="icon" id="tutorial-icon" src="assets/tutorial.svg">
</button>
</div>
<div id="inputSection">
<button id="changeInput" onclick="toggleInput()">
<img id="toggle-icon" src="assets/toggle.svg">
</button>
<div id="inputSection-page1">
<div id="gridLayout">
<div id="sides-container">
<label id="sides-label" for="sides-input">Sides</label>
<div id="sides-input">
<span id="sides-next"></span>
<span id="sides-prev"></span>
<div id="sides-value">3</div>
</div>
</div>
<div id="pushable-container">
<div id="pushable-div">
<label id="pushable-label1" for="pushable">Pushable</label>
<input id="pushable" type="checkbox" checked>
<label id="pushable-label" for="pushable"></label>
</div>
</div>
</div>
<div id="submit-container">
<button id="submit" class="button" type="button" onclick="addPolygon()">Create Polygon</button>
</div>
</div>
<div id="inputSection-page2" class="hidden">
<button id="inputSection-page2-btnUp">A</button>
<button id="inputSection-page2-btnLeft"><</button>
<button id="inputSection-page2-btnDown">V</button>
<button id="inputSection-page2-btnRight">></button>
</div>
</div>
<div class="modal modal-hide" id="modal-settings">
<div class="modal-header">
<div class="modal-title">Settings</div>
<button data-close-button class="modal-closeButton">×</button>
</div>
<div id="modal-body-settings">
<div id="modal-body-settings-algorithm">
<h1 class="modal-body-title">Algorithm</h1>
<input type="radio" name="algo" id="select-sat" checked>
<label for="select-sat">Separating Axis Theorem</label><br>
<input type="radio" name="algo" id="select-diag">
<label for="select-diag">Diagonals</label>
</div><br>
<div id="modal-body-settings-movement">
<h1 class="modal-body-title">Movement</h1>
<label for="moveSpeed">Velocity</label>
<div class="slider-container">
<input class="slider" type="range" name="moveSpeed" id="select-moveSpeed" min="50" max="350" value="200">
</div>
<label for="moveSpeed"><span id="moveSpeedValue"></span> px per sec</label><br>
<label for="rotSpeed">Rotation</label>
<div class="slider-container">
<input class="slider" type="range" name="rotSpeed" id="select-rotSpeed" min="100" max="400" value="260">
</div>
<label for="moveSpeed"><span id="rotSpeedValue"></span> deg per sec</label>
</div><br>
</div>
<div id="modal-settings-footer">
<button id="defaultButton" class="button" onclick="defaultSettings()">Reset</button>
<button id="saveButton" class="button" onclick="saveSettings()">Save</button>
</div>
</div>
<div class="modal modal-hide" id="modal-tutorial">
<div class="modal-header">
<div class="modal-title">Tutorial</div>
<button data-close-button class="modal-closeButton">×</button>
</div>
<div id="modal-body-tutorial-container">
<div id="modal-body-tutorial">
<div id="tutorial-page1">
<h1>Welcome to Convex Polygon Collisions</h1>
<h2>This demonstration seeks to showcase the behaviours of two algorithms; Separating Axis Theorem and Diagonals.</h2>
<h2>The user experience is optimized for your computer, but mobile support also exists.</h2>
<h2>If you want to skip the tutorial, click the "Skip" button below. Otherwise, click on the buttons in the bottom right or use the arrow keys on your keyboard.</h2>
<img src="assets/tutorial1.svg" class="tutorial-image">
</div>
<div id="tutorial-page2">
<h1>Creating Polygons</h1>
<h2>Create a new polygon by inputting its amount of sides and choosing if it should be pushable before clicking "Create Polygon".</h2>
<h2>The values on the input section are used when creating new polygons, not to modify existing polygons.</h2>
<h2>If existing polygons would collide with the new polygon, those polygons will blink red and no new polygon is created.</h2>
<img src="assets/tutorial2.svg" class="tutorial-image">
</div>
<div id="tutorial-page3">
<h1>Controlling the Polygons</h1>
<h2>The purpose is to create multiple polygons in order to drive them into each other and observe how the collisions are handled.</h2>
<h2>Click on a polygon to select it and you can then move the selected polygon by pressing W, A, S, or D on your keyboard.</h2>
<img src="assets/tutorial3.svg" class="tutorial-image">
</div>
<div id="tutorial-page4">
<h1>Configure Your Experience</h1>
<h2>Choose which algorithm should be used by opening the settings.</h2>
<h2>You may also change the movement speed and rotation speed of the polygons.</h2>
<h2>Your settings are maintained between sessions by storing them in Local Storage. Keep in mind that unless you save the settings, they will be discarded.</h2>
<img src="assets/tutorial4.svg" class="tutorial-image">
</div>
<div id="tutorial-page5">
<h1>Additional Controls</h1>
<h2>You may zoom in and out (CTRL + Scroll) to change the scale of the viewport.</h2>
<h2>Change whether or not the selected polygon should be pushable by pressing P on your keyboard.</h2>
<h2>Close a pop-up (like this one) by clicking outside it or by pressing ESC. Pressing ESC also opens the "Settings" modal if no other modal is open.</h2>
<h2>Save the settings by pressing ENTER.</h2>
<img src="assets/tutorial5.svg" class="tutorial-image">
</div>
<div id="tutorial-page6">
<h1>That's It!</h1>
<h2>I hope you will enjoy this project as much as I did making it!</h2>
<h2>For the source code and more information regarding the algorithms and this project, visit <a href="https://github.com/alexarne/Convex-Polygon-Collisions">my GitHub</a>.</h2>
</div>
</div>
</div>
<div id="modal-tutorial-footer">
<button data-close-button id="skipButton" class="button">Skip</button>
<div id="tutorial-pageButtons">
<button id="prevButton" class="button" onclick="prevPage()"><</button>
<button id="nextButton" class="button" onclick="nextPage()">></button>
</div>
</div>
</div>
<div class="" id="modal-overlay"></div>
</body>
</html>