@@ -0,0 +1,777 @@ |
| | 1 | +let array = []; |
| | 2 | +let arraySize = 20; |
| | 3 | +let selectedAlgorithm = 'bubble'; |
| | 4 | +let sorting = false; |
| | 5 | +let comparisons = 0; |
| | 6 | +let swaps = 0; |
| | 7 | +let attempts = 0; |
| | 8 | + |
| | 9 | +const asciiChars = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█']; |
| | 10 | + |
| | 11 | +// Audio context and sound system |
| | 12 | +let audioContext; |
| | 13 | +let isSoundEnabled = true; |
| | 14 | +let slideWhistleOscillator; |
| | 15 | +let slideWhistleGain; |
| | 16 | +let startTime; |
| | 17 | +let totalSortingTime = 10; // Will be dynamically adjusted |
| | 18 | + |
| | 19 | +function initAudio() { |
| | 20 | + if (!audioContext) { |
| | 21 | + audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
| | 22 | + } |
| | 23 | +} |
| | 24 | + |
| | 25 | +function startSlideWhistle() { |
| | 26 | + if (!isSoundEnabled || !audioContext) return; |
| | 27 | + |
| | 28 | + // Create oscillator and gain for slide whistle |
| | 29 | + slideWhistleOscillator = audioContext.createOscillator(); |
| | 30 | + slideWhistleGain = audioContext.createGain(); |
| | 31 | + |
| | 32 | + slideWhistleOscillator.type = 'sine'; |
| | 33 | + |
| | 34 | + // Start at low frequency |
| | 35 | + slideWhistleOscillator.frequency.setValueAtTime(200, audioContext.currentTime); |
| | 36 | + |
| | 37 | + // Estimate sorting time based on array size and algorithm |
| | 38 | + totalSortingTime = estimateSortingTime(); |
| | 39 | + |
| | 40 | + // Schedule a smooth frequency ramp over the estimated time |
| | 41 | + slideWhistleOscillator.frequency.exponentialRampToValueAtTime( |
| | 42 | + 800, |
| | 43 | + audioContext.currentTime + totalSortingTime |
| | 44 | + ); |
| | 45 | + |
| | 46 | + slideWhistleGain.gain.setValueAtTime(0.15, audioContext.currentTime); |
| | 47 | + |
| | 48 | + slideWhistleOscillator.connect(slideWhistleGain); |
| | 49 | + slideWhistleGain.connect(audioContext.destination); |
| | 50 | + |
| | 51 | + slideWhistleOscillator.start(); |
| | 52 | + startTime = audioContext.currentTime; |
| | 53 | +} |
| | 54 | + |
| | 55 | +function estimateSortingTime() { |
| | 56 | + // Estimate based on array size and algorithm complexity |
| | 57 | + const baseTime = array.length * getDelay() / 1000; |
| | 58 | + |
| | 59 | + switch(selectedAlgorithm) { |
| | 60 | + case 'bubble': |
| | 61 | + case 'selection': |
| | 62 | + case 'insertion': |
| | 63 | + case 'cocktail': |
| | 64 | + return baseTime * array.length * 0.5; |
| | 65 | + case 'quick': |
| | 66 | + case 'merge': |
| | 67 | + case 'heap': |
| | 68 | + return baseTime * Math.log2(array.length) * 2; |
| | 69 | + case 'shell': |
| | 70 | + return baseTime * array.length * 0.3; |
| | 71 | + case 'radix': |
| | 72 | + return baseTime * 3; |
| | 73 | + case 'gnome': |
| | 74 | + return baseTime * array.length * 0.7; |
| | 75 | + case 'bogo': |
| | 76 | + return baseTime * 10; // Who knows! |
| | 77 | + default: |
| | 78 | + return baseTime * array.length * 0.5; |
| | 79 | + } |
| | 80 | +} |
| | 81 | + |
| | 82 | +function updateSlideWhistle(progress) { |
| | 83 | + // With exponential ramping, we don't need to update manually |
| | 84 | + // The Web Audio API handles the smooth transition |
| | 85 | +} |
| | 86 | + |
| | 87 | +function stopSlideWhistle() { |
| | 88 | + if (!slideWhistleOscillator) return; |
| | 89 | + |
| | 90 | + // Cancel any scheduled frequency changes |
| | 91 | + slideWhistleOscillator.frequency.cancelScheduledValues(audioContext.currentTime); |
| | 92 | + |
| | 93 | + // Set current frequency and fade out |
| | 94 | + const currentFreq = slideWhistleOscillator.frequency.value; |
| | 95 | + slideWhistleOscillator.frequency.setValueAtTime(currentFreq, audioContext.currentTime); |
| | 96 | + |
| | 97 | + // Smooth fade out |
| | 98 | + slideWhistleGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.2); |
| | 99 | + |
| | 100 | + setTimeout(() => { |
| | 101 | + if (slideWhistleOscillator) { |
| | 102 | + slideWhistleOscillator.stop(); |
| | 103 | + slideWhistleOscillator = null; |
| | 104 | + slideWhistleGain = null; |
| | 105 | + } |
| | 106 | + }, 200); |
| | 107 | +} |
| | 108 | + |
| | 109 | +function playZoot() { |
| | 110 | + if (!isSoundEnabled || !audioContext) return; |
| | 111 | + |
| | 112 | + // Create a fun "zoot" sound with multiple components |
| | 113 | + const oscillator1 = audioContext.createOscillator(); |
| | 114 | + const oscillator2 = audioContext.createOscillator(); |
| | 115 | + const oscillator3 = audioContext.createOscillator(); |
| | 116 | + const gainNode = audioContext.createGain(); |
| | 117 | + const filter = audioContext.createBiquadFilter(); |
| | 118 | + |
| | 119 | + // Three oscillators for a richer, more satisfying sound |
| | 120 | + oscillator1.type = 'sawtooth'; |
| | 121 | + oscillator2.type = 'square'; |
| | 122 | + oscillator3.type = 'triangle'; |
| | 123 | + |
| | 124 | + // Quick frequency sweep for "zoot" effect |
| | 125 | + const now = audioContext.currentTime; |
| | 126 | + |
| | 127 | + // Main sweep |
| | 128 | + oscillator1.frequency.setValueAtTime(800, now); |
| | 129 | + oscillator1.frequency.exponentialRampToValueAtTime(1600, now + 0.05); |
| | 130 | + oscillator1.frequency.exponentialRampToValueAtTime(400, now + 0.15); |
| | 131 | + oscillator1.frequency.exponentialRampToValueAtTime(800, now + 0.25); |
| | 132 | + |
| | 133 | + // Harmonic sweep |
| | 134 | + oscillator2.frequency.setValueAtTime(400, now); |
| | 135 | + oscillator2.frequency.exponentialRampToValueAtTime(800, now + 0.05); |
| | 136 | + oscillator2.frequency.exponentialRampToValueAtTime(200, now + 0.15); |
| | 137 | + oscillator2.frequency.exponentialRampToValueAtTime(400, now + 0.25); |
| | 138 | + |
| | 139 | + // Sub bass sweep |
| | 140 | + oscillator3.frequency.setValueAtTime(100, now); |
| | 141 | + oscillator3.frequency.exponentialRampToValueAtTime(200, now + 0.1); |
| | 142 | + oscillator3.frequency.exponentialRampToValueAtTime(50, now + 0.25); |
| | 143 | + |
| | 144 | + // Filter sweep for extra "zoot" character |
| | 145 | + filter.type = 'bandpass'; |
| | 146 | + filter.frequency.setValueAtTime(400, now); |
| | 147 | + filter.frequency.exponentialRampToValueAtTime(2000, now + 0.1); |
| | 148 | + filter.frequency.exponentialRampToValueAtTime(800, now + 0.25); |
| | 149 | + filter.Q.value = 5; |
| | 150 | + |
| | 151 | + // Envelope |
| | 152 | + gainNode.gain.setValueAtTime(0, now); |
| | 153 | + gainNode.gain.linearRampToValueAtTime(0.4, now + 0.02); |
| | 154 | + gainNode.gain.linearRampToValueAtTime(0.3, now + 0.1); |
| | 155 | + gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.4); |
| | 156 | + |
| | 157 | + // Connect |
| | 158 | + oscillator1.connect(filter); |
| | 159 | + oscillator2.connect(filter); |
| | 160 | + oscillator3.connect(filter); |
| | 161 | + filter.connect(gainNode); |
| | 162 | + gainNode.connect(audioContext.destination); |
| | 163 | + |
| | 164 | + // Play |
| | 165 | + oscillator1.start(); |
| | 166 | + oscillator2.start(); |
| | 167 | + oscillator3.start(); |
| | 168 | + oscillator1.stop(now + 0.4); |
| | 169 | + oscillator2.stop(now + 0.4); |
| | 170 | + oscillator3.stop(now + 0.4); |
| | 171 | +} |
| | 172 | + |
| | 173 | +// Add a function to calculate sorting progress |
| | 174 | +function getSortingProgress() { |
| | 175 | + let sortedCount = 0; |
| | 176 | + const rows = document.querySelectorAll('.bar-row'); |
| | 177 | + rows.forEach(row => { |
| | 178 | + if (row.classList.contains('sorted')) { |
| | 179 | + sortedCount++; |
| | 180 | + } |
| | 181 | + }); |
| | 182 | + return sortedCount / array.length; |
| | 183 | +} |
| | 184 | + |
| | 185 | +// Toggle sound on/off |
| | 186 | +function toggleSound() { |
| | 187 | + isSoundEnabled = !isSoundEnabled; |
| | 188 | + const soundBtn = document.getElementById('soundBtn'); |
| | 189 | + soundBtn.textContent = isSoundEnabled ? 'SOUND: ON' : 'SOUND: OFF'; |
| | 190 | + |
| | 191 | + // If sound is turned off while playing, stop the whistle |
| | 192 | + if (!isSoundEnabled && slideWhistleOscillator) { |
| | 193 | + stopSlideWhistle(); |
| | 194 | + } |
| | 195 | +} |
| | 196 | + |
| | 197 | +function generateArray() { |
| | 198 | + // Use smaller array for Bogo Sort |
| | 199 | + if (selectedAlgorithm === 'bogo') { |
| | 200 | + arraySize = 5; // Much smaller for Bogo! |
| | 201 | + document.getElementById('arraySize').textContent = arraySize; |
| | 202 | + } else if (arraySize === 5 && selectedAlgorithm !== 'bogo') { |
| | 203 | + arraySize = 20; // Reset to normal size |
| | 204 | + document.getElementById('arraySize').textContent = arraySize; |
| | 205 | + } |
| | 206 | + |
| | 207 | + array = []; |
| | 208 | + for (let i = 0; i < arraySize; i++) { |
| | 209 | + array.push(Math.floor(Math.random() * 90) + 10); |
| | 210 | + } |
| | 211 | + renderArray(); |
| | 212 | + resetStats(); |
| | 213 | +} |
| | 214 | + |
| | 215 | +function getAsciiBar(value, maxValue) { |
| | 216 | + const normalized = value / maxValue; |
| | 217 | + const maxBarLength = window.innerWidth < 768 ? 20 : 40; |
| | 218 | + const barLength = Math.floor(normalized * maxBarLength); |
| | 219 | + let bar = ''; |
| | 220 | + |
| | 221 | + for (let i = 0; i < barLength; i++) { |
| | 222 | + bar += asciiChars[Math.min(7, Math.floor(i / 5))]; |
| | 223 | + } |
| | 224 | + |
| | 225 | + return bar; |
| | 226 | +} |
| | 227 | + |
| | 228 | +function renderArray() { |
| | 229 | + const container = document.getElementById('visualization'); |
| | 230 | + const maxValue = Math.max(...array); |
| | 231 | + const isMobile = window.innerWidth < 768; |
| | 232 | + const borderLength = isMobile ? 30 : 50; |
| | 233 | + const padLength = isMobile ? 20 : 40; |
| | 234 | + let asciiDisplay = ''; |
| | 235 | + |
| | 236 | + // Top border |
| | 237 | + asciiDisplay += '┌' + '─'.repeat(borderLength) + '┐\n'; |
| | 238 | + |
| | 239 | + // Array visualization |
| | 240 | + array.forEach((value, index) => { |
| | 241 | + const bar = getAsciiBar(value, maxValue); |
| | 242 | + const paddedValue = String(value).padStart(3, '0'); |
| | 243 | + const paddedIndex = String(index).padStart(2, '0'); |
| | 244 | + if (isMobile) { |
| | 245 | + asciiDisplay += `│${paddedIndex}:[${paddedValue}]${bar.padEnd(padLength, ' ')}│\n`; |
| | 246 | + } else { |
| | 247 | + asciiDisplay += `│ ${paddedIndex}: [${paddedValue}] ${bar.padEnd(padLength, ' ')}│\n`; |
| | 248 | + } |
| | 249 | + }); |
| | 250 | + |
| | 251 | + // Bottom border |
| | 252 | + asciiDisplay += '└' + '─'.repeat(borderLength) + '┘'; |
| | 253 | + |
| | 254 | + container.innerHTML = asciiDisplay.split('\n').map((line, index) => { |
| | 255 | + if (index > 0 && index <= array.length) { |
| | 256 | + return `<span class="bar-row" data-index="${index-1}">${line}</span>`; |
| | 257 | + } |
| | 258 | + return `<span>${line}</span>`; |
| | 259 | + }).join('\n'); |
| | 260 | +} |
| | 261 | + |
| | 262 | +function resetStats() { |
| | 263 | + comparisons = 0; |
| | 264 | + swaps = 0; |
| | 265 | + attempts = 0; |
| | 266 | + updateStats(); |
| | 267 | +} |
| | 268 | + |
| | 269 | +function updateStats() { |
| | 270 | + document.getElementById('comparisons').textContent = String(comparisons).padStart(4, '0'); |
| | 271 | + document.getElementById('swaps').textContent = String(swaps).padStart(4, '0'); |
| | 272 | + document.getElementById('attempts').textContent = String(attempts).padStart(4, '0'); |
| | 273 | +} |
| | 274 | + |
| | 275 | +function selectAlgorithm(algo) { |
| | 276 | + selectedAlgorithm = algo; |
| | 277 | + document.querySelectorAll('.algorithm-btn').forEach(btn => { |
| | 278 | + btn.classList.remove('active'); |
| | 279 | + }); |
| | 280 | + event.target.classList.add('active'); |
| | 281 | + |
| | 282 | + // Show/hide attempts counter for Bogo Sort |
| | 283 | + const attemptsContainer = document.getElementById('attemptsContainer'); |
| | 284 | + if (algo === 'bogo') { |
| | 285 | + attemptsContainer.style.display = 'block'; |
| | 286 | + generateArray(); // Auto-generate smaller array for Bogo |
| | 287 | + } else { |
| | 288 | + attemptsContainer.style.display = 'none'; |
| | 289 | + if (arraySize === 5) { |
| | 290 | + generateArray(); // Reset to normal size |
| | 291 | + } |
| | 292 | + } |
| | 293 | +} |
| | 294 | + |
| | 295 | +async function startSort() { |
| | 296 | + if (sorting) return; |
| | 297 | + |
| | 298 | + sorting = true; |
| | 299 | + document.getElementById('startBtn').disabled = true; |
| | 300 | + resetStats(); |
| | 301 | + |
| | 302 | + // Initialize audio on user interaction |
| | 303 | + initAudio(); |
| | 304 | + |
| | 305 | + // Start slide whistle |
| | 306 | + startSlideWhistle(); |
| | 307 | + |
| | 308 | + switch (selectedAlgorithm) { |
| | 309 | + case 'bubble': |
| | 310 | + await bubbleSort(); |
| | 311 | + break; |
| | 312 | + case 'selection': |
| | 313 | + await selectionSort(); |
| | 314 | + break; |
| | 315 | + case 'insertion': |
| | 316 | + await insertionSort(); |
| | 317 | + break; |
| | 318 | + case 'quick': |
| | 319 | + await quickSort(0, array.length - 1); |
| | 320 | + break; |
| | 321 | + case 'merge': |
| | 322 | + await mergeSort(0, array.length - 1); |
| | 323 | + break; |
| | 324 | + case 'heap': |
| | 325 | + await heapSort(); |
| | 326 | + break; |
| | 327 | + case 'shell': |
| | 328 | + await shellSort(); |
| | 329 | + break; |
| | 330 | + case 'cocktail': |
| | 331 | + await cocktailSort(); |
| | 332 | + break; |
| | 333 | + case 'radix': |
| | 334 | + await radixSort(); |
| | 335 | + break; |
| | 336 | + case 'gnome': |
| | 337 | + await gnomeSort(); |
| | 338 | + break; |
| | 339 | + case 'bogo': |
| | 340 | + await bogoSort(); |
| | 341 | + break; |
| | 342 | + } |
| | 343 | + |
| | 344 | + // Stop slide whistle and play zoot |
| | 345 | + stopSlideWhistle(); |
| | 346 | + playZoot(); |
| | 347 | + |
| | 348 | + markAllSorted(); |
| | 349 | + sorting = false; |
| | 350 | + document.getElementById('startBtn').disabled = false; |
| | 351 | +} |
| | 352 | + |
| | 353 | +function getDelay() { |
| | 354 | + return 101 - document.getElementById('speedSlider').value; |
| | 355 | +} |
| | 356 | + |
| | 357 | +async function sleep(ms) { |
| | 358 | + return new Promise(resolve => setTimeout(resolve, ms)); |
| | 359 | +} |
| | 360 | + |
| | 361 | +async function compare(i, j) { |
| | 362 | + comparisons++; |
| | 363 | + updateStats(); |
| | 364 | + const rows = document.querySelectorAll('.bar-row'); |
| | 365 | + if (rows[i]) rows[i].classList.add('comparing'); |
| | 366 | + if (rows[j]) rows[j].classList.add('comparing'); |
| | 367 | + |
| | 368 | + // Subtle pitch update during comparisons for continuous glissando |
| | 369 | + const progress = getSortingProgress(); |
| | 370 | + updateSlideWhistle(progress); |
| | 371 | + |
| | 372 | + await sleep(getDelay()); |
| | 373 | + if (rows[i]) rows[i].classList.remove('comparing'); |
| | 374 | + if (rows[j]) rows[j].classList.remove('comparing'); |
| | 375 | +} |
| | 376 | + |
| | 377 | +async function swap(i, j) { |
| | 378 | + swaps++; |
| | 379 | + updateStats(); |
| | 380 | + |
| | 381 | + const temp = array[i]; |
| | 382 | + array[i] = array[j]; |
| | 383 | + array[j] = temp; |
| | 384 | + |
| | 385 | + renderArray(); |
| | 386 | + |
| | 387 | + // Update slide whistle pitch based on progress |
| | 388 | + const progress = getSortingProgress(); |
| | 389 | + updateSlideWhistle(progress); |
| | 390 | + |
| | 391 | + await sleep(getDelay()); |
| | 392 | +} |
| | 393 | + |
| | 394 | +async function bubbleSort() { |
| | 395 | + for (let i = 0; i < array.length - 1; i++) { |
| | 396 | + for (let j = 0; j < array.length - i - 1; j++) { |
| | 397 | + await compare(j, j + 1); |
| | 398 | + if (array[j] > array[j + 1]) { |
| | 399 | + await swap(j, j + 1); |
| | 400 | + } |
| | 401 | + } |
| | 402 | + document.querySelectorAll('.bar-row')[array.length - i - 1].classList.add('sorted'); |
| | 403 | + |
| | 404 | + // Update slide whistle pitch |
| | 405 | + const progress = getSortingProgress(); |
| | 406 | + updateSlideWhistle(progress); |
| | 407 | + } |
| | 408 | + document.querySelectorAll('.bar-row')[0].classList.add('sorted'); |
| | 409 | +} |
| | 410 | + |
| | 411 | +async function selectionSort() { |
| | 412 | + for (let i = 0; i < array.length - 1; i++) { |
| | 413 | + let minIdx = i; |
| | 414 | + for (let j = i + 1; j < array.length; j++) { |
| | 415 | + await compare(minIdx, j); |
| | 416 | + if (array[j] < array[minIdx]) { |
| | 417 | + minIdx = j; |
| | 418 | + } |
| | 419 | + } |
| | 420 | + if (minIdx !== i) { |
| | 421 | + await swap(i, minIdx); |
| | 422 | + } |
| | 423 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 424 | + |
| | 425 | + // Update slide whistle pitch |
| | 426 | + const progress = getSortingProgress(); |
| | 427 | + updateSlideWhistle(progress); |
| | 428 | + } |
| | 429 | + document.querySelectorAll('.bar-row')[array.length - 1].classList.add('sorted'); |
| | 430 | +} |
| | 431 | + |
| | 432 | +async function insertionSort() { |
| | 433 | + for (let i = 1; i < array.length; i++) { |
| | 434 | + let j = i - 1; |
| | 435 | + let key = array[i]; |
| | 436 | + |
| | 437 | + while (j >= 0 && array[j] > key) { |
| | 438 | + await compare(j, j + 1); |
| | 439 | + array[j + 1] = array[j]; |
| | 440 | + renderArray(); |
| | 441 | + j--; |
| | 442 | + await sleep(getDelay()); |
| | 443 | + } |
| | 444 | + |
| | 445 | + array[j + 1] = key; |
| | 446 | + renderArray(); |
| | 447 | + document.querySelectorAll('.bar-row')[j + 1].classList.add('sorted'); |
| | 448 | + } |
| | 449 | + markAllSorted(); |
| | 450 | +} |
| | 451 | + |
| | 452 | +async function quickSort(low, high) { |
| | 453 | + if (low < high) { |
| | 454 | + let pi = await partition(low, high); |
| | 455 | + await quickSort(low, pi - 1); |
| | 456 | + await quickSort(pi + 1, high); |
| | 457 | + } |
| | 458 | +} |
| | 459 | + |
| | 460 | +async function partition(low, high) { |
| | 461 | + let pivot = array[high]; |
| | 462 | + let i = low - 1; |
| | 463 | + |
| | 464 | + for (let j = low; j < high; j++) { |
| | 465 | + await compare(j, high); |
| | 466 | + if (array[j] < pivot) { |
| | 467 | + i++; |
| | 468 | + await swap(i, j); |
| | 469 | + } |
| | 470 | + } |
| | 471 | + |
| | 472 | + await swap(i + 1, high); |
| | 473 | + return i + 1; |
| | 474 | +} |
| | 475 | + |
| | 476 | +async function mergeSort(left, right) { |
| | 477 | + if (left < right) { |
| | 478 | + let mid = Math.floor((left + right) / 2); |
| | 479 | + await mergeSort(left, mid); |
| | 480 | + await mergeSort(mid + 1, right); |
| | 481 | + await merge(left, mid, right); |
| | 482 | + } |
| | 483 | +} |
| | 484 | + |
| | 485 | +async function merge(left, mid, right) { |
| | 486 | + let leftArr = array.slice(left, mid + 1); |
| | 487 | + let rightArr = array.slice(mid + 1, right + 1); |
| | 488 | + let i = 0, j = 0, k = left; |
| | 489 | + |
| | 490 | + while (i < leftArr.length && j < rightArr.length) { |
| | 491 | + await compare(left + i, mid + 1 + j); |
| | 492 | + if (leftArr[i] <= rightArr[j]) { |
| | 493 | + array[k] = leftArr[i]; |
| | 494 | + i++; |
| | 495 | + } else { |
| | 496 | + array[k] = rightArr[j]; |
| | 497 | + j++; |
| | 498 | + } |
| | 499 | + k++; |
| | 500 | + renderArray(); |
| | 501 | + await sleep(getDelay()); |
| | 502 | + } |
| | 503 | + |
| | 504 | + while (i < leftArr.length) { |
| | 505 | + array[k] = leftArr[i]; |
| | 506 | + i++; |
| | 507 | + k++; |
| | 508 | + renderArray(); |
| | 509 | + await sleep(getDelay()); |
| | 510 | + } |
| | 511 | + |
| | 512 | + while (j < rightArr.length) { |
| | 513 | + array[k] = rightArr[j]; |
| | 514 | + j++; |
| | 515 | + k++; |
| | 516 | + renderArray(); |
| | 517 | + await sleep(getDelay()); |
| | 518 | + } |
| | 519 | +} |
| | 520 | + |
| | 521 | +// Heap Sort |
| | 522 | +async function heapSort() { |
| | 523 | + // Build max heap |
| | 524 | + for (let i = Math.floor(array.length / 2) - 1; i >= 0; i--) { |
| | 525 | + await heapify(array.length, i); |
| | 526 | + } |
| | 527 | + |
| | 528 | + // Extract elements from heap one by one |
| | 529 | + for (let i = array.length - 1; i > 0; i--) { |
| | 530 | + await swap(0, i); |
| | 531 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 532 | + await heapify(i, 0); |
| | 533 | + |
| | 534 | + // Update slide whistle pitch |
| | 535 | + const progress = getSortingProgress(); |
| | 536 | + updateSlideWhistle(progress); |
| | 537 | + } |
| | 538 | + document.querySelectorAll('.bar-row')[0].classList.add('sorted'); |
| | 539 | +} |
| | 540 | + |
| | 541 | +async function heapify(n, i) { |
| | 542 | + let largest = i; |
| | 543 | + let left = 2 * i + 1; |
| | 544 | + let right = 2 * i + 2; |
| | 545 | + |
| | 546 | + if (left < n) { |
| | 547 | + await compare(left, largest); |
| | 548 | + if (array[left] > array[largest]) { |
| | 549 | + largest = left; |
| | 550 | + } |
| | 551 | + } |
| | 552 | + |
| | 553 | + if (right < n) { |
| | 554 | + await compare(right, largest); |
| | 555 | + if (array[right] > array[largest]) { |
| | 556 | + largest = right; |
| | 557 | + } |
| | 558 | + } |
| | 559 | + |
| | 560 | + if (largest !== i) { |
| | 561 | + await swap(i, largest); |
| | 562 | + await heapify(n, largest); |
| | 563 | + } |
| | 564 | +} |
| | 565 | + |
| | 566 | +// Shell Sort |
| | 567 | +async function shellSort() { |
| | 568 | + let gap = Math.floor(array.length / 2); |
| | 569 | + |
| | 570 | + while (gap > 0) { |
| | 571 | + for (let i = gap; i < array.length; i++) { |
| | 572 | + let temp = array[i]; |
| | 573 | + let j = i; |
| | 574 | + |
| | 575 | + while (j >= gap) { |
| | 576 | + await compare(j - gap, j); |
| | 577 | + if (array[j - gap] > temp) { |
| | 578 | + array[j] = array[j - gap]; |
| | 579 | + j -= gap; |
| | 580 | + renderArray(); |
| | 581 | + await sleep(getDelay()); |
| | 582 | + } else { |
| | 583 | + break; |
| | 584 | + } |
| | 585 | + } |
| | 586 | + |
| | 587 | + array[j] = temp; |
| | 588 | + renderArray(); |
| | 589 | + await sleep(getDelay()); |
| | 590 | + } |
| | 591 | + |
| | 592 | + gap = Math.floor(gap / 2); |
| | 593 | + } |
| | 594 | + |
| | 595 | + // Mark all as sorted |
| | 596 | + for (let i = 0; i < array.length; i++) { |
| | 597 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 598 | + } |
| | 599 | +} |
| | 600 | + |
| | 601 | +// Cocktail Sort (Bidirectional Bubble Sort) |
| | 602 | +async function cocktailSort() { |
| | 603 | + let swapped = true; |
| | 604 | + let start = 0; |
| | 605 | + let end = array.length - 1; |
| | 606 | + |
| | 607 | + while (swapped) { |
| | 608 | + swapped = false; |
| | 609 | + |
| | 610 | + // Forward pass (like bubble sort) |
| | 611 | + for (let i = start; i < end; i++) { |
| | 612 | + await compare(i, i + 1); |
| | 613 | + if (array[i] > array[i + 1]) { |
| | 614 | + await swap(i, i + 1); |
| | 615 | + swapped = true; |
| | 616 | + } |
| | 617 | + } |
| | 618 | + |
| | 619 | + if (!swapped) break; |
| | 620 | + |
| | 621 | + document.querySelectorAll('.bar-row')[end].classList.add('sorted'); |
| | 622 | + end--; |
| | 623 | + swapped = false; |
| | 624 | + |
| | 625 | + // Backward pass |
| | 626 | + for (let i = end; i > start; i--) { |
| | 627 | + await compare(i, i - 1); |
| | 628 | + if (array[i] < array[i - 1]) { |
| | 629 | + await swap(i, i - 1); |
| | 630 | + swapped = true; |
| | 631 | + } |
| | 632 | + } |
| | 633 | + |
| | 634 | + document.querySelectorAll('.bar-row')[start].classList.add('sorted'); |
| | 635 | + start++; |
| | 636 | + } |
| | 637 | + |
| | 638 | + // Mark remaining elements as sorted |
| | 639 | + for (let i = start; i <= end; i++) { |
| | 640 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 641 | + } |
| | 642 | +} |
| | 643 | + |
| | 644 | +// Radix Sort (LSD - Least Significant Digit) |
| | 645 | +async function radixSort() { |
| | 646 | + // Find the maximum number to know number of digits |
| | 647 | + let max = Math.max(...array); |
| | 648 | + |
| | 649 | + // Do counting sort for every digit |
| | 650 | + for (let exp = 1; Math.floor(max / exp) > 0; exp *= 10) { |
| | 651 | + await countingSortByDigit(exp); |
| | 652 | + } |
| | 653 | + |
| | 654 | + // Mark all as sorted |
| | 655 | + for (let i = 0; i < array.length; i++) { |
| | 656 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 657 | + } |
| | 658 | +} |
| | 659 | + |
| | 660 | +async function countingSortByDigit(exp) { |
| | 661 | + let output = new Array(array.length); |
| | 662 | + let count = new Array(10).fill(0); |
| | 663 | + |
| | 664 | + // Store count of occurrences |
| | 665 | + for (let i = 0; i < array.length; i++) { |
| | 666 | + let digit = Math.floor(array[i] / exp) % 10; |
| | 667 | + count[digit]++; |
| | 668 | + } |
| | 669 | + |
| | 670 | + // Change count[i] so it contains actual position |
| | 671 | + for (let i = 1; i < 10; i++) { |
| | 672 | + count[i] += count[i - 1]; |
| | 673 | + } |
| | 674 | + |
| | 675 | + // Build the output array |
| | 676 | + for (let i = array.length - 1; i >= 0; i--) { |
| | 677 | + let digit = Math.floor(array[i] / exp) % 10; |
| | 678 | + output[count[digit] - 1] = array[i]; |
| | 679 | + count[digit]--; |
| | 680 | + |
| | 681 | + // Visual comparison for the digit |
| | 682 | + if (i < array.length - 1) { |
| | 683 | + await compare(i, i + 1); |
| | 684 | + } |
| | 685 | + } |
| | 686 | + |
| | 687 | + // Copy the output array to arr[] |
| | 688 | + for (let i = 0; i < array.length; i++) { |
| | 689 | + array[i] = output[i]; |
| | 690 | + renderArray(); |
| | 691 | + await sleep(getDelay()); |
| | 692 | + } |
| | 693 | +} |
| | 694 | + |
| | 695 | +// Gnome Sort (also called Stupid Sort) |
| | 696 | +async function gnomeSort() { |
| | 697 | + let index = 0; |
| | 698 | + |
| | 699 | + while (index < array.length) { |
| | 700 | + if (index == 0) { |
| | 701 | + index++; |
| | 702 | + } else { |
| | 703 | + await compare(index, index - 1); |
| | 704 | + if (array[index] >= array[index - 1]) { |
| | 705 | + document.querySelectorAll('.bar-row')[index - 1].classList.add('sorted'); |
| | 706 | + index++; |
| | 707 | + } else { |
| | 708 | + await swap(index, index - 1); |
| | 709 | + index--; |
| | 710 | + } |
| | 711 | + } |
| | 712 | + } |
| | 713 | + |
| | 714 | + // Mark the last element as sorted |
| | 715 | + if (array.length > 0) { |
| | 716 | + document.querySelectorAll('.bar-row')[array.length - 1].classList.add('sorted'); |
| | 717 | + } |
| | 718 | +} |
| | 719 | + |
| | 720 | +// Bogo Sort (Warning: This is intentionally terrible!) |
| | 721 | +async function bogoSort() { |
| | 722 | + attempts = 0; |
| | 723 | + const maxAttempts = 10000; // Safety limit to prevent infinite loops |
| | 724 | + |
| | 725 | + while (!isSorted() && attempts < maxAttempts) { |
| | 726 | + // Shuffle the array randomly |
| | 727 | + await shuffleArray(); |
| | 728 | + attempts++; |
| | 729 | + updateStats(); |
| | 730 | + } |
| | 731 | + |
| | 732 | + if (attempts >= maxAttempts) { |
| | 733 | + alert("Bogo Sort gave up after " + maxAttempts + " attempts! Try a smaller array."); |
| | 734 | + } |
| | 735 | + |
| | 736 | + // Mark all as sorted |
| | 737 | + for (let i = 0; i < array.length; i++) { |
| | 738 | + document.querySelectorAll('.bar-row')[i].classList.add('sorted'); |
| | 739 | + } |
| | 740 | +} |
| | 741 | + |
| | 742 | +function isSorted() { |
| | 743 | + for (let i = 0; i < array.length - 1; i++) { |
| | 744 | + if (array[i] > array[i + 1]) { |
| | 745 | + return false; |
| | 746 | + } |
| | 747 | + } |
| | 748 | + return true; |
| | 749 | +} |
| | 750 | + |
| | 751 | +async function shuffleArray() { |
| | 752 | + // Fisher-Yates shuffle with visualization |
| | 753 | + for (let i = array.length - 1; i > 0; i--) { |
| | 754 | + let j = Math.floor(Math.random() * (i + 1)); |
| | 755 | + await compare(i, j); |
| | 756 | + await swap(i, j); |
| | 757 | + } |
| | 758 | +} |
| | 759 | + |
| | 760 | +function markAllSorted() { |
| | 761 | + document.querySelectorAll('.bar-row').forEach(row => { |
| | 762 | + row.classList.add('sorted'); |
| | 763 | + }); |
| | 764 | +} |
| | 765 | + |
| | 766 | +// Initialize |
| | 767 | +generateArray(); |
| | 768 | +document.querySelector('.algorithm-btn').click(); |
| | 769 | + |
| | 770 | +// Re-render on window resize |
| | 771 | +let resizeTimeout; |
| | 772 | +window.addEventListener('resize', () => { |
| | 773 | + clearTimeout(resizeTimeout); |
| | 774 | + resizeTimeout = setTimeout(() => { |
| | 775 | + renderArray(); |
| | 776 | + }, 250); |
| | 777 | +}); |
