title: Sorting Algorithm Visualizer Trouble
body: <p>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.</p>
  <pre><code>//Sets Variables Up for Canvas and Canvas Context(ctx)
  let canvas = document.querySelector(&quot;#sortCanvas&quot;);
  let ctx = canvas.getContext(&quot;2d&quot;);
  //Sets Variable sortingArray to be an Array
  let sortingArray = [];
  //Adding an event listener to #resetButton in HTML
  let resetButton = document.querySelector(&quot;#resetButton&quot;).addEventListener(&quot;click&quot;, function reset() {
    //Clears Canvas and Re-Runs through LineDraw Function
    drawRect(0, 0, canvas.width, canvas.height, &quot;blue&quot;);
    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 &lt; sortingArray.length; i++) {
      for(j = 0; j &lt; sortingArray.length-i-1; j++) {
        let a = sortingArray[j];
        let b = sortingArray[j + 1];
        if(a &gt; b) {
          swap(sortingArray, j, j + 1);
          setTimeout(function() {}, 10)
        }
      }
    }
  }
  /*
  var container = document.getElementById(&quot;array&quot;);
  
  // Function to generate the array of blocks
  function generatearray() {
      for (var i = 0; i &lt; 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(&quot;div&quot;);
  
          // Adding class 'block' to div
          array_ele.classList.add(&quot;block&quot;);
  
          // 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(&quot;label&quot;);
          array_ele_label.classList.add(&quot;block_id&quot;);
          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) =&gt; {
  
          // 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(() =&gt; {
                  container.insertBefore(el2, el1);
                  resolve();
              }, 250);
          });
      });
  }
  
  // Asynchronous BubbleSort function
  async function BubbleSort(delay = 100) {
      var blocks = document.querySelectorAll(&quot;.block&quot;);
  
      // BubbleSort Algorithm
      for (var i = 0; i &lt; blocks.length; i += 1) {
          for (var j = 0; j &lt; blocks.length - i - 1; j += 1) {
  
              // To change background-color of the
              // blocks to be compared
              blocks[j].style.backgroundColor = &quot;#FF4949&quot;;
              blocks[j + 1].style.backgroundColor = &quot;#FF4949&quot;;
  
              // To wait for .1 sec
              await new Promise((resolve) =&gt;
                  setTimeout(() =&gt; {
                      resolve();
                  }, delay)
              );
  
              console.log(&quot;run&quot;);
              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 &gt; value2) {
                  await swap(blocks[j], blocks[j + 1]);
                  blocks = document.querySelectorAll(&quot;.block&quot;);
              }
  
              // Changing the color to the previous one
              blocks[j].style.backgroundColor = &quot;#6b5b95&quot;;
              blocks[j + 1].style.backgroundColor = &quot;#6b5b95&quot;;
          }
  
          //changing the color of greatest element
          //found in the above traversal
          blocks[blocks.length - i - 1]
                  .style.backgroundColor = &quot;#13CE66&quot;;
      }
  }
  
  // Calling generatearray function
  generatearray();
  
  // Calling BubbleSort function
  BubbleSort();
  */
  
  //Insertion Sort Algorithm
  function insertSort() {
    for(i = 0; i &lt; sortingArray.length; i++) {
      key = sortingArray[i]
      
      j = i-1
      
      while(j &gt;= 0 &amp;&amp; key &lt; 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 &lt; high; j++) {
        if (arr[j] &lt;= 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 &lt; 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 &lt; n &amp;&amp; arr[largest] &lt; arr[l]) {
        largest = l;
      }
    
      if(r &lt; n &amp;&amp; arr[largest] &lt; 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 &gt;= 0) {
      heapify(arr, n, i)
      i--
    }
    
    while(k &gt;= 0) {
      temp = arr[0];
      
      arr[0] = arr[k];
      arr[k] = temp;
      
      heapify(arr, k, 0);
      
      k--
    }
    
    return arr
  }
  
  function mergeSort(arr) {
    if(arr.length &gt; 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 &lt; l.length &amp;&amp; j &lt; r.length) {
        if(l[i] &lt; r[j]) {
          arr[k] = l[i];
          i++
        } else {
          arr[k] = r[j];
          j++
        }
        k++
      }
      
      while(i &lt; l.length) {
        arr[k] = l[i];
        i++
        k++
      }
      
      while(j &lt; 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 &lt; canvas.width; i++) {
      sortingArray[i] = getRndmInt();
    }
    //Assigns sorting choice to be the answer to the window prompt
    let sortingChoice = window.prompt(&quot;What sorting algorithm would you like to see? (Bubble, Insertion, Quick, Heap, and Merge)&quot;);
    //Checks to see what sorting choice is decided via sortingChoice
    //Bubble Sort Choice
    if(sortingChoice === &quot;bubble sort&quot; || sortingChoice === &quot;Bubble Sort&quot; || sortingChoice === &quot;bubble&quot; || sortingChoice === &quot;Bubble&quot;) {
      bubbleSort();
    //Insertion Sort Choice
    } else if(sortingChoice === &quot;insertion sort&quot; || sortingChoice === &quot;Insertion Sort&quot; || sortingChoice === &quot;insertion&quot; || sortingChoice === &quot;Insertion&quot;) {
      insertSort();
    //Quick Sort Choice
    } else if(sortingChoice === &quot;quick sort&quot; || sortingChoice === &quot;Quick Sort&quot; || sortingChoice === &quot;quick&quot; || sortingChoice === &quot;Quick&quot;) {
      quickSort(sortingArray, 0, sortingArray.length-1);
    //Heap Sort Choice
    } else if(sortingChoice === &quot;heap sort&quot; || sortingChoice === &quot;Heap Sort&quot; || sortingChoice === &quot;heap&quot; || sortingChoice === &quot;Heap&quot;) {
      heapSort(sortingArray);
    //Merge Sort Choice
    } else if(sortingChoice === &quot;merge sort&quot; || sortingChoice === &quot;Merge Sort&quot; || sortingChoice === &quot;merge&quot; || sortingChoice === &quot;Merge&quot;) {
      mergeSort(sortingArray);
    //Not A Valid Option Alert
    } else {
      alert(&quot;That is not a valid option! Please try again!&quot;)
      lineDraw();
    }
  
    for(i = 0; i &lt; sortingArray.length; i++) {
      for(j = 0; j &lt; sortingArray.length; j++){
        if(j &gt; j + 1) {
          swap(sortingArray, j, j + 1)
          setTimeout(function(){}, 10)
        }
      }
    }
  
    //Actually draws lines sortingArray.length times
    for(i = 0; i &lt; sortingArray.length; i++) {
      draw(i, canvas.height, i, canvas.height - sortingArray[i], &quot;white&quot;, 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, &quot;blue&quot;);
  lineDraw();
  </code></pre>