From 20ab2a01e5994c50e057f4c96aad483d72246eab Mon Sep 17 00:00:00 2001 From: Search Light Date: Mon, 15 Jan 2024 12:20:15 +0500 Subject: [PATCH] SortingVisualizer --- SortingVisualizer/protocol-weaver/index.html | 16 ++++++ SortingVisualizer/protocol-weaver/readme.md | 20 +++++++ SortingVisualizer/protocol-weaver/script.js | 55 ++++++++++++++++++++ SortingVisualizer/protocol-weaver/style.css | 50 ++++++++++++++++++ 4 files changed, 141 insertions(+) create mode 100644 SortingVisualizer/protocol-weaver/index.html create mode 100644 SortingVisualizer/protocol-weaver/readme.md create mode 100644 SortingVisualizer/protocol-weaver/script.js create mode 100644 SortingVisualizer/protocol-weaver/style.css diff --git a/SortingVisualizer/protocol-weaver/index.html b/SortingVisualizer/protocol-weaver/index.html new file mode 100644 index 000000000..e6fa291f9 --- /dev/null +++ b/SortingVisualizer/protocol-weaver/index.html @@ -0,0 +1,16 @@ + + + + + + +
+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/SortingVisualizer/protocol-weaver/readme.md b/SortingVisualizer/protocol-weaver/readme.md new file mode 100644 index 000000000..922dc4940 --- /dev/null +++ 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 new file mode 100644 index 000000000..33084c2ea --- /dev/null +++ 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;iarr[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 new file mode 100644 index 000000000..4ac0836d7 --- /dev/null +++ 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); + } + \ No newline at end of file