forked from thedufer/VisualSort
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
132 lines (132 loc) · 7.07 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
<html>
<head>
<title>Sorting Visualizer</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="coffee-script.js"></script>
<script type="text/coffeescript" src="VisualArray.coffee"></script>
<script type="text/coffeescript" src="graphs.coffee"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
</head>
<body>
<a href="http://github.com/thedufer/VisualSort"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
<div id="background">
<div id="wrapper">
<div id="header">
<h1>Sorting Visualizer</h1>
</div>
<canvas id="js-canvas" width="800" height="200">Looks like your browser doesn't support the canvas element. Try something newer, like <a href="http://www.google.com/chrome">Google Chrome</a>.</canvas>
<br />
<form id="js-options">
<div id="show-more-options">show/hide more options</div>
<label for="js-length">Length:</label>
<input type="text" id="js-length" value="100" />
<select id="js-state">
<option value="random" selected>Random</option>
<option value="sort">Sorted</option>
<option value="reverse">Reverse Sorted</option>
<option value="custom">Custom...</option>
</select>
<button id="js-set-values">Set</button>
<fieldset id="custom-values" class="code-example">
<legend>Custom values</legend>
Use coffeescript to declare the new values. Examples : <code>[4,7,2]</code>, <code>[-10..20]</code>, <code>[50..-30].concat [70..75]</code>
<textarea id="js-custom-values" class="values" rows="10"></textarea>
</fieldset>
<br />
<label for="js-speed">Speed:</label>
<input type="range" id="js-speed" min="10" value="50" max="500" step="10" />
<label for="js-quick-highlight">Quick Highlight:</label>
<input type="checkbox" id="js-quick-highlight" checked />
<label for="js-quick-compare">Quick Compare:</label>
<input type="checkbox" id="js-quick-compare" checked />
<div id="more-options">
<label for="js-normalize-bars">Normalize bars length:</label>
<input type="checkbox" id="js-normalize-bars" checked />
<br />
<label for="js-always-show-level-zero">Always show the level 0 :</label>
<input type="checkbox" id="js-always-show-level-zero" />
</div>
</form>
<div id="right-bar">
<div id="js-error"></div>
# of swaps: <span id="js-swaps"></span>
<br />
# of inserts: <span id="js-inserts"></span>
<br />
# of shifts per insert: <span id="js-shifts"></span>
<br />
# of comparisons: <span id="js-compares"></span>
<div id="js-result"></div>
</div>
<div id="main">
<textarea id="js-code" class="code" rows="20"></textarea>
</div>
<br />
<div id="footer">
<div id="footer-buttons">
<button id="js-run" class="footer-button">Run That Code!</button>
<button id="js-stop" class="footer-button">Stop</button>
<button class="js-show-sort footer-button" id="clear">Clear</button>
</div>
<br />
Prewritten sorts:
<button class="js-show-sort" id="bubble">Bubble</button>
<button class="js-show-sort" id="select">Selection</button>
<button class="js-show-sort" id="insert">Insertion</button>
<button class="js-show-sort" id="quick">Quick</button>
<button class="js-show-sort" id="msbradix">MSB Radix</button>
<button class="js-show-sort" id="lsbradix">LSB Radix</button>
<button class="js-show-sort" id="merge">Merge</button>
<button class="js-show-sort" id="heap">Heap</button>
<div id="description-wrapper">
<div id="description">
Write some code in <a href="http://jashkenas.github.com/coffee-script/">CoffeeScript</a> and hit run. The array will show what's going on.
<br />
<br />
Use the following methods on <span class="code">VA</span>:
<br />
<ul>
<li><span class="code">swap(i, j)</span>: Swap the values at indices i and j.</li>
<li><span class="code">insert(i, j)</span>: Move the value at index i to index j and slide the elements in between to fill.</li>
<li><span class="code">get(i)</span>: Return the value of the element at i.</li>
<li><span class="code">lt(i, j)</span>: Return the result of <span class="code">VA.get(i) < VA.get(j)</span>.</li>
<li><span class="code">lte(i, j)</span>: Return the result of <span class="code">VA.get(i) <= VA.get(j)</span>.</li>
<li><span class="code">gt(i, j)</span>: Return the result of <span class="code">VA.get(i) > VA.get(j)</span>.</li>
<li><span class="code">gte(i, j)</span>: Return the result of <span class="code">VA.get(i) >= VA.get(j)</span>.</li>
<li><span class="code">eq(i, j)</span>: Return the result of <span class="code">VA.get(i) == VA.get(j)</span>.</li>
<li><span class="code">neq(i, j)</span>: Return the result of <span class="code">VA.get(i) != VA.get(j)</span>.</li>
<li><span class="code">highlight(i)</span>: Highlight the i<sup>th</sup> element.</li>
<li><span class="code">highlight([i<sub>1</sub>, i<sub>2</sub>...i<sub>n</sub>])</span>: Highlight the i<sub>1</sub><sup>th</sup>, i<sub>2</sub><sup>th</sup>... i<sub>n</sub><sup>th</sup> elements.</li>
<li><span class="code">persistHighlight(i)</span>: Highlight the i<sup>th</sup> element until the next <span class="code">persistHighlight</span> call.</li>
<li><span class="code">persistHighlight([i<sub>1</sub>, i<sub>2</sub>...i<sub>n</sub>])</span>: Highlight the i<sub>1</sub><sup>th</sup>, i<sub>2</sub><sup>th</sup>... i<sub>n</sub><sup>th</sup> elements until the next <span class="code">persistHighlight</span> call.</li>
<li><span class="code">locals</span>: A map (initially empty) where you can store primitives that you want to see as the sort animates. See bubble sort for an example.</li>
</ul>
<br />
Try out the prewritten sorts for syntax examples.
<br />
<br />
Notes:
<br />
<ul>
<li>
Nothing will display if there is an infinite loop.
</li>
<li>
The "Stop" button won't save the state of your code, but will save the state of the array.
</li>
<li>
The items are integers in the range of 0 to 2^10-1. There may be duplicates.
</li>
</ul>
<br />
<br />
Email me at <span class="code">thedufer at gmail dot com</span> with comments/questions!
</div>
</div>
</div>
</div>
</div>
</body>
</html>