thinkswell · PBJI · Oct 9, 2023 · Oct 8, 2023 · Oct 9, 2023
diff --git a/SortingVisualizer/ayan-joshi/Readme.md b/SortingVisualizer/ayan-joshi/Readme.md
@@ -0,0 +1,28 @@
+# 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.
+
+You can have a look , how it's working !
+
+https://ayan-joshi.github.io/Sorting-Visualizer/
+# 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.
+
+# Screenshots
+
+![Screenshot 2023-08-03 203608](https://github.com/ayan-joshi/Sorting-Visualizer/assets/96243602/7ca1ebc1-42e7-47d7-a43f-4110fb769cce)
+
+![Screenshot 2023-08-03 203535](https://github.com/ayan-joshi/Sorting-Visualizer/assets/96243602/67209be1-5044-4cfa-beac-fb5ee129431d)
diff --git a/SortingVisualizer/ayan-joshi/index.html b/SortingVisualizer/ayan-joshi/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <h1>Sorting Visualizer</h1>
+    <div id="container"></div>
+
+    <hr>
+
+    <div class="button-container">
+        <button class="sort-btn" onclick="play()">Sort</button>
+        <button class="randomize-btn" onclick="init()">Randomize</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SortingVisualizer/ayan-joshi/script.js b/SortingVisualizer/ayan-joshi/script.js
@@ -0,0 +1,94 @@
+const n = 20
+const array=[];
+
+init();
+
+let audioCtx=null;
+
+function playNote(freq){
+    if(audioCtx==null){
+        audioCtx=new(
+            AudioContext ||
+            webkitAudioContext ||
+            window.webkitAudioContext
+            )();
+    }
+    const dur = 0.1;
+    const osc = audioCtx.createOscillator();
+    osc.frequency.value=freq;
+    osc.start();
+    osc.stop(audioCtx.currentTime+dur);
+    const node=audioCtx.createGain();
+    node.gain.value=0.1;
+    node.gain.linearRampToValueAtTime(
+        0, audioCtx.currentTime+dur
+    );
+    osc.connect(node);
+    node.connect(audioCtx.destination);
+}
+
+
+function init(){
+    for(let i=0;i<n;i++){
+    array[i] = Math.random();
+    }
+    showBars();
+}
+
+function play(){
+    const copy=[...array];
+    const moves = bubbleSort(copy);
+    animate(moves);
+}
+
+function animate(moves){
+    if(moves.length == 0){
+        showBars();
+        return;
+    }
+    const move = moves.shift();
+    const [i,j] = move.indices;
+
+    if(move.type=="swap"){
+    [array[i],array[j]] = [array[j],array[i]];
+    }
+
+    playNote(250+array[i]*500);
+    playNote(300+array[j]*500);
+
+    showBars(move);
+    setTimeout(function(){
+        animate(moves);
+    },75);
+}
+
+function bubbleSort(array){
+    const moves=[]
+    do{
+        var swapped = false;
+        for(let i=1;i<array.length;i++){
+            // moves.push({indices:[i-1,i],type:"comp"});
+         if(array[i-1] > array[i]){
+             swapped = true;
+             moves.push({indices:[i-1,i],type:"swap"});
+             [array[i-1],array[i]] = [array[i],array[i-1]];   
+        }
+    }
+     }while(swapped);
+     return moves;
+}
+
+function showBars(move){
+    container.innerHTML="";
+    for(let i=0;i<array.length;i++){
+        const bar = document.createElement("div");
+        bar.style.height=array[i]*100+"%";
+        bar.classList.add("bar");
+
+        if(move && move.indices.includes(i)){
+            bar.style.backgroundColor=
+                move.type=="swap"?"purple":"blue";
+        }
+        container.appendChild(bar);
+    }
+}
diff --git a/SortingVisualizer/ayan-joshi/style.css b/SortingVisualizer/ayan-joshi/style.css
@@ -0,0 +1,66 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: rgb(238, 174, 202);
+    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+  }
+
+  h1 {
+    font-size: 32px;
+    margin-top: 20px;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  #container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: 500px;
+    width: 500px;
+    background: rgb(238, 174, 202);
+    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .bar {
+    width: 10px;
+    background-color: #03a9f4; /* Green color for bars */
+    margin: 1px;
+    transition: height 0.2s;
+  }
+
+  .bar.voilet {
+    background-color: #673ab7; /* Red color for comparison bars */
+  }
+
+  .bar.blue {
+    background-color: #2196f3; /* Blue color for swapped bars */
+  }
+
+  /* Buttons */
+  button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    color: #fff;
+    margin: 10px;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  }
+
+  button.sort-btn {
+    background-color: #673ab7; /* Purple color for Sort button */
+  }
+
+  button.randomize-btn {
+    background-color: #03a9f4; /* Light blue color for Randomize button */
+  }