diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..6454eae --- /dev/null +++ b/Index.html @@ -0,0 +1,48 @@ + + + + + + + Sorting Visualizer + + + +
+

Sorting Visualizer

+ +
+ + +
+ + + + + + + + + + \ No newline at end of file diff --git a/Style.css b/Style.css new file mode 100644 index 0000000..13300c2 --- /dev/null +++ b/Style.css @@ -0,0 +1,33 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 20px; + padding: 0 20px 30px 0; + line-height: 1.4; +} +.flex-container{ + margin-top: 20px; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 500px; + justify-content: center; + transition: 2s all ease; +} + +.flex-item{ + background: cyan; + border: 1pt solid black; + width: 10px; + transition: 0.1s all ease; +} + +.row{ + display: grid; + grid-template-columns: 1fr 1fr 2fr; +} + +#input{ + display: flex; + padding: 10px; + justify-content: space-around; +} \ No newline at end of file diff --git a/js_files/bubble.js b/js_files/bubble.js new file mode 100644 index 0000000..2b53040 --- /dev/null +++ b/js_files/bubble.js @@ -0,0 +1,32 @@ +async function bubble() { + console.log('In bubbe()'); + const ele = document.querySelectorAll(".bar"); + for(let i = 0; i < ele.length-1; i++){ + console.log('In ith loop'); + for(let j = 0; j < ele.length-i-1; j++){ + console.log('In jth loop'); + ele[j].style.background = 'blue'; + ele[j+1].style.background = 'blue'; + if(parseInt(ele[j].style.height) > parseInt(ele[j+1].style.height)){ + console.log('In if condition'); + await waitforme(delay); + swap(ele[j], ele[j+1]); + } + ele[j].style.background = 'cyan'; + ele[j+1].style.background = 'cyan'; + } + ele[ele.length-1-i].style.background = 'green'; + } + ele[0].style.background = 'green'; +} + +const bubSortbtn = document.querySelector(".bubbleSort"); +bubSortbtn.addEventListener('click', async function(){ + disableSortingBtn(); + disableSizeSlider(); + disableNewArrayBtn(); + await bubble(); + enableSortingBtn(); + enableSizeSlider(); + enableNewArrayBtn(); +}); \ No newline at end of file diff --git a/js_files/insertion.js b/js_files/insertion.js new file mode 100644 index 0000000..54f1072 --- /dev/null +++ b/js_files/insertion.js @@ -0,0 +1,44 @@ +async function insertion(){ + console.log('In insertion()'); + const ele = document.querySelectorAll(".bar"); + // color + ele[0].style.background = 'green'; + for(let i = 1; i < ele.length; i++){ + console.log('In ith loop'); + let j = i - 1; + let key = ele[i].style.height; + // color + ele[i].style.background = 'blue'; + + await waitforme(delay); + + while(j >= 0 && (parseInt(ele[j].style.height) > parseInt(key))){ + console.log('In while loop'); + // color + ele[j].style.background = 'blue'; + ele[j + 1].style.height = ele[j].style.height; + j--; + + await waitforme(delay); + + // color + for(let k = i; k >= 0; k--){ + ele[k].style.background = 'green'; + } + } + ele[j + 1].style.height = key; + // color + ele[i].style.background = 'green'; + } +} + +const inSortbtn = document.querySelector(".insertionSort"); +inSortbtn.addEventListener('click', async function(){ + disableSortingBtn(); + disableSizeSlider(); + disableNewArrayBtn(); + await insertion(); + enableSortingBtn(); + enableSizeSlider(); + enableNewArrayBtn(); +}); \ No newline at end of file diff --git a/js_files/merge.js b/js_files/merge.js new file mode 100644 index 0000000..6014bd7 --- /dev/null +++ b/js_files/merge.js @@ -0,0 +1,119 @@ +//let delay = 30; +async function merge(ele, low, mid, high){ + console.log('In merge()'); + console.log(`low=${low}, mid=${mid}, high=${high}`); + const n1 = mid - low + 1; + const n2 = high - mid; + console.log(`n1=${n1}, n2=${n2}`); + let left = new Array(n1); + let right = new Array(n2); + + for(let i = 0; i < n1; i++){ + await waitforme(delay); + console.log('In merge left loop'); + console.log(ele[low + i].style.height + ' at ' + (low+i)); + // color + ele[low + i].style.background = 'orange'; + left[i] = ele[low + i].style.height; + } + for(let i = 0; i < n2; i++){ + await waitforme(delay); + console.log('In merge right loop'); + console.log(ele[mid + 1 + i].style.height + ' at ' + (mid+1+i)); + // color + ele[mid + 1 + i].style.background = 'yellow'; + right[i] = ele[mid + 1 + i].style.height; + } + await waitforme(delay); + let i = 0, j = 0, k = low; + while(i < n1 && j < n2){ + await waitforme(delay); + console.log('In merge while loop'); + console.log(parseInt(left[i]), parseInt(right[j])); + + // To add color for which two r being compared for merging + + if(parseInt(left[i]) <= parseInt(right[j])){ + console.log('In merge while loop if'); + // color + if((n1 + n2) === ele.length){ + ele[k].style.background = 'green'; + } + else{ + ele[k].style.background = 'lightgreen'; + } + + ele[k].style.height = left[i]; + i++; + k++; + } + else{ + console.log('In merge while loop else'); + // color + if((n1 + n2) === ele.length){ + ele[k].style.background = 'green'; + } + else{ + ele[k].style.background = 'lightgreen'; + } + ele[k].style.height = right[j]; + j++; + k++; + } + } + while(i < n1){ + await waitforme(delay); + console.log("In while if n1 is left"); + // color + if((n1 + n2) === ele.length){ + ele[k].style.background = 'green'; + } + else{ + ele[k].style.background = 'lightgreen'; + } + ele[k].style.height = left[i]; + i++; + k++; + } + while(j < n2){ + await waitforme(delay); + console.log("In while if n2 is left"); + // color + if((n1 + n2) === ele.length){ + ele[k].style.background = 'green'; + } + else{ + ele[k].style.background = 'lightgreen'; + } + ele[k].style.height = right[j]; + j++; + k++; + } +} + +async function mergeSort(ele, l, r){ + console.log('In mergeSort()'); + if(l >= r){ + console.log(`return cause just 1 elemment l=${l}, r=${r}`); + return; + } + const m = l + Math.floor((r - l) / 2); + console.log(`left=${l} mid=${m} right=${r}`, typeof(m)); + await mergeSort(ele, l, m); + await mergeSort(ele, m + 1, r); + await merge(ele, l, m, r); +} + +const mergeSortbtn = document.querySelector(".mergeSort"); +mergeSortbtn.addEventListener('click', async function(){ + let ele = document.querySelectorAll('.bar'); + let l = 0; + let r = parseInt(ele.length) - 1; + disableSortingBtn(); + disableSizeSlider(); + disableNewArrayBtn(); + await mergeSort(ele, l, r); + enableSortingBtn(); + enableSizeSlider(); + enableNewArrayBtn(); +}); \ No newline at end of file diff --git a/js_files/quick.js b/js_files/quick.js new file mode 100644 index 0000000..d08b929 --- /dev/null +++ b/js_files/quick.js @@ -0,0 +1,77 @@ +async function partitionLomuto(ele, l, r){ + console.log('In partitionLomuto()'); + let i = l - 1; + // color pivot element + ele[r].style.background = 'red'; + for(let j = l; j <= r - 1; j++){ + console.log('In partitionLomuto for j'); + // color current element + ele[j].style.background = 'yellow'; + // pauseChamp + await waitforme(delay); + + if(parseInt(ele[j].style.height) < parseInt(ele[r].style.height)){ + console.log('In partitionLomuto for j if'); + i++; + swap(ele[i], ele[j]); + // color + ele[i].style.background = 'orange'; + if(i != j) ele[j].style.background = 'orange'; + // pauseChamp + await waitforme(delay); + } + else{ + // color if not less than pivot + ele[j].style.background = 'pink'; + } + } + i++; + // pauseChamp + await waitforme(delay); + swap(ele[i], ele[r]); // pivot height one + console.log(`i = ${i}`, typeof(i)); + // color + ele[r].style.background = 'pink'; + ele[i].style.background = 'green'; + + // pauseChamp + await waitforme(delay); + + // color + for(let k = 0; k < ele.length; k++){ + if(ele[k].style.background != 'green') + ele[k].style.background = 'cyan'; + } + + return i; +} + +async function quickSort(ele, l, r){ + console.log('In quickSort()', `l=${l} r=${r}`, typeof(l), typeof(r)); + if(l < r){ + let pivot_index = await partitionLomuto(ele, l, r); + await quickSort(ele, l, pivot_index - 1); + await quickSort(ele, pivot_index + 1, r); + } + else{ + if(l >= 0 && r >= 0 && l { + setTimeout(() => { resolve('') }, milisec); + }) +} + +// Selecting size slider from DOM +let arraySize = document.querySelector('#arr_sz'); + +// Event listener to update the bars on the UI +arraySize.addEventListener('input', function(){ + console.log(arraySize.value, typeof(arraySize.value)); + createNewArray(parseInt(arraySize.value)); +}); + +// Default input for waitforme function (260ms) +let delay = 260; + +// Selecting speed slider from DOM +let delayElement = document.querySelector('#speed_input'); + +// Event listener to update delay time +delayElement.addEventListener('input', function(){ + console.log(delayElement.value, typeof(delayElement.value)); + delay = 320 - parseInt(delayElement.value); +}); + +// Creating array to store randomly generated numbers +let array = []; + +// Call to display bars right when you visit the site +createNewArray(); + +// To create new array input size of array +function createNewArray(noOfBars = 60) { + // calling helper function to delete old bars from dom + deleteChild(); + + // creating an array of random numbers + array = []; + for (let i = 0; i < noOfBars; i++) { + array.push(Math.floor(Math.random() * 250) + 1); + } + console.log(array); + + // select the div #bars element + const bars = document.querySelector("#bars"); + + // create multiple element div using loop and adding class 'bar col' + for (let i = 0; i < noOfBars; i++) { + const bar = document.createElement("div"); + bar.style.height = `${array[i]*2}px`; + bar.classList.add('bar'); + bar.classList.add('flex-item'); + bar.classList.add(`barNo${i}`); + bars.appendChild(bar); + } +} + +// Helper function to delete all the previous bars so that new can be added +function deleteChild() { + const bar = document.querySelector("#bars"); + bar.innerHTML = ''; +} + +// Selecting newarray button from DOM and adding eventlistener +const newArray = document.querySelector(".newArray"); +newArray.addEventListener("click", function(){ + console.log("From newArray " + arraySize.value); + console.log("From newArray " + delay); + enableSortingBtn(); + enableSizeSlider(); + createNewArray(arraySize.value); +}); \ No newline at end of file