-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgraph.html
More file actions
246 lines (229 loc) · 10.5 KB
/
graph.html
File metadata and controls
246 lines (229 loc) · 10.5 KB
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!Doctype html>
<html>
<head>
</head>
<body>
<div>
<button id='ref' onclick= 'ref()'>Shuffle</button>
<button id='start' onclick= 'bubble(1)'>Bubble Sort</button>
<button id='start' onclick= 'bubble(2)'>Bubble Sort in Reverse</button>
<button id='select' onclick= 'select(1)'>Selection Sort</button>
<button id='select' onclick= 'select(2)'>Selection Sort in Reverse</button>
<canvas id="myCanvas" width = '1520' height='400' style='border: 2px solid silver;'/>
</div>
<div class='row'>
<div class='col' id = 'display'><label id='lblPass'>0 </label><label> Passes </label><label> | </label><label id='lblDisplay'>0 </label><label> Swaps</label></div>
</div>
<script>
var arr = []; //create empty array
var value =1;
for(var i = 0; i<= 100; i++){ //initialize the array
arr.push(value);
value+=1;
}
function draw(array, color) {
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var width = 13;
var currX = 6;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < array.length; i++){
if(i == color){
ctx.fillStyle = 'red';
}else{
ctx.fillStyle = 'blue';
}
var h = array[i];
ctx.font = 'bold 10px serif';
ctx.fillText(array[i], currX, canvas.height - (h + 16) );
ctx.fillRect(currX, canvas.height - (h+12), width, h);
ctx.fillText(i+1, currX, canvas.height - (2) );
currX += width + 2;
}
}
}
function* bubbleSort(array, b) { // * is magic
document.getElementById("lblPass").innerHTML = 0; // Reset the pass label
document.getElementById("lblDisplay").innerHTML = 0;//Reset the swap label
var swapped;
var step = 0;
var pass = 1;
if(b==2){
do{
swapped = false;
document.getElementById("lblPass").innerHTML = pass;// display the number passes made
for (var i = array.length; i >=0; i--) {//bobble sort in revarse
if (array[i] < array[i + 1]) {
var temp = array[i];
array[i] = array[i + 1];
array[i + 1] = temp;
swapped = true;
step++;
draw(array, i);
document.getElementById("lblDisplay").innerHTML = step;
yield swapped; // pause here
}
}
pass++
} while (swapped);
}else{
do{
swapped = false;
document.getElementById("lblPass").innerHTML = pass;// display the number passes made
for (var i = 0; i < array.length - 1; i++) {
if (array[i] > array[i + 1]) {
var temp = array[i];
array[i] = array[i + 1];
array[i + 1] = temp;
swapped = true;
step++;
draw(array, i);
document.getElementById("lblDisplay").innerHTML = step;
yield swapped; // pause here
}
}
pass++
} while (swapped);
}
}
function* selectSortRev(array){//==========================================Selection Sort function to Sort in revarse
document.getElementById("lblPass").innerHTML = 0; // Reset the pass label
document.getElementById("lblDisplay").innerHTML = 0;//Reset the swap label
var len = array.length;
var min;
var i = len;
var pass = 0;
var step =0;
do{
//set minimum to this position
min = i;
document.getElementById("lblPass").innerHTML = pass;
//check the rest of the array to see if anything is smaller
for (j=i-1; j >=0; j--){
if (array[j] < array[min]){
min = j;
}
}
//if the minimum isn't in the position, swap it
if (i != min){
var temp = array[i];
array[i] = array[min];
array[min] = temp;
step++;
document.getElementById("lblDisplay").innerHTML = step;
}
draw(array, i);
i--; pass++;
yield i; // pause here
}while(i >= 0);
}
function* selectSort(array){//==========================================Selection Sort function
document.getElementById("lblPass").innerHTML = 0; // Reset the pass label
document.getElementById("lblDisplay").innerHTML = 0;//Reset the swap label
var len = array.length;
var min;
var i = 0;
var step =0;
do{
//set minimum to this position
min = i;
document.getElementById("lblPass").innerHTML = i+1;
//check the rest of the array to see if anything is smaller
for (j=i+1; j < len; j++){
if (array[j] < array[min]){
min = j;
}
}
//if the minimum isn't in the position, swap it
if (i != min){
var temp = array[i];
array[i] = array[min];
array[min] = temp;
step++;
document.getElementById("lblDisplay").innerHTML = step;
}
draw(array, i);
i++;
yield i; // pause here
}while(i < len);
}
function bubble(option){//======================================================Bubble sort call
canvas = document.getElementById('myCanvas');
var sort = bubbleSort(arr, option);
// an anim function triggered every 60th of a second
function anim(ar){
requestAnimationFrame(anim);
//draw(ar);
sort.next(); // call next iteration of the bubbleSort function
}
setTimeout(anim(arr), 20000);
}
function ref(){ //Reshuffle the array with this function call
shuffle(arr);
draw(arr, 0);
}
function select(option){//=====================================================Selection sort call
if(option == 2){
canvas = document.getElementById('myCanvas');
var sort = selectSortRev(arr);//sort in revarse if option is 1
// an anim function triggered every 60th of a second
function anim(ar){
requestAnimationFrame(anim);
//draw(ar);
sort.next(); // call next iteration of the bubbleSort function
}
setTimeout(anim(arr), 20000);
}else{
canvas = document.getElementById('myCanvas');
var sort = selectSort(arr);
// an anim function triggered every 60th of a second
function anim(ar){
requestAnimationFrame(anim);
//draw(ar);
sort.next(); // call next iteration of the bubbleSort function
}
setTimeout(anim(arr), 20000);
}
}
function shuffle(array) {//shuffles the array
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
window.onload = function(){
canvas = document.getElementById('myCanvas');
shuffle(arr);
draw(arr, 0);
}
</script>
<style type="text/css">
button{
background: #9999ff;
color: white;
font-size: 14px;
font-style: bold;
padding: 5px;
text-align: center;
}
#display{
width: 20%;
margin: auto;
background: #9999ff;
font-size: 28px;
font-style: bold;
padding: 2px;
text-align: center;
border: 4px solid gray
}
</style>
</body>
</html>