thinkswell · PBJI · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/SortingVisualizer/Tushar2930/README.md b/SortingVisualizer/Tushar2930/README.md
@@ -0,0 +1,6 @@
+# Sorting Visualizer
+
+This is a project that visualizes the sorting of a given array with multiple algorithm options. 
+I started this project because I was always fascinated that the concept of organization could be so easily captured within algorithms, as well as the fact that some core mathematical principles can make some incredibly-fast algorithms. 
+![111](https://github.com/Tushar2930/javascript-mini-projects/assets/110845672/23f8cda7-aa40-4d07-9ed9-7fbd553181ab)
+![222](https://github.com/Tushar2930/javascript-mini-projects/assets/110845672/d93fe7cb-83f6-4ea9-bd8c-3e7d69e6a307)
diff --git a/SortingVisualizer/Tushar2930/index.html b/SortingVisualizer/Tushar2930/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Sorting Visualizer</title>
+
+    <meta charset="UTF-8" />
+    <meta
+      name="keywords"
+      content="Tushar, Tushar, Projects, Sorting Visualizer, Algorithms"
+    />
+    <meta name="description" content="Sorting Algorithm Visualizer" />
+    <meta name="author" content="Tushar" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="intro">
+      <h1>Sorting Algorithm Visualizer!</h1>
+    </div>
+
+    <div class="slider-container">
+      <div class="slider">
+        <h3>Current Array Size: <span id="sizeValue"></span></h3>
+        <input
+          type="range"
+          min="10"
+          max="100"
+          value="20"
+          class="slider"
+          id="sizeSlider"
+        />
+      </div>
+
+      <div class="slider">
+        <h3>
+          Current Delay (lower is faster): <span id="speedValue"></span> ms
+        </h3>
+        <input
+          type="range"
+          min="1"
+          max="25"
+          value="5"
+          class="slider"
+          id="speedSlider"
+        />
+      </div>
+    </div>
+
+    <div class="algo-selection-container">
+      <label for="Sorting_Function">Choose an algorithm:</label>
+      <select id="sortingFunction" name="funcList" form="funcForm">
+        <option value="bubble">Bubble Sort</option>
+        <option value="selection">Selection</option>
+        <option value="insertion">Insertion</option>
+        <option value="merge">Merge</option>
+        <option value="heap">Heap</option>
+      </select>
+    </div>
+
+    <div class="sorting-button-container">
+      <button class="button" type="randomizeBtn" onclick="randomizeArray()">
+        Generate new array
+      </button>
+      <button class="button" type="sortButton" onclick="runSort()">
+        Begin Sorting
+      </button>
+    </div>
+
+    <div class="canvas-container">
+      <canvas
+        id="myCanvas"
+        width="800"
+        height="400"
+        style="border: 1px solid #c3c3c3"
+      >
+        Your browser does not support the canvas element :,(
+      </canvas>
+    </div>
+  </body>
+</html>
+
+<script src="src/main.js"></script>
+<script src="src/sort.js"></script>
diff --git a/SortingVisualizer/Tushar2930/src/main.js b/SortingVisualizer/Tushar2930/src/main.js
@@ -0,0 +1,169 @@
+
+function clearCanvas() {
+  ctx.beginPath();
+  ctx.fillStyle = BACKGROUND_COLOR;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.closePath();
+}
+
+function resetArray() {
+  array = [];
+}
+
+async function sleep() {
+  return new Promise((temp) => {
+    setTimeout(() => temp(2), SPEED); // timeout this function for duration SPEED
+  });
+}
+
+function swap(i, j) {
+  let temp = array[i];
+  array[i] = array[j];
+  array[j] = temp;
+}
+
+/**
+ *
+ * @param {index in array to draw} index
+ * @param {The value of the index in array} value
+ * @param {The new color to draw the index} color
+ */
+function drawBar(index, value, color = DEFAULT_COLOR) {
+  ctx.beginPath();
+  // clear the previous bar
+  ctx.fillStyle = BACKGROUND_COLOR;
+  ctx.fillRect(
+    Math.ceil((WIDTH / ARR_SIZE) * index),
+    0,
+    Math.floor(WIDTH / ARR_SIZE),
+    HEIGHT
+  );
+
+  ctx.fillStyle = color;
+  ctx.fillRect(
+    Math.ceil((WIDTH / ARR_SIZE) * index),
+    HEIGHT,
+    Math.floor(WIDTH / ARR_SIZE),
+    Math.floor(-HEIGHT * (value / MAX_ARR_VAL))
+  );
+
+  ctx.closePath();
+}
+
+function drawArray() {
+  clearCanvas();
+
+  for (let i = 0; i < array.length; i++) {
+    let val = array[i];
+    drawBar(i, val, DEFAULT_COLOR);
+  }
+}
+
+function randomizeArray() {
+  if (running) {
+    running = false;
+  }
+  clearCanvas();
+  resetArray();
+
+  for (let i = 0; i < ARR_SIZE; i++) {
+    array.push(Math.floor(Math.random() * MAX_ARR_VAL));
+  }
+
+  drawArray();
+}
+
+function runSort() {
+
+  if (!running) {
+    running = true;
+
+    let sortingAlgorithm;
+    const algoName = sortingAlgo.value;
+    switch (algoName) {
+      case "bubble":
+        sortingAlgorithm = bubbleSort;
+        break;
+      case "selection":
+        sortingAlgorithm = selectionSort;
+        break;
+      case "insertion":
+        sortingAlgorithm = insertionSort;
+        break;
+      case "merge":
+        sortingAlgorithm = mergeSort;
+        break;
+      case "quick": // TODO
+        sortingAlgorithm = quickSort;
+        break;
+      case "heap":
+        sortingAlgorithm = heapSort;
+        break;
+      default:
+        console.log("Invalid input");
+    }
+
+    sortingAlgorithm(array).then((sorted) => {
+      if (running) {
+        array = sorted;
+        drawArray();
+        running = false;
+      }
+    });
+
+  } else {
+    console.log("Cannot restart: sorting is actively running!");
+  }
+}
+
+function speedInput() {
+  SPEED = speedSlider.value;
+  speedOutput.innerHTML = SPEED;
+}
+function sizeInput() {
+  ARR_SIZE = sizeSlider.value;
+  sizeOutput.innerHTML = ARR_SIZE;
+}
+
+var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+const WIDTH = canvas.width,
+  HEIGHT = canvas.height;
+
+// button, slider setup
+randomizeBtn = document.getElementById("randomizeBtn");
+sortingBtn = document.getElementById("sortButton");
+
+// array size
+var sizeSlider = document.getElementById("sizeSlider");
+var sizeOutput = document.getElementById("sizeValue");
+var ARR_SIZE;
+// getting latency
+var speedSlider = document.getElementById("speedSlider");
+var speedOutput = document.getElementById("speedValue"); // get the output from the slider span
+var SPEED;
+// getting sorting algorithm
+var sortingAlgo = document.getElementById("sortingFunction");
+
+// everytime we mess with slider, it updates values inside
+speedSlider.oninput = speedInput;
+sizeSlider.oninput = () => {
+  sizeInput();
+
+  randomizeArray();
+};
+
+
+// initializing stuff I use everywhere
+let array = [];
+const MAX_ARR_VAL = 100;
+let running = false;
+
+// COLORS
+const DEFAULT_COLOR = "black";
+const BACKGROUND_COLOR = "white";
+
+// first call
+speedInput();
+sizeInput();
+randomizeArray(); // randomize and draw the array