blob: 7dc466d89ca1916c41e7c0a696655bb092df47d7 (
plain) (
blame)
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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chrisoft::Sound of Sorting</title>
<link rel="icon" href="../favicon.png">
<script type="text/javascript" src="main.js"></script>
<style>
button{
border:none;
color:white;
padding:0.5em 2em;
text-align:center;
background-color:#44AA44;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
button:hover{
background-color:#66CC66;
}
input[type=range]{
-webkit-appearance:none;
}
input[type=range]:focus{
outline:none;
}
input[type=range]::-webkit-slider-runnable-track{
width:100%;
height:8.4px;
animate:0.2s;
box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background:#44AA44;
border-radius:1.3px;
border:0.2px solid #010101;
}
input[type=range]::-moz-range-track{
width:100%;
height:8.4px;
animate:0.2s;
box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background:#44AA44;
border-radius:1.3px;
border:0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb{
box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border:1px solid #000000;
height:24px;
width:12px;
border-radius:1px;
background:#ffffff;
-webkit-appearance:none;
margin-top:-8px;
}
input[type=range]::-moz-range-thumb{
box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border:1px solid #000000;
height:24px;
width:12px;
border-radius:1px;
background:#ffffff;
-webkit-appearance:none;
margin-top:-8px;
}
input[type=range]:focus::-webkit-slider-runnable-track{
background:#66CC66;
}
input[type=range]:focus::-moz-range-track{
background:#66CC66;
}
select{
background-color:#EEE;
border:1px #AAA solid;
padding:0.2em 0.2em;
}
</style>
</head>
<body onload="init()">
<div style="text-align:center;">
<canvas id="cvs" width="1600" height="600"></canvas><br>
<form>
<label for="sel">Algorithm</label>
<select id="sel">
<option value="BubbleSort">Bubble Sort</option>
<option value="SelectSort">Selection Sort</option>
<option value="InsertSort">Insertion Sort</option>
<option value="ShakerSort">Cocktail Shaker Sort</option>
<option value="CombSort">Comb Sort</option>
<option value="ShellSort">Shell Sort</option>
<option value="QuickSort">Quick Sort</option>
<option value="MergeSort">Merge Sort</option>
<option value="HeapSort">Heap Sort</option>
<option value="LSDRadixSort">LSD Radix Sort</option>
<option value="MSDRadixSort">MSD Radix Sort</option>
</select>
<label for="data">Data to sort</label>
<select id="data">
<option value="rnd">Random Shuffle</option>
<option value="asc">Ascending</option>
<option value="dec">Descending</option>
<option value="cub">Shuffled Cubic</option>
<option value="qui">Shuffled Quintic</option>
</select>
<br>
<div style="margin-top:.5em;margin-bottom:.1em;">
<button type="button" onclick="h.shuffle();">Reset</button>
<button type="button" onclick="h.execute();">Run</button>
<button type="button" onclick="h.step();">Step</button>
</div>
<br>
<label for="count">Array size:</label>
<input type="range" id="count" min="1" max="1024" value="100" step="1">
<span id="lbcnt">100</span>
<label for="spd">Delay between steps:</label>
<input type="range" id="spd" min="5" max="200" value="20" step="5">
<span id="lbspd">20ms</span>
</form>
<p>
Read Access: <span id="racc"></span><br>
Write Access: <span id="wacc"></span>
</p>
<form>
<fieldset id="optw" style="border:none;">
</fieldset>
<form>
</div>
</body>
|
