baress/BubbleSortCISC121

Algorithm: Bubble Sort

Demo Video

Recording of play-by-play animation (not manual): Recording of manual animation (user must click button for animation to run, leading to enhanced understanding), also displaying vertical bar graph: Recording demonstrating the pause/resume button, as well as the restart button:

Problem Breakdown and Computational Thinking

I chose the Bubble Sort to create for this project, because I think it is an algorithm that can easily be learnt and visualized by others. I think it is also good for demonstrating algorithmic thinking. Hence, I also chose the Bubble Sort because it is very straightforward to watch (especially as a fast-paced demo, as I have programmed by code to be, when the user makes it faster-paced) and is the most straightforward for me to understand. Since I understand it well, I can make my app the most effective out of any algorithms I could have chosen for this project.

Decomposition:

1. 1.For decomposition, I will focus first on building the regular bubble sort algorithm, such as one that I have coded before. This will include the steps like tracking how long the array is, comparing the adjacent elements of the array, swapping them if they are out of place (the one closer to left is larger than the right) until the algorithm is completely sorted. This part of the code will include a basic for loop, that returns the ordered list at the end.
2. 2.After this part of the code, I can focus on building it into an app, such as adding the boxes that will output the sorted list, and also a button that the user can click to run the bubble sort.
3. 3.I can continue to build on the features of my code, such as adding a function and button option that can input a randomized list of numbers, so that the user doesn't have to enter them all. I also plan to upgrade my code from where it doesn't only output the sorted list, but also demonstrates the steps of solving the algorithm, in a bar graph animation, so that the bubble sort is easily visualized for the user.
4. 4.From there, I would create a button option where the user is able to manually click through the steps of the bubble sort (so it is less so like an animation, and they can more follow the steps of the bubble sort to their own pace).
5. 5.I will continue to fix errors throughout my code, so that I don't have to worry about all of them at the end, and can fix them as I go along, before I continue to add more advanced functions and details of the code.

Pattern Recognition

I can use pattern recognition throughout my coding, by trying my best to create reusable functions, for instance, creating loops in which the largest element will continuously "bubble" to the end of the list. This will be used throughout the entirety of my code. I can also use pattern recognition to detect when no swaps occur within a pass, and there, my code will recognize that no further swaps are needed. While creating my app, I can use pattern recognition by taking existing lines of my code to reuse them or use them similarly to program. For instance, while creating the swap part in my code, I can use the same or similar function to animate a "swap" of bar graph elements simultaneously. In this way, and in coding the rest of my app, I can continuously use structures that will be programmed to be implemented into the rest of my code, so that everything can recognize itself (ex. elements, variable), and doesn't need to be recoded.

Abstraction

I will simplify the details of the bubble sort as much as I can for the user. I will focus on creating only the necessary few buttons for the bubble sort that the user can press, so that there isn't too much overcomplication. I will also try to implement a very simple looking animation, that is easy to follow along with. I will do this by using a bar graph, so that the user can easily visualize how big the numbers are, and how the swapping process works. In order to simplify the swapping process more greatly, I will implement different colours into the bar graphs, for instance, the two elements that are being currently compared will appear yellow, and then turn red once they are swapped. This will abstract from a solid, plain colour, which might confuse the user. By abstracting from greater details, like using animation rather than just a complicated list of numbers, the bubble sort can appear must simpler so that it becomes easy to understand.

Algorithmic Design

Input: the code will either input the user's values of a list of numbers, or it will input a list of randomized numbers into the code. It will also input what buttons the user presses. Processing: during processing the code will compare two values sequentially, swap them if the left value is greater, to eventually build the final sorted list. It will also process these steps to build a bar graph animation, which will display the numbers of the list and current comparisons and swaps. During processing swaps will be recorded to show the final output. Output: the output will display the list of numbers as an animated bar graph, where the bars will move simultaneously as the swapping is being processed. The output will also show the final sorted data of the list.

Steps to Run

1. 1.Enter in a list of numbers separated by commas, or press "Generate Random Numbers".
2. 2.Adjust the speed to desired on the slider, as well as the bar graph display type, the manual step (for the user to display steps everytime they click "Next Step"), and the vertical bar graph are buttons that alter the graph.
3. 3.When ready to view the bubble sort, press the run button, and the animation should run, displaying the bubble sort by displaying the elements being compared and swapped at a time.
4. 4.The animation can be paused/resumed during anytime, and also restarted from where the unsorted numbers began.
5. 5.When the code is completely sorted, display the final sorted list.

Hugging face link: https://huggingface.co/spaces/baresichsara/BubbleSortCISC121

Author and Acknowledgement:

Sara Baresich, CISC121 Bubble Sort Algorithm Animation

Acknowledgement: Used various resources online to explain concepts such as building a Gradio app, using and inputting different colours within Gradio, building the animation for a bar graph, adding buttons, adding different font sizes, etc. Used resources such as: Gradio site, Hugging Face Forums, ChatGPT Level 4.