[{"id":104,"created_at":"2023-12-08T19:39:32.338728+00:00","html":"\r\n\r\n\r\n\r\n \r\n \r\n Sorting Algorithm Visualizer\r\n \r\n\r\n\r\n \r\n\r\n\r\n\r\n\r\n

\r\n

Bubble Sort Visualizer

\r\n

\r\n \r\n \r\n Speed\r\n \r\n ms\r\n \r\n

\r\n

\r\n\r\n \r\n

\r\n

\r\n\r\n

\r\n\r\n \r\n \r\n

\r\n

\r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n","css":"/* */\r\nbody {\r\n background-color: white;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n font-family: 'Fredoka', sans-serif;\r\n font-weight: lighter;\r\n\r\n}\r\n\r\nh1 {\r\n font-weight: 400;\r\n}\r\n\r\n#arrayInput {\r\n padding: 9;\r\n border-radius: 10px;\r\n border: 3px solid skyblue;\r\n width: 100%;\r\n}\r\n\r\n#visual-container {\r\n display: flex;\r\n /* flex-direction: column; */\r\n gap: 5px;\r\n margin-right: 100px;\r\n height: 300px;\r\n}\r\n\r\n\r\n.bar {\r\n background-color: skyblue;\r\n margin-right: 10px;\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: start;\r\n color: black;\r\n font-size: 14px;\r\n height: 20;\r\n border-radius: 10px;\r\n padding: 10px 2px;\r\n view-transition-name: var(--tag);\r\n}\r\n\r\n.btn-container {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100px;\r\n}\r\n\r\n#start-button {\r\n width: fit-content;\r\n background-color: skyblue;\r\n border: 0px;\r\n border-radius: 30px;\r\n padding: 12px 60px;\r\n cursor: pointer;\r\n\r\n}\r\n\r\n/* Basic styles for dropdown */\r\n.dropdown {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.dropbtn {\r\n background-color: skyblue;\r\n color: black;\r\n padding: 10px;\r\n font-size: 16px;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: 14px;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 7px;\r\n}\r\n\r\n.dropdown-content {\r\n display: none;\r\n position: absolute;\r\n background-color: white;\r\n min-width: 160px;\r\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\r\n z-index: 999;\r\n border-radius: 12px;\r\n}\r\n\r\n.dropdown-content button {\r\n color: black;\r\n padding: 12px 16px;\r\n text-decoration: none;\r\n display: block;\r\n background-color: transparent;\r\n border: 0px;\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-content a:hover {\r\n background-color: #f1f1f1;\r\n cursor: pointer;\r\n}\r\n\r\n.w-full {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.settings {\r\n display: flex;\r\n gap: 4px;\r\n}\r\n\r\n#label-speed {\r\n display: flex;\r\n gap: 4px;\r\n align-items: center;\r\n}\r\n\r\n#label-speed input {\r\n width: 60px;\r\n padding: 5;\r\n border: 0;\r\n outline: 2px solid skyblue;\r\n border-radius: 3px;\r\n}\r\n\r\n#restartBtn {\r\n background-color: skyblue;\r\n border: 0;\r\n padding: 10px;\r\n border-radius: 100%;\r\n cursor: pointer;\r\n margin-left: 10;\r\n}\r\n\r\n\r\n","js":"var value = \"Bubble\"\r\nvar titleElement = document.getElementById('title')\r\nvar visual_container = document.getElementById('visual-container')\r\nvar dataValues = document.getElementById('arrayInput')\r\nvar startButton = document.getElementById('start-button')\r\nvar speedInput = document.getElementById('speed')\r\nvar restartBtn = document.getElementById('restartBtn')\r\nvar speed = 200\r\n\r\n\r\nfunction convertToArray() {\r\n const inputText = dataValues.value\r\n\r\n const numbersArray = inputText.split(',').map(number => parseInt(number.trim(), 10));\r\n return numbersArray\r\n}\r\n\r\nvar data = convertToArray()\r\nvar dataCopy = data.slice()\r\nconst chartContainer = document.querySelector('#visual-container');\r\n\r\nfunction renderChart() {\r\n chartContainer.innerHTML = ''\r\n const maxValue = Math.max(...data);\r\n data.forEach(value => {\r\n const bar = document.createElement('div');\r\n bar.classList.add('bar');\r\n bar.style.setProperty('--tag', `bar-${value}`);\r\n const percentageHeight = (value / maxValue) * 100;\r\n bar.style.height = `${percentageHeight}%`;\r\n bar.textContent = value;\r\n chartContainer.appendChild(bar);\r\n });\r\n}\r\n\r\nconst delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));\r\n\r\n// bubble sort\r\nasync function bubbleSortWithDelay(arr) {\r\n const len = arr.length;\r\n let swapped;\r\n async function sort() {\r\n do {\r\n swapped = false;\r\n for (let i = 0; i < len - 1; i++) {\r\n if (arr[i] > arr[i + 1]) {\r\n const temp = arr[i];\r\n arr[i] = arr[i + 1];\r\n arr[i + 1] = temp;\r\n swapped = true;\r\n console.log(arr); // Log array after each swap\r\n const transition = document.startViewTransition(() => renderChart());\r\n\r\n await delay(speed); // Delay in milliseconds (adjust as needed)\r\n }\r\n }\r\n } while (swapped);\r\n }\r\n\r\n return sort().then(() => arr);\r\n}\r\n//end bubble sort\r\n\r\n\r\n// selection sort\r\nasync function selectionSortWithDelay(arr) {\r\n const len = arr.length;\r\n\r\n for (let i = 0; i < len - 1; i++) {\r\n let minIndex = i;\r\n\r\n for (let j = i + 1; j < len; j++) {\r\n if (arr[j] < arr[minIndex]) {\r\n minIndex = j;\r\n }\r\n }\r\n\r\n if (minIndex !== i) {\r\n const temp = arr[i];\r\n arr[i] = arr[minIndex];\r\n arr[minIndex] = temp;\r\n\r\n // console.log(arr)\r\n const transition = document.startViewTransition(() => renderChart());\r\n\r\n await delay(speed); // Delay in milliseconds\r\n }\r\n }\r\n\r\n return arr;\r\n}\r\n// end selection sort\r\n\r\n// insrtion sort\r\nasync function insertionSortWithDelay(arr) {\r\n const len = arr.length;\r\n\r\n for (let i = 1; i < len; i++) {\r\n let key = arr[i];\r\n let j = i - 1;\r\n\r\n while (j >= 0 && arr[j] > key) {\r\n arr[j + 1] = arr[j];\r\n j--;\r\n }\r\n\r\n arr[j + 1] = key;\r\n await delay(speed); // Delay in milliseconds\r\n const transition = document.startViewTransition(() => renderChart());\r\n }\r\n\r\n return arr;\r\n}\r\n// end insertion sort\r\n\r\n// merge sort algo\r\nasync function mergeSortWithDelay(arr, left = 0, right = arr.length - 1) {\r\n if (left < right) {\r\n const mid = Math.floor((left + right) / 2);\r\n await mergeSortWithDelay(arr, left, mid);\r\n await mergeSortWithDelay(arr, mid + 1, right);\r\n await merge(arr, left, mid, right);\r\n\r\n\r\n }\r\n return arr;\r\n}\r\n\r\nasync function merge(arr, left, mid, right) {\r\n const leftArr = arr.slice(left, mid + 1);\r\n const rightArr = arr.slice(mid + 1, right + 1);\r\n\r\n let i = 0,\r\n j = 0,\r\n k = left;\r\n\r\n while (i < leftArr.length && j < rightArr.length) {\r\n if (leftArr[i] <= rightArr[j]) {\r\n arr[k++] = leftArr[i++];\r\n } else {\r\n arr[k++] = rightArr[j++];\r\n }\r\n }\r\n\r\n while (i < leftArr.length) {\r\n arr[k++] = leftArr[i++];\r\n }\r\n\r\n while (j < rightArr.length) {\r\n arr[k++] = rightArr[j++];\r\n }\r\n\r\n await delay(speed); // Delay in milliseconds\r\n const transition = document.startViewTransition(() => renderChart());\r\n}\r\n\r\n// end merge sort algo\r\n\r\n\r\n\r\n// Initial Render of bars/chart\r\nrenderChart()\r\nstartButton.addEventListener('click', function() {\r\n restart()\r\n startButton.disabled = true\r\n if (value == 'Bubble') {\r\n bubbleSortWithDelay(data)\r\n .then(sortedArray => {\r\n console.log(\"Sorted array:\", sortedArray);\r\n startButton.disabled = false\r\n });\r\n } else if (value == 'Insertion') {\r\n insertionSortWithDelay(data)\r\n .then(sortedArray => {\r\n console.log(\"Sorted array:\", sortedArray);\r\n startButton.disabled = false\r\n });\r\n } else if (value == 'Selection') {\r\n selectionSortWithDelay(data)\r\n .then(sortedArray => {\r\n console.log(\"Sorted array:\", sortedArray);\r\n startButton.disabled = false\r\n });\r\n } else if (value = 'Merge') {\r\n mergeSortWithDelay(data) // Use slice() to create a copy of the array\r\n .then(sortedArray => {\r\n console.log(\"Sorted array:\", sortedArray);\r\n startButton.disabled = false\r\n });\r\n }\r\n});\r\n\r\n// click listener to array input\r\ndataValues.addEventListener('change', function(e) {\r\n try {\r\n data = convertToArray()\r\n renderChart()\r\n } catch (e) {\r\n console.log(e)\r\n }\r\n})\r\n\r\nspeedInput.addEventListener('change', function(e) {\r\n speed = e.target.value\r\n})\r\n// end click lister to array input\r\n\r\n\r\n// drop down stuff\r\nfunction toggleDropdown() {\r\n const dropdown = document.getElementById(\"myDropdown\");\r\n dropdown.style.display = dropdown.style.display === \"block\" ? \"none\" : \"block\";\r\n}\r\n\r\nwindow.onclick = function(event) {\r\n if (!event.target.matches('.dropbtn')) {\r\n const dropdowns = document.getElementsByClassName(\"dropdown-content\");\r\n for (let i = 0; i < dropdowns.length; i++) {\r\n const openDropdown = dropdowns[i];\r\n if (openDropdown.style.display === \"block\") {\r\n openDropdown.style.display = \"none\";\r\n }\r\n }\r\n }\r\n}\r\n\r\n// end drop down stuff\r\n\r\nfunction updateTitle() {\r\n titleElement.innerText = value\r\n}\r\n\r\nfunction bobbleAlgo() {\r\n value = \"Bubble\"\r\n updateTitle()\r\n}\r\n\r\nfunction selectAlgo() {\r\n value = 'Selection'\r\n updateTitle()\r\n\r\n}\r\n\r\nfunction insertAlgo() {\r\n value = 'Insertion'\r\n updateTitle()\r\n}\r\n\r\nfunction mergeAlgo() {\r\n value = 'Merge'\r\n updateTitle()\r\n}\r\n\r\nfunction restart() {\r\n data = convertToArray()\r\n const transition = document.startViewTransition(() => renderChart());\r\n\r\n}\r\n//other sorts\r\n\r\n\r\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"Obw8iQ","description":"Sorting Algorithm Visualizer","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":true,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["algorithm","view transition","view-transition","bubble sort","merge sort","insertion sort","selection sort","bars"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":893}],"profiles":{"username":"devcanvas"}}]