├── public ├── favicon.png └── swapsound.mp3 ├── src ├── components │ └── Bar.js ├── utils │ ├── Shuffle.js │ ├── IsSorted.js │ ├── DisplayBars.js │ └── SoundManager.js ├── _reset.scss ├── algorithms │ ├── InsertionSort.js │ ├── BubbleSort.js │ ├── SelectionSort.js │ ├── BucketSort.js │ ├── HeapSort.js │ ├── RadixSort.js │ ├── Quicksort.js │ └── MergeSort.js ├── style.scss └── main.js ├── package.json ├── .gitignore ├── README.md └── index.html /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TylerMommsen/sorting-visualizer/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/swapsound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TylerMommsen/sorting-visualizer/HEAD/public/swapsound.mp3 -------------------------------------------------------------------------------- /src/components/Bar.js: -------------------------------------------------------------------------------- 1 | export default function Bar() { 2 | const bar = document.createElement("div"); 3 | bar.classList.add("bar"); 4 | return bar; 5 | } 6 | -------------------------------------------------------------------------------- /src/utils/Shuffle.js: -------------------------------------------------------------------------------- 1 | export default function Shuffle(bars) { 2 | for (let i = bars.length - 1; i > 0; i--) { 3 | const j = Math.floor(Math.random() * (i + 1)); 4 | 5 | [bars[i], bars[j]] = [bars[j], bars[i]]; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | color: $primary; 6 | font-family: sans-serif; 7 | } 8 | 9 | button { 10 | border: none; 11 | background-color: transparent; 12 | } 13 | -------------------------------------------------------------------------------- /src/utils/IsSorted.js: -------------------------------------------------------------------------------- 1 | export default async function IsSorted(arr) { 2 | for (let i = 0; i < arr.length - 1; i++) { 3 | if (arr[i] > arr[i + 1]) { 4 | return false; // Early return if any element is greater than its successor 5 | } 6 | } 7 | return true; // The array is sorted 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sorting-visualizer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "sass": "^1.74.1", 13 | "vite": "^5.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/algorithms/InsertionSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | export default async function InsertionSort(arr, left, right) { 7 | let i, key, j; 8 | 9 | for (i = left + 1; i <= right; i++) { 10 | key = arr[i]; 11 | j = i - 1; 12 | 13 | while (j >= 0 && arr[j] > key) { 14 | arr[j + 1] = arr[j]; 15 | DisplayBars(arr, [j + 1]); 16 | await delay(speed); 17 | 18 | j = j - 1; 19 | } 20 | 21 | arr[j + 1] = key; 22 | } 23 | 24 | DisplayBars(arr); 25 | 26 | return; 27 | } 28 | -------------------------------------------------------------------------------- /src/algorithms/BubbleSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | export default async function BubbleSort(bars) { 7 | let swapped = false; 8 | do { 9 | swapped = false; 10 | for (let i = 0; i < bars.length; i++) { 11 | if (bars[i - 1] > bars[i]) { 12 | swapped = true; 13 | [bars[i - 1], bars[i]] = [bars[i], bars[i - 1]]; 14 | DisplayBars(bars, [i - 1, i]); 15 | await delay(speed); 16 | } 17 | } 18 | } while (swapped); 19 | 20 | DisplayBars(bars); 21 | 22 | return; 23 | } 24 | -------------------------------------------------------------------------------- /src/algorithms/SelectionSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | export default async function SelectionSort(arr, n) { 7 | async function Swap(arr, xp, yp) { 8 | let temp = arr[xp]; 9 | arr[xp] = arr[yp]; 10 | arr[yp] = temp; 11 | DisplayBars(arr, [xp, yp]); 12 | await delay(speed); 13 | } 14 | 15 | async function Algorithm(arr, n) { 16 | let i, j, minIdx; 17 | 18 | for (i = 0; i < n - 1; i++) { 19 | minIdx = i; 20 | for (j = i + 1; j < n; j++) { 21 | if (arr[j] < arr[minIdx]) { 22 | minIdx = j; 23 | } 24 | } 25 | 26 | await Swap(arr, minIdx, i); 27 | } 28 | } 29 | 30 | await Algorithm(arr, n); 31 | 32 | DisplayBars(arr); 33 | 34 | return; 35 | } 36 | -------------------------------------------------------------------------------- /src/algorithms/BucketSort.js: -------------------------------------------------------------------------------- 1 | import DisplayBars from "../utils/DisplayBars"; 2 | import InsertionSort from "./InsertionSort"; 3 | 4 | export default async function BucketSort(arr) { 5 | let n = arr.length; 6 | let buckets = Array.from({ length: n }, () => []); 7 | 8 | // put array elements in different buckets 9 | for (let i = 0; i < n; i++) { 10 | let bi = Math.floor(n * arr[i]); 11 | bi = Math.min(bi, n - 1); // Ensure bi is within bounds 12 | buckets[bi].push(arr[i]); 13 | } 14 | 15 | // sort individual buckets using insertion sort 16 | for (let i = 0; i < n; i++) { 17 | await InsertionSort(buckets[i], 0, buckets[i].length - 1); 18 | } 19 | 20 | // concatenate all buckets into arr[] 21 | let index = 0; 22 | for (let i = 0; i < n; i++) { 23 | for (let j = 0; j < buckets[i].length; j++) { 24 | arr[index++] = buckets[i][j]; 25 | } 26 | } 27 | 28 | DisplayBars(arr); 29 | 30 | return; 31 | } 32 | -------------------------------------------------------------------------------- /src/algorithms/HeapSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | async function Heapify(arr, n, i) { 7 | let largest = i; 8 | let l = 2 * i + 1; 9 | let r = 2 * i + 2; 10 | 11 | if (l < n && arr[l] > arr[largest]) largest = l; 12 | 13 | if (r < n && arr[r] > arr[largest]) largest = r; 14 | 15 | if (largest != i) { 16 | let swap = arr[i]; 17 | arr[i] = arr[largest]; 18 | arr[largest] = swap; 19 | DisplayBars(arr, [i, largest]); 20 | await delay(speed); 21 | 22 | await Heapify(arr, n, largest); 23 | } 24 | } 25 | 26 | export default async function HeapSort(arr) { 27 | let n = arr.length; 28 | 29 | for (let i = Math.floor(n / 2) - 1; i >= 0; i--) { 30 | await Heapify(arr, n, i); 31 | } 32 | 33 | for (let i = n - 1; i > 0; i--) { 34 | let temp = arr[0]; 35 | arr[0] = arr[i]; 36 | arr[i] = temp; 37 | DisplayBars(arr, [0, i]); 38 | await delay(speed); 39 | 40 | await Heapify(arr, i, 0); 41 | } 42 | 43 | DisplayBars(arr); 44 | 45 | return; 46 | } 47 | -------------------------------------------------------------------------------- /src/utils/DisplayBars.js: -------------------------------------------------------------------------------- 1 | import { soundOn } from "../main"; 2 | import { playSound } from "./SoundManager"; 3 | import Bar from "../components/Bar"; 4 | 5 | export default async function DisplayBars(bars, currentlySwapped) { 6 | // give each bar a relative value between 0 and 100 to give a nice staircase look when displaying finished sort 7 | let normalizedBars = bars.map((bar) => { 8 | return (bar * 100) / bars.length; 9 | }); 10 | 11 | let barContainer = document.getElementById("bar-container"); 12 | barContainer.innerHTML = ""; 13 | for (let i = 0; i < normalizedBars.length; i++) { 14 | let currBar = Bar(); 15 | currBar.style.height = normalizedBars[i] + "%"; 16 | currBar.style.width = 100 / normalizedBars.length + "%"; 17 | 18 | if (currentlySwapped && currentlySwapped.includes(i)) { 19 | currBar.style.background = "linear-gradient(to top right, #ff6a00, #ff9143)"; 20 | const pitchRate = bars[i] / Math.max(...bars) + 0.5; 21 | // Play the sound with adjusted pitch 22 | if (soundOn) { 23 | playSound(pitchRate); 24 | } 25 | } 26 | 27 | barContainer.appendChild(currBar); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/algorithms/RadixSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | function GetPosition(num, place) { 7 | return Math.floor(Math.abs(num) / Math.pow(10, place)) % 10; 8 | } 9 | 10 | function GetMax(arr) { 11 | let max = 0; 12 | for (let num of arr) { 13 | if (max < Math.floor(num).toString().length) { 14 | max = Math.floor(num).toString().length; 15 | } 16 | } 17 | return max; 18 | } 19 | 20 | export default async function RadixSort(arr) { 21 | const max = GetMax(arr); // Get the maximum number of digits 22 | 23 | for (let i = 0; i < max; i++) { 24 | let buckets = Array.from({ length: 10 }, () => []); 25 | 26 | // Distribute the array elements into buckets 27 | for (let j = 0; j < arr.length; j++) { 28 | buckets[GetPosition(arr[j], i)].push(arr[j]); 29 | 30 | DisplayBars(arr, [j]); 31 | await delay(speed); 32 | } 33 | 34 | // Flatten the buckets back into the array 35 | arr = [].concat(...buckets); 36 | } 37 | 38 | DisplayBars(arr); 39 | 40 | return arr; 41 | } 42 | -------------------------------------------------------------------------------- /src/algorithms/Quicksort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | export default async function Quicksort(arr, low, high) { 7 | // function that handles partitioning the array and returning the partition index 8 | async function Partition(arr, low, high) { 9 | let pivot = arr[high]; 10 | let i = low - 1; 11 | 12 | for (let j = low; j <= high - 1; j++) { 13 | if (arr[j] < pivot) { 14 | i++; 15 | [arr[i], arr[j]] = [arr[j], arr[i]]; // swap elements 16 | DisplayBars(arr, [i, j]); 17 | await delay(speed); 18 | } 19 | } 20 | 21 | [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; // swap pivot to its correct position 22 | return i + 1; 23 | } 24 | 25 | // the main quicksort algorithm 26 | async function Algorithm(arr, low, high) { 27 | if (low < high) { 28 | // pi is the partitioning index, arr[pi] is now at the right place 29 | let pi = await Partition(arr, low, high); 30 | 31 | // Seperately sort elements before parition and after partition 32 | await Algorithm(arr, low, pi - 1); 33 | await Algorithm(arr, pi + 1, high); 34 | } 35 | } 36 | 37 | await Algorithm(arr, low, high); 38 | 39 | DisplayBars(arr); 40 | 41 | return; 42 | } 43 | -------------------------------------------------------------------------------- /src/utils/SoundManager.js: -------------------------------------------------------------------------------- 1 | let sound = null; 2 | 3 | // Function to load sound 4 | async function loadSound(url) { 5 | const response = await fetch(url); 6 | const arrayBuffer = await response.arrayBuffer(); 7 | const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); 8 | return audioBuffer; 9 | } 10 | 11 | // Initialize the Audio Context 12 | const audioContext = new (window.AudioContext || window.webkitAudioContext)(); 13 | const gainNode = audioContext.createGain(); 14 | gainNode.connect(audioContext.destination); 15 | 16 | let playingSounds = 0; 17 | 18 | export async function playSound(pitchRate) { 19 | const sound = await getSound(); 20 | 21 | playingSounds++; 22 | updateGain(playingSounds); 23 | 24 | const source = audioContext.createBufferSource(); 25 | source.buffer = sound; 26 | source.playbackRate.value = pitchRate; 27 | source.connect(gainNode); 28 | source.onended = () => { 29 | playingSounds--; 30 | updateGain(playingSounds); 31 | }; 32 | source.start(); 33 | } 34 | 35 | function updateGain(numberOfSounds) { 36 | const baseVolume = 0.5; 37 | // Check if numberOfSounds is 0 to avoid division by 0 38 | if (numberOfSounds <= 1) { 39 | gainNode.gain.value = baseVolume; // Set to default/full volume when no sounds are playing 40 | } else { 41 | // Decrease volume as more sounds play 42 | gainNode.gain.value = baseVolume / Math.sqrt(numberOfSounds); 43 | } 44 | } 45 | 46 | export async function getSound() { 47 | if (!sound) { 48 | sound = await loadSound("/swapsound.mp3"); 49 | } 50 | return sound; 51 | } 52 | -------------------------------------------------------------------------------- /src/algorithms/MergeSort.js: -------------------------------------------------------------------------------- 1 | import { speed } from "../main"; 2 | import DisplayBars from "../utils/DisplayBars"; 3 | 4 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 5 | 6 | export async function Merge(arr, left, middle, right) { 7 | const n1 = middle - left + 1; 8 | const n2 = right - middle; 9 | 10 | // create temp arrays 11 | const L = new Array(n1); 12 | const R = new Array(n2); 13 | 14 | for (let i = 0; i < n1; i++) { 15 | L[i] = arr[left + i]; 16 | } 17 | 18 | for (let j = 0; j < n2; j++) { 19 | R[j] = arr[middle + 1 + j]; 20 | } 21 | 22 | // merge the temp arrays back into arr[left..right] 23 | let i = 0; // initial index of the first subarray 24 | let j = 0; // initial index of the second subarray 25 | let k = left; // initial index of the merged subarray 26 | 27 | while (i < n1 && j < n2) { 28 | if (L[i] <= R[j]) { 29 | arr[k] = L[i]; 30 | DisplayBars(arr, [k]); 31 | i++; 32 | } else { 33 | arr[k] = R[j]; 34 | DisplayBars(arr, [k]); 35 | j++; 36 | } 37 | await delay(speed); 38 | k++; 39 | } 40 | 41 | // copy the remaining elements of L[] if there are any 42 | while (i < n1) { 43 | arr[k] = L[i]; 44 | DisplayBars(arr, [k]); 45 | await delay(speed); 46 | i++; 47 | k++; 48 | } 49 | 50 | // copy the remaining elements of R[] if there are any 51 | while (j < n2) { 52 | arr[k] = R[j]; 53 | DisplayBars(arr, [k]); 54 | await delay(speed); 55 | j++; 56 | k++; 57 | } 58 | } 59 | 60 | export default async function MergeSort(arr, left, right) { 61 | async function Algorithm(arr, left, right) { 62 | if (left >= right) { 63 | return; // returns recursively 64 | } 65 | 66 | const middle = left + Math.floor((right - left) / 2); 67 | await Algorithm(arr, left, middle); 68 | await Algorithm(arr, middle + 1, right); 69 | await Merge(arr, left, middle, right); 70 | } 71 | 72 | await Algorithm(arr, left, right - 1); 73 | 74 | DisplayBars(arr); 75 | 76 | return; 77 | } 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sorting Visualizer 2 | 3 | Sorting algorithm visualization tool to illustrate and compare the mechanics and efficiency of various sorting algorithms in real-time. This tool allows you to change the algorithm, adjust the number of items in the dataset between 1 and 1,000 and change the speed at which the algorithm executes between 1ms and 1000ms. 4 | 5 | ## Live Demo 6 | 7 | [View Live Site Here](https://tylermommsen-sorting-visualizer.vercel.app/) 8 | 9 | ## Built With 10 | 11 |
12 | html icon 13 |
14 | sass icon 15 |
16 | javascript icon 17 |
18 | 19 | ## Sorting Algorithms 20 | 21 | - **Quicksort** - Selects a 'pivot' element from the array and partitions the other elements into two sub-arrays, according to whether they are less than or greater than the pivot. The sub-arrays are then sorted recursively. 22 | 23 | - **Bubble Sort** - Repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. 24 | 25 | - **Insertion Sort** - Builds the final sorted array (or list) one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort. 26 | 27 | - **Merge Sort** - A divide and conquer algorithm that divides the input array into two halves, calls itself for the two halves, and then merges the two sorted halves. 28 | 29 | - **Selection Sort** - Divides the input list into two parts: a sorted sublist of items which is built up from left to right at the front (left) of the list, and a sublist of the remaining unsorted items. The algorithm proceeds by finding the smallest (or largest, depending on sorting order) element in the unsorted sublist, exchanging it with the leftmost unsorted element, and moving the sublist boundaries one element to the right. 30 | 31 | - **Radix Sort** - Sorts numbers digit by digit, starting from the least significant digit to the most significant digit. Radix sort uses counting sort as a subroutine to sort. 32 | 33 | - **Bucket Sort** - Distributes the elements of an array into a number of buckets. Each bucket is then sorted individually, either using a different sorting algorithm, or by recursively applying the bucket sort algorithm. 34 | 35 | - **Heap Sort** - A hybrid stable sorting algorithm derived from merge sort and insertion sort, designed to perform well on many kinds of real-world data. 36 | 37 | ## Gif 38 | ![sortingvisualizationgif](https://github.com/TylerMommsen/sorting-visualizer/assets/65496518/e2406e34-9b15-44ce-8139-c5f75798b21b) 39 | 40 | ## Development 41 | 42 | Follow these steps to run the project locally. 43 | 44 | 1. Clone the repository. 45 | 46 | HTTPS 47 | 48 | ```sh 49 | git clone https://github.com/TylerMommsen/pathfinding-visualizer.git 50 | ``` 51 | 52 | SSH 53 | 54 | ```sh 55 | git clone git@github.com:TylerMommsen/pathfinding-visualizer.git 56 | ``` 57 | 58 | 2. Install dependenices 59 | 60 | ```sh 61 | npm install 62 | ``` 63 | 64 | 3. Run the project 65 | 66 | ```sh 67 | npm run dev 68 | ``` 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sorting Visualizer 8 | 9 | 10 |
11 |
12 |
13 |

Sorting Visualizer

14 |
15 |
16 |
17 |
18 |
19 |
20 |

Quicksort

21 | 29 | 34 | 35 | 36 |
37 |
38 |
Quicksort
39 |
Bubble Sort
40 |
Insertion Sort
41 |
Merge Sort
42 |
Selection Sort
43 |
Radix Sort
44 |
Bucket Sort
45 |
Heap Sort
46 |
47 |
48 | 49 | 50 | 51 | 60 | 65 | 66 | 80 |
81 | 82 |
83 |
84 | 85 | 86 |
87 | 88 |
89 | 90 | 91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | $background: #161616; 2 | $primary: #f4f4f4; 3 | $secondary: #000; 4 | $tertiary: #199fff; 5 | 6 | @import "reset"; 7 | 8 | button { 9 | padding: 0.4rem 0.6rem 0.4rem 0.6rem; 10 | background-color: $tertiary; 11 | border-radius: 0.4rem; 12 | cursor: pointer; 13 | font-weight: bold; 14 | transition: all 0.2s; 15 | font-size: 1rem; 16 | 17 | @media only screen and (min-width: 992px) { 18 | padding: 0.6rem 1rem 0.6rem 1rem; 19 | } 20 | 21 | &:hover { 22 | background-color: rgba($color: $tertiary, $alpha: 0.9); 23 | } 24 | 25 | &:active { 26 | background-color: rgba($color: $tertiary, $alpha: 0.8); 27 | } 28 | } 29 | 30 | #app { 31 | position: relative; 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | height: 100vh; 36 | background-color: $background; 37 | width: 100vw; 38 | } 39 | 40 | // add grid as background 41 | #background { 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), 48 | linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); 49 | background-size: 5vw 5vw; 50 | z-index: 0; 51 | 52 | // adds vignette to page 53 | &::before { 54 | content: ""; 55 | position: fixed; 56 | top: 0; 57 | left: 0; 58 | width: 100%; 59 | height: 100%; 60 | background-image: radial-gradient(ellipse at center, transparent 80%, rgba(0, 0, 0, 0.2)), 61 | radial-gradient(ellipse at center, transparent 90%, rgba(10, 10, 10, 0.4)); 62 | pointer-events: none; 63 | } 64 | 65 | @media only screen and (min-width: 768px) { 66 | background-size: 3vw 3vw; 67 | } 68 | 69 | @media only screen and (min-width: 1200px) { 70 | background-size: 2vw 2vw; 71 | } 72 | } 73 | 74 | header { 75 | width: 100%; 76 | position: relative; 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | padding: 1rem; 81 | z-index: 1; 82 | z-index: 10; 83 | 84 | &::before { 85 | content: ""; 86 | position: absolute; 87 | background-color: $background; 88 | top: 0; 89 | left: 0; 90 | width: 100%; 91 | height: 100%; 92 | z-index: -1; 93 | box-shadow: 0 10px 20px rgba($color: $background, $alpha: 0.8); 94 | } 95 | } 96 | 97 | main { 98 | z-index: 1; 99 | flex: 1; 100 | display: flex; 101 | flex-direction: column; 102 | align-items: center; 103 | gap: 5rem; 104 | width: 100%; 105 | max-width: 1280px; 106 | padding: 1rem 1rem 0 1rem; 107 | 108 | .btn-selections { 109 | margin-top: 1rem; 110 | display: flex; 111 | width: 100%; 112 | gap: 1rem; 113 | justify-content: space-between; 114 | 115 | @media only screen and (min-width: 992px) { 116 | align-items: center; 117 | } 118 | 119 | .algorithms { 120 | display: flex; 121 | flex-direction: column; 122 | gap: 0.4rem; 123 | 124 | @media only screen and (min-width: 992px) { 125 | flex-direction: row; 126 | gap: 1rem; 127 | } 128 | 129 | #select-algorithm { 130 | display: flex; 131 | align-items: center; 132 | justify-content: space-between; 133 | gap: 1rem; 134 | border-radius: 0.4rem; 135 | cursor: pointer; 136 | font-weight: bold; 137 | background-color: $primary; 138 | font-size: 1rem; 139 | padding: 0.4rem 0.6rem 0.4rem 0.6rem; 140 | 141 | @media only screen and (min-width: 992px) { 142 | padding: 0.6rem 1rem 0.6rem 1rem; 143 | } 144 | 145 | &:hover { 146 | background-color: rgba($color: $primary, $alpha: 0.9); 147 | } 148 | 149 | &:active { 150 | background-color: rgba($color: $primary, $alpha: 0.8); 151 | } 152 | 153 | p { 154 | color: $secondary; 155 | } 156 | 157 | // down arrow 158 | span { 159 | display: flex; 160 | align-items: center; 161 | 162 | svg { 163 | width: 1rem; 164 | } 165 | } 166 | } 167 | 168 | .algorithm-options { 169 | color: $secondary; 170 | display: flex; 171 | flex-direction: column; 172 | position: absolute; 173 | top: 3rem; 174 | left: 0; 175 | background-color: $primary; 176 | border-radius: 0.4rem; 177 | white-space: nowrap; 178 | overflow: hidden; 179 | transition: all 0.2s ease; 180 | visibility: hidden; 181 | transform: translateY(-10px); 182 | opacity: 0; 183 | 184 | .option { 185 | color: $secondary; 186 | cursor: pointer; 187 | font-weight: bold; 188 | padding: 0.4rem 1rem 0.4rem 1rem; 189 | transition: all 0.1s; 190 | overflow: hidden; 191 | 192 | &:hover { 193 | background-color: $tertiary; 194 | color: $primary; 195 | } 196 | } 197 | } 198 | 199 | .algorithm-options.show { 200 | visibility: visible; 201 | opacity: 1; 202 | transform: translateY(0); 203 | } 204 | 205 | .speaker-btn { 206 | cursor: pointer; 207 | width: 2rem; 208 | } 209 | 210 | .speaker-btn.hidden { 211 | display: none; 212 | } 213 | } 214 | 215 | .customization-btns { 216 | display: flex; 217 | flex-direction: column; 218 | justify-content: flex-start; 219 | width: 50%; 220 | gap: 1rem; 221 | 222 | @media only screen and (min-width: 992px) { 223 | flex-direction: row; 224 | justify-content: flex-end; 225 | } 226 | 227 | // select the slider containers 228 | div { 229 | @media only screen and (min-width: 992px) { 230 | flex: 1; 231 | } 232 | 233 | // select the slider inputs 234 | input { 235 | width: 100%; 236 | margin-top: 0.3rem; 237 | } 238 | } 239 | } 240 | } 241 | 242 | #bar-container { 243 | margin-top: auto; 244 | display: flex; 245 | justify-content: center; 246 | align-items: flex-end; 247 | width: 100%; 248 | height: 80%; 249 | 250 | .bar { 251 | background: linear-gradient(0deg, rgba(22, 22, 22, 1) 5%, rgba(210, 210, 210, 1) 100%); 252 | } 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import "./style.scss"; 2 | import BubbleSort from "./algorithms/BubbleSort"; 3 | import Shuffle from "./utils/Shuffle"; 4 | import DisplayBars from "./utils/DisplayBars"; 5 | import Quicksort from "./algorithms/Quicksort"; 6 | import InsertionSort from "./algorithms/InsertionSort"; 7 | import MergeSort from "./algorithms/MergeSort"; 8 | import SelectionSort from "./algorithms/SelectionSort"; 9 | import RadixSort from "./algorithms/RadixSort"; 10 | import BucketSort from "./algorithms/BucketSort"; 11 | import HeapSort from "./algorithms/HeapSort"; 12 | import IsSorted from "./utils/IsSorted"; 13 | 14 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 15 | 16 | let barsLength = 50; 17 | let bars = []; 18 | let currentlySelectedAlgorithm = "Quicksort"; 19 | export let speed = 50; // the speed the algorithms execute in milliseconds 20 | let algorithmRunning = false; 21 | export let soundOn = true; 22 | 23 | // create the bars initially or whenever the user changes the bars length size 24 | function InitBars() { 25 | for (let i = 1; i <= barsLength; i++) { 26 | bars.push(i); 27 | } 28 | } 29 | 30 | // display the final sweep of the full array for a nice visual touch 31 | async function VisualizeFinal() { 32 | for (let i = 0; i < barsLength; i++) { 33 | if (i - 1 >= 0 && i + 1 < barsLength) { 34 | DisplayBars(bars, [i - 1, i, i + 1]); 35 | } else if (i - 1 >= 0) { 36 | DisplayBars(bars, [i - 1, i]); 37 | } else { 38 | DisplayBars(bars, [i, i + 1]); 39 | } 40 | await delay(barsLength < 100 ? 30 : speed); 41 | } 42 | 43 | DisplayBars(bars); 44 | } 45 | 46 | const selectAlgorithmBtn = document.getElementById("select-algorithm"); 47 | const algorithmOptions = document.querySelector(".algorithm-options"); 48 | const sizeSlider = document.getElementById("size-slider"); 49 | const visualizeBtn = document.getElementById("visualize-btn"); 50 | const shuffleBtn = document.getElementById("shuffle-btn"); 51 | const speedSlider = document.getElementById("speed-slider"); 52 | const speakerBtnOn = document.querySelector(".speaker-btn-on"); 53 | const speakerBtnOff = document.querySelector(".speaker-btn-off"); 54 | 55 | // hide or open dropdown list for algorithms 56 | selectAlgorithmBtn.addEventListener("click", function (event) { 57 | algorithmOptions.classList.toggle("show"); 58 | event.stopPropagation(); 59 | }); 60 | 61 | // add listener to each algorithm option in dropdown list 62 | algorithmOptions.querySelectorAll("div").forEach(function (option) { 63 | option.addEventListener("click", function () { 64 | selectAlgorithmBtn.querySelector("p").textContent = option.textContent; 65 | currentlySelectedAlgorithm = option.textContent; 66 | visualizeBtn.textContent = `Visualize ${option.textContent}`; 67 | algorithmOptions.classList.remove("show"); 68 | }); 69 | }); 70 | 71 | // close dropdown menu when user clicks anywhere else on screen 72 | document.addEventListener("click", function (event) { 73 | let targetElement = event.target; 74 | let clickInsideDropdown = 75 | algorithmOptions.contains(targetElement) || selectAlgorithmBtn.contains(targetElement); 76 | 77 | if (!clickInsideDropdown && algorithmOptions.classList.contains("show")) { 78 | algorithmOptions.classList.remove("show"); 79 | } 80 | }); 81 | 82 | speakerBtnOn.addEventListener("click", function () { 83 | if (soundOn) { 84 | soundOn = false; 85 | } else { 86 | soundOn = true; 87 | } 88 | 89 | speakerBtnOn.classList.toggle("hidden"); 90 | speakerBtnOff.classList.toggle("hidden"); 91 | }); 92 | 93 | speakerBtnOff.addEventListener("click", function () { 94 | if (!soundOn) { 95 | soundOn = true; 96 | } else { 97 | soundOn = false; 98 | } 99 | 100 | speakerBtnOff.classList.toggle("hidden"); 101 | speakerBtnOn.classList.toggle("hidden"); 102 | }); 103 | 104 | // disable size slider when algorithm is running 105 | function toggleSliderDisabledState(isDisabled) { 106 | const slider = document.getElementById("size-slider"); 107 | slider.disabled = isDisabled; 108 | } 109 | 110 | // adjust the amount of bars 111 | sizeSlider.addEventListener("input", function () { 112 | if (!algorithmRunning) { 113 | const sizeValue = parseInt(this.value); 114 | document.getElementById("size-value").textContent = sizeValue; 115 | barsLength = sizeValue; 116 | bars = []; 117 | InitBars(); 118 | DisplayBars(bars); 119 | } 120 | }); 121 | 122 | // adjust the speed of the sorting algorithm 123 | speedSlider.addEventListener("input", function () { 124 | const speedValue = parseInt(this.value); 125 | document.getElementById("speed-value").textContent = speedValue + "ms"; 126 | speed = speedValue; 127 | }); 128 | 129 | // start the sorting algorithm 130 | visualizeBtn.addEventListener("click", async function () { 131 | if (algorithmRunning) return; 132 | 133 | algorithmRunning = true; 134 | toggleSliderDisabledState(true); // disable size adjustment slider 135 | let isSorted = await IsSorted(bars); // check if the array is already sorted 136 | if (!isSorted) { 137 | switch (currentlySelectedAlgorithm) { 138 | case "Quicksort": 139 | await Quicksort(bars, 0, barsLength - 1); 140 | break; 141 | case "Bubble Sort": 142 | await BubbleSort(bars); 143 | break; 144 | case "Insertion Sort": 145 | await InsertionSort(bars, 0, barsLength - 1); 146 | break; 147 | case "Merge Sort": 148 | await MergeSort(bars, 0, barsLength); 149 | break; 150 | case "Selection Sort": 151 | await SelectionSort(bars, barsLength); 152 | break; 153 | case "Radix Sort": 154 | let newBars = await RadixSort(bars); 155 | bars = []; 156 | bars = [...newBars]; 157 | break; 158 | case "Bucket Sort": 159 | await BucketSort(bars); 160 | break; 161 | case "Heap Sort": 162 | await HeapSort(bars); 163 | break; 164 | default: 165 | return; 166 | } 167 | } 168 | 169 | await VisualizeFinal(); 170 | algorithmRunning = false; 171 | toggleSliderDisabledState(false); 172 | }); 173 | 174 | // shuffle the bars/array 175 | shuffleBtn.addEventListener("click", function () { 176 | if (algorithmRunning) return; 177 | 178 | Shuffle(bars); 179 | DisplayBars(bars); 180 | }); 181 | 182 | InitBars(); 183 | DisplayBars(bars); 184 | --------------------------------------------------------------------------------