{"id":23065848,"url":"https://github.com/ullaskunder3/algorithm-visualization","last_synced_at":"2025-04-03T08:49:11.131Z","repository":{"id":153852550,"uuid":"365737665","full_name":"ullaskunder3/Algorithm-Visualization","owner":"ullaskunder3","description":"Algorithms are a fascinating,  Learning an algorithm gets much easier with visualizing","archived":false,"fork":false,"pushed_at":"2021-05-09T12:23:06.000Z","size":310,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T22:25:41.288Z","etag":null,"topics":["bubble-sort","javascript","p5js","sorting-algorithms","vanilla-javascript","visualization","vscode"],"latest_commit_sha":null,"homepage":"https://ullaskunder3.github.io/Algorithm-Visualization/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ullaskunder3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-09T11:36:26.000Z","updated_at":"2022-01-29T07:00:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"671b5cb6-dbf4-459d-a95e-575d82e741ff","html_url":"https://github.com/ullaskunder3/Algorithm-Visualization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2FAlgorithm-Visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2FAlgorithm-Visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2FAlgorithm-Visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2FAlgorithm-Visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ullaskunder3","download_url":"https://codeload.github.com/ullaskunder3/Algorithm-Visualization/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246970337,"owners_count":20862508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bubble-sort","javascript","p5js","sorting-algorithms","vanilla-javascript","visualization","vscode"],"created_at":"2024-12-16T05:10:15.152Z","updated_at":"2025-04-03T08:49:11.115Z","avatar_url":"https://github.com/ullaskunder3.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sort Visualization\n\nThis is an example of bubble sort, I will try to upload other Visualization practical\n![example](example.png)\n\n## Table Of Content\n\n- [Bubble Sort Theory](#Bubble-Sort-Theory)\n- [Practical Bubble Sort Visualization](#Practical-Bubble-Sort-Visualization)\n- [File Structure](#file-structure)\n\n## Bubble Sort Theory\n\nBubble Sort| Runtime O(n²) average and worst case. Memort: O(1).\n\nO(n) (Best case) This time complexity can occur if the array is **already sorted**, and that means that no swap occurred and only 1 iteration of n elements\n\nIn bubble sort, we start at the beginning of the array and swap the first two elements if the first is greater than the second. Then, we go to the next pair, and so on, continuously making sweeps of the array until it is sorted. In doing so, the smaller items slowly\"bubble\" up to the beginning of the list.\n\nBubble sort can be implemented as follows:\n\n```Pseudocode\nBubble-sort(a)\n\n  for i = a.length() to 1\n    for j = 1 to i-1\n        if a[j]\u003ea[j+1]\n            swap(a[j],a[j+1]);\n        end if\n```\n\nIn the case of the standard version of the bubble sort, we need to do N iterations. In each iteration, we do the comparison and we perform swapping if required. Given an array of size N, the first iteration performs (N - 1) comparisons. The second iteration performs (N - 2) comparisons. In this way, the total number of comparison will be:\n\n(N - 1) + (N - 2) + (N - 3) + .......+ 3 + 2 + 1 = N(N - 1)/2 = O(N^2)\n\nTake an array of numbers \" 5 1 4 2 8\", and sort the array from lowest number to greatest number using bubble sort. In each step, elements written in **bold** are being compared. Three passes will be required\n\n- **First Pass**\n\n  - ( **5** **1** 4 2 8 ) → ( 1 5 4 2 8 ),\n  - Here, algorithm compares the first two elements, and swaps since 5 \u003e 1.\n  - ( 1 **5** **4** 2 8 ) → ( 1 4 5 2 8 ), Swap since 5 \u003e 4.\n  - ( 1 4 **5** **2** 8 ) → ( 1 4 2 5 8 ), Swap since 5 \u003e 2.\n  - ( 1 4 2 **5** **8** ) → ( 1 4 2 5 8 ),\n  - Now, since these elements are already in order (8 \u003e 5), algorithm does not swap them.\n\n- **Second Pass**\n\n  - ( 1 4 2 5 8 ) → ( 1 4 2 5 8 )\n  - ( 1 **4** **2** 5 8 ) → ( 1 2 4 5 8 ), Swap since 4 \u003e 2.\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n  - Now, the array is already sorted, but the algorithm does not know if it is completed.\n\n*The algorithm needs one additional whole pass without any swap to know it is sorted.*\n\n- **Third Pass**\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n  - ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )\n\n## Practical Bubble Sort Visualization\n\nAll you need is a Vs code(Visual studio code) or any other editor or IDE\n\nI'm using p5.js javascript library which is used for creative coding, Visualization, etc...\\\n\n## file structure\n\n```file\nAlgorithm-Visualization:.\n├── libraries\n│    └──p5.min.js\n│\n├── style.css\n├── script.js\n├── jsconfig.json (not required if you dont use vs code p5 extension)\n└── index.html\n\n```\n\nYou can install p5 extension in vs code and run with live server extension\n\n OR\n\nYou just have to link the p5.min.js from [cdnjs](https://cdnjs.com/libraries/p5.js) in you script that's it!!!\n\nExample\n```js\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js\"\u003e\n\u003c/script\u003e\n```\n\nBasic of p5.js\n\n- `setup()`:\\\n It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts\n\n- `random()`\\\nName itself define it's generate random floating point number between ranges given as the parameter\n\n- `noise()`\\\nnoise() cannot be called without parameter\nif called it will return NaN.\n\nThe range is between 0 and 1\nnoise will always return floating point value\nwill not exced greater than 1\nit will always cluster around 0.5\nthey dont have uniform distribution\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Falgorithm-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fullaskunder3%2Falgorithm-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Falgorithm-visualization/lists"}