Add files via upload

adirasgithub · May 16, 2024 · b9f4f55 · b9f4f55
commit b9f4f55
Show file tree

Hide file tree

Showing 14 changed files with 1,054 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+# Sorting_Visualizer
+
+A web application showcasing the inner workings of sorting algorithms.
+
+Implemented algorithms:
+1) Bubble sort
+2) Selection sort
+3) Insertion sort
+4) Merge sort
+5) Quick sort
+6) Heap sort
+
+Features:
+1) Colored representation of step being executed.
+  1.1) Blue:default
+  1.2) Yellow: Being compared
+  1.3) Red: Identified as in incorrect position and to be moved
+  1.4) Green: In correct position
+2) 3 Controls for visualizations
+  2.1) Speed of visualization (5 speed levels)
+  2.2) Data size ()
+  2.3) Generation of new data (Randomly generate new data).
+4) Time and Space complexity of algorithm being visualized.
diff --git a/VS_Sorting_Visualizer.code-workspace b/VS_Sorting_Visualizer.code-workspace
@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/index.html b/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+
+
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sorting Visualizer</title>
+
+    <link rel="stylesheet" href="./css/style.css">
+
+</head>
+<body>
+
+    <header>
+        <nav>
+            <div class="array-inputs">
+                <p>Size of the array:</p>
+                <input id="a_size" type="range" min=20 max=150 step=1 value=80>
+                <p>Speed of the algorithm:</p>
+                <input id="a_speed" type="range" min=1 max=5 step=1 value=4>
+                <button id="a_generate">Generate New Array!</button>
+            </div>
+
+            <div class="header_right">
+                <p class="nav-heading">Sorting visualizer</p>
+
+                <div class="algos">
+                    <button >Bubble</button>
+                    <button >Selection</button>
+                    <button >Insertion</button>
+                    <button >Merge</button>
+                    <button >Quick</button>
+                    <button style="margin-right: 0px;">Heap</button>
+                </div>
+            </div>
+
+        </nav>
+    </header>
+
+    <section>
+
+        <div id="Info_Cont1">
+
+            <h3>TIME COMPLEXITY</h3>
+
+            <div class="Complexity_Containers" id="Time_Complexity_Types_Container">
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Worst case:</p>
+                    <p id="Time_Worst"></p>
+                </div>
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Average case:</p>
+                    <p id="Time_Average"></p>
+                </div>
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Best case:</p>
+                    <p id="Time_Best"></p>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div id="array_container">
+
+        </div>
+
+        <div id="Info_Cont2">
+
+            <h3>SPACE COMPLEXITY</h3>
+
+            <div class="Complexity_Containers" id="Space_Complexity_Types_Container">
+
+                <div class="Pair_Definitions">
+                    <p class="Sub_Heading">Worst case:</p>
+                    <p id="Space_Worst"></p>
+                </div>
+
+            </div>
+
+        </div>
+
+    </section>
+
+    <footer>
+
+    </footer>
+
+    <script src="./scripts/main.js"></script>   <!--This should be at the end of body and should be loaded before sorts.js-->
+    <script src="./scripts/visualizations.js"></script>  <!--This should be loaded after main.js-->
+
+    <script src="./scripts/bubble_sort.js"></script>
+    <script src="./scripts/selection_sort.js"></script>
+    <script src="./scripts/insertion_sort.js"></script>
+    <script src="./scripts/merge_sort.js"></script>
+    <script src="./scripts/quick_sort.js"></script>
+    <script src="./scripts/heap_sort.js"></script>
+</body>
+
+
+
+</html>
diff --git a/scripts/bubble_sort.js b/scripts/bubble_sort.js
@@ -0,0 +1,41 @@
+
+
+function Bubble()
+{
+    //Setting Time complexities
+    document.getElementById("Time_Worst").innerText="O(N^2)";
+    document.getElementById("Time_Average").innerText="Θ(N^2)";
+    document.getElementById("Time_Best").innerText="Ω(N)";
+
+    //Setting Space complexity
+    document.getElementById("Space_Worst").innerText="O(1)";
+
+    c_delay=0;
+
+    for(var i=0;i<array_size-1;i++)
+    {
+        for(var j=0;j<array_size-i-1;j++)
+        {
+            div_update(divs[j],div_sizes[j],"yellow");//Color update
+
+            if(div_sizes[j]>div_sizes[j+1])
+            {
+                div_update(divs[j],div_sizes[j], "red");//Color update
+                div_update(divs[j+1],div_sizes[j+1], "red");//Color update
+
+                var temp=div_sizes[j];
+                div_sizes[j]=div_sizes[j+1];
+                div_sizes[j+1]=temp;
+
+                div_update(divs[j],div_sizes[j], "red");//Height update
+                div_update(divs[j+1],div_sizes[j+1], "red");//Height update
+            }
+            div_update(divs[j],div_sizes[j], "blue");//Color updat
+        }
+        div_update(divs[j],div_sizes[j], "green");//Color update
+    }
+    div_update(divs[0],div_sizes[0], "green");//Color update
+
+    enable_buttons();
+}
+