-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (113 loc) · 6.2 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
<html>
<head>
<script src="delunator.js"></script>
<script src="script.js"></script>
<style>
code {
background-color: powderblue;
padding: 0px 5px;
}
.mobile-action-button {
margin: 5px;
background-color: powderblue;
padding: 5px;
border-radius: 5px;
font-size: 20px;
min-width: 400px;
}
</style>
</head>
<body>
<div>
<canvas id="main" style="position:absolute"></canvas>
<div id="stats" style="background-color: rgba(255, 250, 250, 0.9); color:slategray; z-index: 9999999; position:absolute; border-radius: 5px; right: 5px; display: none">
<ul style="padding: 0px; list-style-type: none; margin: 3px 5px;">
<li><code><span ># of Dots: </span><span id="numberOfDots"></span></code></li>
<li><code><span >FPS: </span><span id="fps"></span></code></li>
</ul>
</div>
<div id="help"
style="background-color: rgba(255, 250, 250, 0.9); color:slategray; z-index: 9999999; position:absolute; border-radius: 5px;">
<article style="padding:10px;">
<span style="font-style: italic; text-align: right; font-size:12px; float:right;">Right-click to hide this</span>
<h3>
<center>Hotkeys help</center>
</h3>
<h4>General</h4>
<ul>
<li><code>Spacebar</code> = add new point</li>
<li><code>Enter</code> = pop point</li>
<li><code>S</code> = show stats</li>
</ul>
<h4>Rendering settings</h4>
<ul>
<li><code>L</code> = toggle lines</li>
<li><code>T</code> = toggle triangles</li>
<li><code>P</code> = toggle points</li>
</ul>
<h4>Color</h4>
<ul>
<li><code>R</code> = toggle red channel</li>
<li><code>G</code> = toggle green channel</li>
<li><code>B</code> = toggle blue channel</li>
</ul>
<h4>Color modes</h4>
<ul>
<li><code>1</code> = gradient colors</li>
<li><code>2</code> = random colors</li>
<li><code>3</code> = gradient animated circles</li>
</ul>
<h4>Animation:</h4>
<ul>
<li><code>A</code> = toggle animation</li>
<li><code>{</code> (Left bracket) = increase trail time animation</li>
<li><code>}</code> (Right bracket) = decrease trail time animation</li>
<li><code>+</code> = increase points speed</li>
<li><code>-</code> = decrease points speed</li>
</ul>
</article>
</div>
<div id="help-mobile"
style="background-color: rgba(255, 250, 250, 0.9); color:slategray; z-index: 9999999; position:absolute; border-radius: 5px;">
<article style="padding:10px;">
<span style="font-style: italic; text-align: right; font-size:12px; float:right;">Double-tap to hide this</span>
<h3 style="font-size: 32px;">
<center>Mobile Hotkeys help</center>
</h3>
<h4 style="font-size: 24px;">General</h4>
<ul>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(addNewPoints)" ontouchend="mouseupfunc()">Add new point</button></li>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(popPoints)" ontouchend="mouseupfunc()">Pop point</button></li>
<li><button class="mobile-action-button" onclick="toggleStatsWindow()">Show stats</button></li>
</ul>
<h4 style="font-size: 24px;">Rendering settings</h4>
<ul>
<li><button class="mobile-action-button" onclick="toggleLines()">Toggle lines</button></li>
<li><button class="mobile-action-button" onclick="toggleTriangles()">Toggle triangles</button></li>
<li><button class="mobile-action-button" onclick="togglePoints()">Toggle points</button></li>
</ul>
<h4 style="font-size: 24px;">Color</h4>
<ul>
<li><button class="mobile-action-button" onclick="toggleRed()">Toggle red channel</button></li>
<li><button class="mobile-action-button" onclick="toggleGreen()">Toggle green channel</button></li>
<li><button class="mobile-action-button" onclick="toggleBlue()">Toggle blue channel</button></li>
</ul>
<h4 style="font-size: 24px;">Color modes</h4>
<ul>
<li><button class="mobile-action-button" onclick="toggleGradientMode()">Gradient colors</button></li>
<li><button class="mobile-action-button" onclick="toggleRandomMode()">Random colors</button></li>
<li><button class="mobile-action-button" onclick="toggleCirclesMode()">Gradient animated circles</button></li>
</ul>
<h4 style="font-size: 24px;">Animation:</h4>
<ul>
<li><button class="mobile-action-button" onclick="toggleAnimation()">Toggle animation</button></li>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(decreaseTrail)" ontouchend="mouseupTrail()">Increase points trail</button></li>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(increaseTrail)" ontouchend="mouseupTrail()">Decrease points trail</button></li>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(increaseSpeed)" ontouchend="mouseupfunc()">Increase points speed</button></li>
<li><button class="mobile-action-button" ontouchstart="mousedownfunc(decreaseSpeed)" ontouchend="mouseupfunc()">Decrease points speed</button></li>
</ul>
</article>
</div>
</div>
</body>
</html>