-
Notifications
You must be signed in to change notification settings - Fork 0
/
sortingVisualizer.html
92 lines (89 loc) · 4.17 KB
/
sortingVisualizer.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Visualizer</title>
<link rel="stylesheet" href="CSS/sortingVisualizer.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<body>
<div class="navButtons">
<a href="index.html"><i class="lnr lnr-home"></i></a>
<a href="index.html#aboutContainer"><i class="lnr lnr-user"></i></a>
<a href="showcase.html"><i class="lnr lnr-briefcase"></i></a>
</div>
<div class="navControl">
<!-- Logo -->
<div class="logo">
<a href="index.html"><img src="MISC/logo.png" style="width:150px; height:150px;"></img></a>
</div>
<select id="inputState" class="button algoSelector">
<option selected>Sorting Algorithm</option>
<option>Bubble Sort</option>
<option>Insertion Sort</option>
<option>Selection Sort</option>
<option>Quick Sort</option>
</select>
<button type="button" class="button" id="randButton" onclick="randomize()">
Randomize
</button>
<button type="button" class="button" id="pauseButton" onclick="togglePlay()">
Pause
</button>
</div>
<div class="barContainer"></div>
<div id="topoBG"></div>
<!-- Bootstrap modal notification (Popup tutorial on page load for how to use audio reaction) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Quick tutorial</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Speed:</strong><br>
Hover over the bars to control the speed of the
algorithm and animation. Moving your mouse to the
right will decrease the speed and moving to the left will increase it.<br>
<i>Suggestion:</i> Move your mouse to the center (horizontally) of the bars. From there,
move left or right to change the speed.
<strong>Randomize:</strong><br>
Resets the size (width) of
the bars and shuffles their heights.<br>
<strong>Pause:</strong><br>
Press to play and press again to pause. <br>
<i>Note:</i> You can pause and switch algorithms halfway
through a sort.
</div>
</div>
</div>
</div>
<!-- VantaJS plugin https://www.vantajs.com/ -->
<script src="JS/p5.min.js"></script>
<script src="JS/vanta.topology.min.js"></script>
<script>
VANTA.TOPOLOGY({
el: "#topoBG",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xcf70ba,
backgroundColor: 0x1f1f24,
})
</script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="JS/sorting.js"></script>
</body>
</html>