Merge pull request #1118 from protocol-Weaver/master

SortingVisualizer
thinkswell · Jan 20, 2024 · e8bc8d9 · e8bc8d9
2 parents 7cc8271 + 20ab2a0
commit e8bc8d9
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/SortingVisualizer/protocol-weaver/index.html b/SortingVisualizer/protocol-weaver/index.html
@@ -0,0 +1,16 @@
+<html>
+    <head>
+
+        <link rel = "stylesheet" href = "style.css">
+    </head>
+    <body>
+        <div id="canvas">
+
+        </div>
+        <div class="buttons">
+        <button onclick="sort()">Sort</button>
+        <button onclick="init()">Randomize</button>
+    </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/SortingVisualizer/protocol-weaver/readme.md b/SortingVisualizer/protocol-weaver/readme.md
@@ -0,0 +1,20 @@
+# Sorting-Visualizer
+The Sorting Visualizer is a basic web application that allows you to visualize the process of sorting  on a set of randomly generated bars.
+
+# Technologies Used
+
+HTML
+
+CSS
+
+JavaScript
+
+# How to Use
+Clone this repository to your local machine.
+
+Open index.html in your web browser.
+
+Click the "Randomize" button to generate a random set of bars.
+
+Select a sorting algorithm from the dropdown menu and click the "Sort" button to visualize the sorting process.
+
diff --git a/SortingVisualizer/protocol-weaver/script.js b/SortingVisualizer/protocol-weaver/script.js
@@ -0,0 +1,55 @@
+const canvas = document.getElementById("canvas");
+
+let n = 20;
+let arr = [];
+function init(){
+    for(let i=0;i<n;i++){
+    arr[i] = Math.random();
+    }
+    LineDraw(-1,"cyan");
+}
+function LineDraw(index, color){
+    canvas.innerHTML = "";
+    for(let i = 0; i< arr.length; i++){
+    let bar = document.createElement("div");
+    bar.style.height = arr[i]*100 + "%";
+    bar.classList.add("bar");
+    canvas.appendChild(bar);
+    if(index != -1 && (index === i || index === i-1)){
+    bar.style.backgroundColor = color;
+    }
+    else {
+        bar.style.backgroundColor= "#03a9f4";
+    }
+    }
+}
+
+init();
+ async function checker(i){
+    if(arr[i]>arr[i+1]){
+        [arr[i],arr[i+1]] = [arr[i+1], arr[i]];
+        LineDraw(i,"purple");
+    }
+    else{
+        LineDraw(i,"purple");
+    }    
+}
+async function BubbleSort(n){
+    if(n===1){
+        return;
+    }
+
+    for(let i = 0; i< arr.length ; i++){
+        setTimeout(async ()=>{  
+        const result = await checker(i);
+        },300);
+    }
+
+    BubbleSort(n-1);
+
+}
+function sort(){
+   BubbleSort(arr.length);
+   LineDraw(-1,"cyan");
+}
+
diff --git a/SortingVisualizer/protocol-weaver/style.css b/SortingVisualizer/protocol-weaver/style.css
@@ -0,0 +1,50 @@
+.bar {
+    width: 10px;
+    background-color: #03a9f4; 
+    margin: 1px;
+    transition: height 0.2s;
+  }
+
+
+  #canvas {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-direction: row;
+    height: 50%;
+    width: 50%;
+    background: rgb(238, 174, 202);
+    background: radial-gradient(circle, rgb(255, 217, 234) 0%, rgba(148, 187, 233, 1) 100%);
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: snow;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    top : 80%;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 10px;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  }
+