JS Sort

Sort by JavaScript.

by Tinytsunami

HTML

<div id="demo">
  <canvas></canvas>
  <div>
  <br/>
    DATA LENGTH = <input type="number" value="8" /><br/> DATA RANGE = [<input type="number" value="0" />, <input type="number" value="100" />]<br/> DELAY = <input type="number" value="100" /><br/>
    <br/>
    <button>Bubble Sort</button>
    <button>Selection Sort</button>
    <button>Insertion Sort</button>
    <button>Cocktail Sort</button>
    <button>Comb Sort</button>
    <button>Gnome Sort</button>
    <button>Ood-Even Sort</button>
    <button>Shell Sort</button>
    <button>Bucket Sort</button>
    <button>Counting Sort</button>
    <button>Radix Sort</button>
    <button>Merge Sort</button>
    <button>Quick Sort</button>
    <button>Binary Tree Sort</button>
    <button>Heap Sort</button>
    <button>Heap Sort (restore)</button>
    <button>Stooge Sort</button>
    <button>Sleep Sort</button>
    <button>Bogo Sort</button>
  </div>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo input {
  width: 60px;
  color: #ffffff;
  background: #20262e;
  outline: none;
}

#demo input[type="number"] {
  border: none;
  border-bottom: 1px solid #ffffff;
}

#demo canvas {
  border: solid 1px #333333;
}

#demo button {
  cursor: pointer;
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
  margin: 5px;
}

JavaScript

(function() {
  /* HTML DOM */
  let demo = document.getElementById("demo");
  let canvas = demo.getElementsByTagName("canvas")[0];
  let context = canvas.getContext("2d");
  let lengthNode = demo.getElementsByTagName("input")[0];
  let rangeNodeA = demo.getElementsByTagName("input")[1];
  let rangeNodeB = demo.getElementsByTagName("input")[2];
  let delayNode = demo.getElementsByTagName("input")[3];
  let sortNode = demo.getElementsByTagName("button");

  /* variable */
  let DELAY = 200; // animation delay
  let LENGTH = 5; // size of data
  let MIN = 0; // range of data, underbound
  let MAX = 100; // range of data, upperbound
  let data = []; // data for sorting
  let steps = []; // show array, step by step
  let interval = null; // object for animation

  /* canvas initaizlie */
  canvas.width = 400;
  canvas.height = 100;

  /* canvas drawing (screen update) */
  let refresh = function(data, option) {
    context.font = "25px Arial";
    let block_width = context.measureText(`${MAX}`).width + 20;
    /* canvas initaizlie */
    canvas.width = 50 + block_width * data.length;
    canvas.height = 150;
    context.clearRect(0, 0, canvas.width, canvas.height);
    /* draw array */
    context.font = "25px Arial";
    context.textAlign = "center";
    context.fillStyle = "#CCCCCC";
    context.strokeStyle = "#555555";
    for (let i = 0; i < data.length; i++) {
      context.strokeRect(25 + i * block_width, 25, block_width, 50);
      let x = 25 + Math.floor(block_width / 2 + i * block_width);
      context.fillText(`${data[i]}`, x, 60);
    }
    /* draw index */
    context.font = "12px Arial";
    context.strokeStyle = "#FFFFFF";
    let keys = Object.keys(option);
    for (let i in keys) {
      let key = keys[i];
      let index = option[key];
      if (typeof(index) == "string") {
        context.fillText(`${key} = ${index}`, 50, 90 + i * 10);
      } else if (typeof(index) == "object" && index.constructor.name == "Array") {
        for (let j = index[0]; j...