smallduds/CISC_121_002_Mergesort_Project

<div align="center">

Merge Sort Visualizer

_A Python application for visually interactive algorithm simulation._ _Developed for CISC-121 at Queen's University._

  

</div>

Demo video

<img src="./CISC 121 002 Mergesort Project test.gif"/>

Objective

The goal of this project is to create a Python app that demonstrates the Merge Sort algorithm in a visually interactive way using a graphical user interface. This application showcases computational thinking, algorithm design, testing, documentation skills, and knowledge of sorting algorithms.

Project Deliverables

Computational Thinking & Problem Breakdown

I chose Merge Sort to implement and visualize. It creates a unique decision tree and effectively demonstrates the divide and conquer approach. Additionally, it maintains a time complexity of O(n log n) regardless of the dataset, making it highly efficient.

The Four Pillars

<details> <summary><b>1. Decomposition</b></summary>

I broke the Merge Sort algorithm down into smaller steps: the mergeSort function which recursively splits the array and the merge function which compares and combines the split arrays.

</details>

<details> <summary><b>2. Pattern Recognition</b></summary>

The algorithm relies on a repeating pattern of finding the middle index, dividing the list until single elements remain, and then comparing elements (L ≤ R) to swap and rebuild the sorted list.

</details>

<details> <summary><b>3. Abstraction</b></summary>

The visualization only focuses on showing the user the logical flow of the input, the splitting process, and the final output, making it so that the user only needs to understand how the algorithim works and not the code behind it

</details>

<details> <summary><b>4. Algorithm Design</b></summary>

The flow is designed as: Input User provides a raw list → Processing Recursive Divide & Conquer → Output Sorted List displayed in GUI.

</details>

Algorithm Flowchart

The following diagram illustrates the logic implemented in the code: <img src="./Mergesort_flowchart.png">

How To Use The App

• —Input Data: Enter an integer-only array in the input box, with commas separating each element.
• —Random Generation: Alternatively, click the Generate Random button to create a random array.
• —Visualize: Once you have an array you are happy with, press the Sort & Visualize button.
• —Result: You will see the output visualization of the input array as it is passed through the Merge Sort algorithm.

Author & Acknowledgment

• —Author: Michael Esho
• —Course: CISC-121
• —University: Queen's University
• —Project Inspiration: Merge Sort Algorithm Visualization
• —Python: Core programming language
• —Gradio: Web-based GUI framework
• —Hugging Face Spaces: Deployment platform
• —Gemini AI: Help with HTML aspects of code