I am currently making a sorting algorithm visualizer using HTML, CSS, and JS. I have most of it down, but I want to give it the ability to sort faster than one comparison a millisecond.
Here is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Algorithm Visualizer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="controls">
<select id="algorithm">
<option value="bubble">Bubble Sort</option>
<option value="selection">Selection Sort</option>
<option value="insertion">Insertion Sort</option>
</select>
<input type="text" id="Size" value=100>
<button onclick="gen()">Generate</button>
<input type="number" id="delay" min="0" value="1"> (ms delay)
</div>
<div class="bars" id="setup"></div>
<script src="script.js"></script>
</body>
</html>
CSS
.bars{
background-color: red;
width: 10px;
height: 10px;
position: absolute;
bottom: 100%;
margin: 0px;
visibility: hidden;
}
JS
var list;
var ind;
var size;
var sort;
var delay;
var count;
const content = document.getElementById("content");
var height = Math.floor(window.innerHeight * 0.9);
var width = Math.floor(window.innerWidth);
function swap(arr, a, b) {
[arr[a], arr[b]] = [arr[b], arr[a]];
update(a);
update(b);
}
async function bubbleSort(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < (arr.length - i - 1); j++) {
await sleep(delay);
if (arr[j] > arr[j + 1]) {
swap(list, j, j + 1);
}
}
}
}
async function selectionSort(arr) {
for (let i = 0; i < arr.length; i++) {
let lowest = i;
for (let j = i + 1; j < arr.length; j++) {
await sleep(delay);
if (arr[j] < arr[lowest]) {
lowest = j;
}
}
if (lowest !== i) {
swap(list, i, lowest);
}
}
}
function shuffle(arr) {
ind = list.length - 1;
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
swap(arr, i, j);
}
}
function update(item) {
const bar = document.getElementById("bar" + item);
if (bar) {
bar.style.visibility = "visible";
bar.style.height = (height / size) * list[item] + "px";
const hue = (list[item] / size) * 360;
bar.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
}
}
function createBars(arr) {
count = 0;
while (count < arr.length) {
var bar = document.createElement('div');
bar.classList.add("bars");
bar.setAttribute('id', "bar" + count);
document.body.appendChild(bar);
bar.style.width = Math.ceil(width / size) + "px";
bar.style.visibility = "visible";
bar.style.bottom = "0%";
bar.style.left = count * width / size + "px";
bar.style.height = (height / size) * arr[count] + "px";
const hue = (arr[count] / size) * 360;
bar.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
count++;
updateAll();
}
}
async function gen() {
if (list != undefined) {
var element = document.getElementById("parent");
element.textContent = "";
}
list = [];
size = document.getElementById("Size").value;
for (count = 1; count <= size; count++) {
list.push(count);
}
shuffle(list);
createBars(list);
await sleep(1000);
sort = document.getElementById("algorithm").value;
delay = document.getElementById("delay").value;
switch (sort) {
case "bubble":
bubbleSort(list);
break;
case "selection":
selectionSort(list);
break;
}
}
function sleep(milliseconds) {
return new Promise(d => setTimeout(d, milliseconds));
}
function updateAll() {
for (let i = 0; i < list.length; i++) {
update(list, i);
}
}
What I want is that if the ms delay is set between 0 and 1, comparisons will be made at that speed.
All help is appreciated.
New contributor
STM is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.