GUI(Graphical User Interface) helps users with better understanding programs. In this article, we will visualize Merge Sort using JavaScript. We will see how the arrays are divided and merged after sorting to get the final sorted array.
Refer:
Approach:
- First, we will generate a random array using the Math. random() function.
- Properties of the canvas are used to make rectangle bars and animations.
- Different colors are used to indicate which arrays are divided and merged.
- The sorting is performed using the JavaScript mergeSort() function.
- The algorithm performs the operation very fast, the timeout() function has been used to slow down the process.
Unsorted list:
Sorted list:
index.html: Below is the program to visualize the Merge Sort algorithm.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head><body> <h1 class="title" style = "color: green; font:lighter; "> Merge Sort Visualizer using JS</h1> <h2 class="title1" style = "background: green; color: white; font: italic;">Array is not sorted </h2> <canvas id="Canvas"></canvas> <script src="mergeSort.js"></script></body></html> |
mergeSort.js: The following is the content for the “mergeSort.js” file used in the above HTML code.
Javascript
// Canvas variablesvar canvas, canvaswidth, canvasheight, ctrl;// Call canvasElements() to store height width// in above canvas variablescanvasElements();// 3 array are declared//1) arr is for storing array element //2) itmd for storing intermediate values//3) visited is for element which has been sortedvar arr = [], itmd = [], visited = []// Length of unsorted arrayvar len_of_arr = 40;// Store random value in arr[]for (var i = 0; i < len_of_arr; i++) { arr.push(Math.round(Math.random() * 250) )}// Initialize itmd and visited array with 0for (var i = 0; i < len_of_arr; i++) { itmd.push(0) visited.push(0)}// Merging of two sub arrayfunction mergeArray(start, end) { let mid = parseInt((start + end) >> 1); let start1 = start, start2 = mid + 1 let end1 = mid, end2 = end // Initial index of merged subarray let index = start while (start1 <= end1 && start2 <= end2) { if (arr[start1] <= arr[start2]) { itmd[index] = arr[start1] index = index + 1 start1 = start1 + 1; } else if(arr[start1] > arr[start2]) { itmd[index] = arr[start2] index = index + 1 start2 = start2 + 1; } } // Copy the remaining elements of // arr[], if there are any while (start1 <= end1) { itmd[index] = arr[start1] index = index + 1 start1 = start1 + 1; } while (start2 <= end2) { itmd[index] = arr[start2] index = index + 1 start2 = start2 + 1; } index = start while (index <= end) { arr[index] = itmd[index]; index++; }}// Function for showing visualization // effectfunction drawBars(start, end) { // Clear previous unsorted bars ctrl.clearRect(0, 0, 1000, 1500) // Styling of bars for (let i = 0; i < len_of_arr; i++) { // Changing styles of bars ctrl.fillStyle = "black" ctrl.shadowOffsetX = 2 ctrl.shadowColor = "chocolate"; ctrl.shadowBlur = 3; ctrl.shadowOffsetY =5; // Size of rectangle of bars ctrl.fillRect(25 * i, 300 - arr[i], 20, arr[i]) if (visited[i]) { ctrl.fillStyle = "#006d13" ctrl.fillRect(25 * i, 300 - arr[i], 20, arr[i]) ctrl.shadowOffsetX = 2 } } for (let i = start; i <= end; i++) { ctrl.fillStyle = "orange" ctrl.fillRect(25 * i, 300 - arr[i], 18, arr[i]) ctrl.fillStyle = "#cdff6c" ctrl.fillRect(25 * i,300, 18, arr[i]) visited[i] = 1 }}// Waiting interval between two barsfunction timeout(ms) { return new Promise(resolve => setTimeout(resolve, ms));}// Merge Sortingconst mergeSort = async (start, end) => { if (start < end) { let mid = parseInt((start + end) >> 1) await mergeSort(start, mid) await mergeSort(mid + 1, end) await mergeArray(start, end) await drawBars(start, end) // Waiting time is 800ms await timeout(800) }}// canvasElements function for storing// width and height in canvas variablefunction canvasElements() { canvas = document.getElementById("Canvas") canvas.width = canvas.height = 1000 canvaswidth = canvas.width canvasheight = canvas.height ctrl = canvas.getContext("2d")}// Asynchronous MergeSort function const performer = async () => { await mergeSort(0, len_of_arr - 1) await drawBars() // Code for change title1 text const title1_changer = document.querySelector(".title1") title1_changer.innerText = "Array is completely sorted"}performer() |
Output:
Feeling lost in the world of random DSA topics, wasting time without progress? It’s time for a change! Join our DSA course, where we’ll guide you on an exciting journey to master DSA efficiently and on schedule.
Ready to dive in? Explore our Free Demo Content and join our DSA course, trusted by over 100,000 neveropen!
Ready to dive in? Explore our Free Demo Content and join our DSA course, trusted by over 100,000 neveropen!
