From ee2cb97e2adc4e8201468914a16daa159dd55d4c Mon Sep 17 00:00:00 2001
From: Hoang Tran <99.hoangtran@gmail.com>
Date: Sat, 29 Jul 2023 12:01:04 +0700
Subject: [PATCH] update sort simulator

---
 2022/sort-simulator-2/js/utils.js |  4 +--
 2022/sort-simulator-2/sketch.js   | 50 ++++++++++++++++++++-----------
 2022/sort-simulator-2/style.css   | 13 ++++++--
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/2022/sort-simulator-2/js/utils.js b/2022/sort-simulator-2/js/utils.js
index 806de16..ec6fc50 100644
--- a/2022/sort-simulator-2/js/utils.js
+++ b/2022/sort-simulator-2/js/utils.js
@@ -8,7 +8,7 @@ function sleep(ms) {
 }
 
 // https://bost.ocks.org/mike/shuffle/
-async function shuffleArray(array) {
+async function shuffleArray(array, willSleep = true) {
   var m = array.length,
     t,
     i;
@@ -25,7 +25,7 @@ async function shuffleArray(array) {
 
     highlightIndexes[0] = m;
     highlightIndexes[1] = i;
-    await sleep(sleepTime);
+    await sleep(willSleep ? sleepTime : 0);
   }
 
   highlightIndexes = [];
diff --git a/2022/sort-simulator-2/sketch.js b/2022/sort-simulator-2/sketch.js
index a32840a..0aa5fbe 100644
--- a/2022/sort-simulator-2/sketch.js
+++ b/2022/sort-simulator-2/sketch.js
@@ -1,13 +1,12 @@
 let arr = [];
 let highlightIndexes = [];
 let sleepTime = 10;
+let arraySize = 100;
 let arrToAnimations = [];
 
-let delaySlider;
+let delayInput, arrSizeInput;
 let isSorting = false;
 
-const lineWidth = 7;
-
 async function runSort(sortFunc, array, button) {
   if (!isSorting) {
     button.classList.add("loading");
@@ -27,18 +26,34 @@ function getCurrentState() {
   }));
 }
 
+function createArray() {
+  for (let i = 0; i < arraySize; i++) arr.push(map(i, 0, arraySize, 0, 100));
+  arrToAnimations = getCurrentState();
+  shuffleArray(arr, false);
+}
+
 function setup() {
   createCanvas(min(windowWidth, 800), 500);
   colorMode(HSB, 100);
 
-  let len = ~~(width / lineWidth);
-  for (let i = 0; i < len; i++) arr.push(map(i, 0, len, 0, 100));
-  arrToAnimations = getCurrentState();
-  console.log(arrToAnimations);
-
-  shuffleArray(arr);
-
-  delaySlider = createSlider(0, 100, 10, 2);
+  createArray(arraySize);
+
+  createElement("lable", "Delay (ms):");
+  delayInput = createInput("10");
+  delayInput.attribute("type", "number");
+  delayInput.attribute("min", "0");
+  delayInput.attribute("max", "1000");
+  delayInput.attribute("step", "10");
+
+  createElement("lable", "Array size:");
+  arrSizeInput = createInput("100");
+  arrSizeInput.attribute("type", "number");
+  arrSizeInput.attribute("min", "10");
+  arrSizeInput.attribute("max", "400");
+  arrSizeInput.input(() => {
+    arraySize = arrSizeInput.value();
+    createArray();
+  });
 
   createButton("Shuffle").mouseClicked((e) => {
     runSort(shuffleArray, arr, e.target);
@@ -76,7 +91,7 @@ function setup() {
 function draw() {
   background(20);
 
-  sleepTime = delaySlider.value();
+  sleepTime = delayInput.value();
 
   noStroke();
   for (let i = arrToAnimations.length - 1; i >= 0; i--) {
@@ -92,21 +107,22 @@ function draw() {
       lerpSpeed
     );
 
+    let w = width / arraySize;
     let h = map(value, 0, 100, 0, height);
     let top = height - h;
-    let left = currentIndex * lineWidth;
+    let left = currentIndex * w;
 
     // fill(value, 255, 100);
-    // rect(left, top, lineWidth, h);
+    // rect(left, top, w, h);
     stroke(value, 255, 100);
-    strokeWeight(lineWidth - 2);
-    line(left + lineWidth / 2, top, left + 50, height);
+    strokeWeight(w - 2);
+    line(left + w / 2, top, left + 50, height);
 
     let hi = highlightIndexes.indexOf(indexInArr);
     if (hi >= 0) {
       fill(255);
       noStroke();
-      rect(left, 0, lineWidth, height - h);
+      rect(left, 0, w, height - h);
     }
   }
 }
diff --git a/2022/sort-simulator-2/style.css b/2022/sort-simulator-2/style.css
index 3986d10..a33967d 100644
--- a/2022/sort-simulator-2/style.css
+++ b/2022/sort-simulator-2/style.css
@@ -3,6 +3,7 @@ body {
     margin: 0;
     padding: 0;
     background-color: #151515;
+    color: #eee;
 }
 
 body {
@@ -46,16 +47,24 @@ button.loading::after {
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
+
 @keyframes changeLetter {
     0% {
         content: ' 🤨';
     }
+
     50% {
         content: ' 🤯';
     }
+
     100% {
         content: ' 🤔';
     }