I’m really struggling with this application. I will be putting the code below this section. However, I am trying to visualize the sorting actually taking place. I have the draw function, which actually iterates over the array it is given and draws the lines in the correct place. I’m struggling to find out if I should call the draw() function within the separate algorithms(bubble, merge, quick, so on), or if there is a way to adjust the draw() function to properly draw each line and have a setTimeout() function on it so you can watch it sort through the array. Comment if you need more information, I’m always willing to provide more if need be.
//Sets Variables Up for Canvas and Canvas Context(ctx)
let canvas = document.querySelector("#sortCanvas");
let ctx = canvas.getContext("2d");
//Sets Variable sortingArray to be an Array
let sortingArray = [];
//Adding an event listener to #resetButton in HTML
let resetButton = document.querySelector("#resetButton").addEventListener("click", function reset() {
//Clears Canvas and Re-Runs through LineDraw Function
drawRect(0, 0, canvas.width, canvas.height, "blue");
lineDraw();
});
//Grabs random integer between 1 and the Height of the Canvas
function getRndmInt() {
return Math.floor(Math.random() * canvas.height);
}
//This function is called in Bubble Sort function and swaps two values
function swap(arr, x, y) {
let temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
//Bubble Sorting Algorithm
function bubbleSort() {
for(i = 0; i < sortingArray.length; i++) {
for(j = 0; j < sortingArray.length-i-1; j++) {
let a = sortingArray[j];
let b = sortingArray[j + 1];
if(a > b) {
swap(sortingArray, j, j + 1);
setTimeout(function() {}, 10)
}
}
}
}
/*
var container = document.getElementById("array");
// Function to generate the array of blocks
function generatearray() {
for (var i = 0; i < 20; i++) {
// Return a value from 1 to 100 (both inclusive)
var value = Math.ceil(Math.random() * 100);
// Creating element div
var array_ele = document.createElement("div");
// Adding class 'block' to div
array_ele.classList.add("block");
// Adding style to div
array_ele.style.height = `${value * 3}px`;
array_ele.style.transform = `translate(${i * 30}px)`;
// Creating label element for displaying
// size of particular block
var array_ele_label = document.createElement("label");
array_ele_label.classList.add("block_id");
array_ele_label.innerText = value;
// Appending created elements to index.html
array_ele.appendChild(array_ele_label);
container.appendChild(array_ele);
}
}
// Promise to swap two blocks
function swap(el1, el2) {
return new Promise((resolve) => {
// For exchanging styles of two blocks
var temp = el1.style.transform;
el1.style.transform = el2.style.transform;
el2.style.transform = temp;
window.requestAnimationFrame(function() {
// For waiting for .25 sec
setTimeout(() => {
container.insertBefore(el2, el1);
resolve();
}, 250);
});
});
}
// Asynchronous BubbleSort function
async function BubbleSort(delay = 100) {
var blocks = document.querySelectorAll(".block");
// BubbleSort Algorithm
for (var i = 0; i < blocks.length; i += 1) {
for (var j = 0; j < blocks.length - i - 1; j += 1) {
// To change background-color of the
// blocks to be compared
blocks[j].style.backgroundColor = "#FF4949";
blocks[j + 1].style.backgroundColor = "#FF4949";
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
console.log("run");
var value1 = Number(blocks[j].childNodes[0].innerHTML);
var value2 = Number(blocks[j + 1]
.childNodes[0].innerHTML);
// To compare value of two blocks
if (value1 > value2) {
await swap(blocks[j], blocks[j + 1]);
blocks = document.querySelectorAll(".block");
}
// Changing the color to the previous one
blocks[j].style.backgroundColor = "#6b5b95";
blocks[j + 1].style.backgroundColor = "#6b5b95";
}
//changing the color of greatest element
//found in the above traversal
blocks[blocks.length - i - 1]
.style.backgroundColor = "#13CE66";
}
}
// Calling generatearray function
generatearray();
// Calling BubbleSort function
BubbleSort();
*/
//Insertion Sort Algorithm
function insertSort() {
for(i = 0; i < sortingArray.length; i++) {
key = sortingArray[i]
j = i-1
while(j >= 0 && key < sortingArray[j]) {
sortingArray[j +1] = sortingArray[j];
j-= 1
}
sortingArray[j + 1] = key
}
}
//Quick Sort Algorithm
function quickSort(arr, low, high) {
//Partition Function assigns pivot variable to be the higher value of array assigned within parameters
function partition(arr, low, high) {
let i = (low - 1);
let pivot = arr[high];
for(j = low; j < high; j++) {
if (arr[j] <= pivot) {
i = i + 1
let temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
}
let temp2 = arr[i+1]
arr[i+1] = arr[high]
arr[high] = temp2
return (i + 1)
}
if(low < high) {
p = partition(arr, low, high);
quickSort(arr, low, p - 1);
quickSort(arr, p + 1, high);
}
}
function heapSort(arr) {
function heapify(arr, n, i) {
let largest = i;
let l = 2 * i + 1;
let r = 2 * i + 2;
if(l < n && arr[largest] < arr[l]) {
largest = l;
}
if(r < n && arr[largest] < arr[r]) {
largest = r;
}
if(largest != i) {
temp = arr[i];
arr[i] = arr[largest];
arr[largest] = temp;
heapify(arr, n, largest);
}
return arr
}
let n = arr.length;
let i = Math.floor(n / 2 - 1);
let k = n - 1
while(i >= 0) {
heapify(arr, n, i)
i--
}
while(k >= 0) {
temp = arr[0];
arr[0] = arr[k];
arr[k] = temp;
heapify(arr, k, 0);
k--
}
return arr
}
function mergeSort(arr) {
if(arr.length > 1) {
let mid = Math.ceil(arr.length / 2);
let l = arr.splice(0, mid);
let r = arr.splice(-mid);
mergeSort(l);
mergeSort(r);
i = 0
j = 0
k = 0
while(i < l.length && j < r.length) {
if(l[i] < r[j]) {
arr[k] = l[i];
i++
} else {
arr[k] = r[j];
j++
}
k++
}
while(i < l.length) {
arr[k] = l[i];
i++
k++
}
while(j < r.length) {
arr[k] = r[j];
j++
k++
}
}
}
function iteration() {
}
//Draws all of the lines and prompts the user what type of sorting they would like to take place.
function lineDraw() {
//Draw function assigns line drawing to a single function
function draw(x, y, a, b, color, lineWid) {
ctx.strokeStyle = color;
ctx.lineWidth = lineWid;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(a, b);
ctx.stroke();
}
//Assigns a random integer to sortingArray at index i
for(i = 0; i < canvas.width; i++) {
sortingArray[i] = getRndmInt();
}
//Assigns sorting choice to be the answer to the window prompt
let sortingChoice = window.prompt("What sorting algorithm would you like to see? (Bubble, Insertion, Quick, Heap, and Merge)");
//Checks to see what sorting choice is decided via sortingChoice
//Bubble Sort Choice
if(sortingChoice === "bubble sort" || sortingChoice === "Bubble Sort" || sortingChoice === "bubble" || sortingChoice === "Bubble") {
bubbleSort();
//Insertion Sort Choice
} else if(sortingChoice === "insertion sort" || sortingChoice === "Insertion Sort" || sortingChoice === "insertion" || sortingChoice === "Insertion") {
insertSort();
//Quick Sort Choice
} else if(sortingChoice === "quick sort" || sortingChoice === "Quick Sort" || sortingChoice === "quick" || sortingChoice === "Quick") {
quickSort(sortingArray, 0, sortingArray.length-1);
//Heap Sort Choice
} else if(sortingChoice === "heap sort" || sortingChoice === "Heap Sort" || sortingChoice === "heap" || sortingChoice === "Heap") {
heapSort(sortingArray);
//Merge Sort Choice
} else if(sortingChoice === "merge sort" || sortingChoice === "Merge Sort" || sortingChoice === "merge" || sortingChoice === "Merge") {
mergeSort(sortingArray);
//Not A Valid Option Alert
} else {
alert("That is not a valid option! Please try again!")
lineDraw();
}
for(i = 0; i < sortingArray.length; i++) {
for(j = 0; j < sortingArray.length; j++){
if(j > j + 1) {
swap(sortingArray, j, j + 1)
setTimeout(function(){}, 10)
}
}
}
//Actually draws lines sortingArray.length times
for(i = 0; i < sortingArray.length; i++) {
draw(i, canvas.height, i, canvas.height - sortingArray[i], "white", 2);
}
}
//Draw rectangle where sorting takes place
function drawRect(x, y, width, height, color) {
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = color;
ctx.fill();
}
//Calls the initial drawRect and lineDraw functions
drawRect(0, 0, canvas.width, canvas.height, "blue");
lineDraw();