The-Tysonator
/
Bubble-Sort-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
main
Tylan Tyson 2 years ago
commit 2456f0d0aa
3 changed files with 237 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -0,0 +1 @@
.DS_STORE

103
canvas.js
Unescape Escape View File

@ -0,0 +1,103 @@
// Strict Mode
"use strict";
// Bars
const bars = document.querySelectorAll("div");
// Generate Random Number Data
function GenerateRandomNumberData () {
const randomNumberData = [];
for (let dataNumber = 0; dataNumber < 100; dataNumber++) {
randomNumberData.push(Math.floor(Math.random() * 100));
};
return randomNumberData;
};
// Set Bar Heights
function SetBarHeights ( randomNumberData, activeBar ) {
for (let barNumber = 0; barNumber < 100; barNumber++) {
if (barNumber == activeBar) {
bars[barNumber].setAttribute("style", "height: @vh; background-color: blue;".replace("@", randomNumberData[barNumber]));
} else {
bars[barNumber].setAttribute("style", "height: @vh; background-color: red;".replace("@", randomNumberData[barNumber]));
}
};
};
// Set Bar Heights Red
function SetBarHeightsr ( randomNumberData, activeBar ) {
for (let barNumber = 0; barNumber < 100; barNumber++) {
bars[barNumber].setAttribute("style", "height: @vh; background-color: red;".replace("@", randomNumberData[barNumber]));
};
};
// Variables
let it = 0;
let li = 99;
let hs = 0;
let ls = 0;
// Bubble Sort Step
function BubbleSortStep ( randomNumberData, currentIndex ) {
if (randomNumberData[currentIndex + 1 ] == undefined) {
it++;
hs = 0;
return [0, false]
}
try {
let swapped = false;
if (randomNumberData[currentIndex] > randomNumberData[currentIndex + 1 ]) {
const nextValue = randomNumberData[currentIndex + 1];
randomNumberData[currentIndex + 1] = randomNumberData[currentIndex];
randomNumberData[currentIndex] = nextValue;
swapped = true;
SetBarHeights(randomNumberData, currentIndex + 1);
it++;
hs = currentIndex
return [currentIndex + 1, swapped];
} else {
it++;
SetBarHeights(randomNumberData, currentIndex + 1);
return [currentIndex + 1, swapped];
}
} catch {
it++;
hs = 0;
return [0, false]
}
};
// Data
const data = GenerateRandomNumberData()
SetBarHeights(data)
// Tet
function tet (index) {
if (it == li) {
it = 0;
li--;
return [0, true]
}
let [index2, swapped] = BubbleSortStep(data, index)
return [index2, swapped];
}
// Swap Variables
let index = 0;
let swapped;
let swappedCount = 0;
// Sort
let time = setInterval(() => {
[index, swapped] = tet(index);
if (swapped) {
swappedCount = 0;
} else {
swappedCount += 1;
}
if (swappedCount == 100) {
clearInterval(time)
SetBarHeightsr(data)
}
}, 1)

133
index.html
Unescape Escape View File

@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Sort Demo</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 100vh;
}
div {
background-color: red;
width: 1vw;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="./canvas.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save