initial commit
commit
2456f0d0aa
@ -0,0 +1 @@
|
||||
.DS_STORE
|
||||
@ -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)
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue