-
Notifications
You must be signed in to change notification settings - Fork 0
/
heapsortDemo.html
73 lines (59 loc) · 2.28 KB
/
heapsortDemo.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heapsort</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="heapsortDemo.js"></script>
<link rel="stylesheet" href="heapsortDemo.css">
</head>
<body id="all">
<div id="intro">
<h1>Heapsort algorithm demonstration</h1>
<p>I present here a Javascript only demonstration of Heapsort. You can change the array size from 8 to 15 elements. Then you can randomize its content. The animation speed can also be changed.
</p>
<p>At each animation step the nodes that are swapped are highlighted in blue. The nodes that are already outside of the current heap are highlighted in gray (they have achieved their final value).
</p>
</div>
<div id="display">
<canvas id="canvas" width="620" height="600">
Your browser does not support HTML 5 Canvas
</canvas>
<a id=animanc></a>
<footer>
<br><br>
Dominique Ubersfeld, Cachan, France
</footer>
</div>
<div id="controls">
<div id="change">
<p>Chose the number of elements to sort, 8 by default</p>
<form name="elements" id="numel">
<input type="radio" name="number" value="8" checked> 8<br>
<input type="radio" name="number" value="9"> 9<br>
<input type="radio" name="number" value="10"> 10<br>
<input type="radio" name="number" value="11"> 11<br>
<input type="radio" name="number" value="12"> 12<br>
<input type="radio" name="number" value="13"> 13<br>
<input type="radio" name="number" value="14"> 14<br>
<input type="radio" name="number" value="15"> 15<br>
<input type="submit" name="submit-btn" value="Change">
</form>
</div>
<div id="randomize">
<p>Click here to randomize the values to be sorted</p>
<form name="initialize" id="initelem">
<input type="submit" name="randomize-btn" value="Randomize">
</form>
</div>
<div id="anim">
<p>Start animation of the Heapsort algorithm</p>
<form id="stanim">
<input type="submit" name="stanim-btn" value="Start">
</form>
<label for="animSpeed">Animation speed</label>
<input type="range" id="animSpeed" min="5" max="100" step="5" value="20">
</div>
</div>
</body>
</html>