Abstract
A Pygame-based sorting visualizer that renders Bubble, Selection, and Insertion Sort as animated bar charts, exposing each comparison and swap in real time. The core engineering problem is restructuring standard sorting loops to yield intermediate states so the event loop can render between operations.
1. What This Is
An educational desktop application that makes three classic sorting algorithms observable. Values are drawn as vertical bars in a Pygame window; as the selected algorithm performs comparisons and swaps, the bars update frame by frame. The user picks an algorithm via on-screen buttons and adjusts a speed slider to slow the animation for teaching or speed it up to watch the full sort complete.
2. How It Works
The application runs a standard Pygame event loop. When the user triggers a sort, the algorithm executes one comparison or swap per frame, redraws the bar array, and processes window events before continuing.
| # | Stage | Input | Tool | Output |
|---|---|---|---|---|
| 01 | Initialize array | Random values | Python | Unsorted list, bars drawn |
| 02 | Select algorithm | User click | Pygame event | Active sort routine set |
| 03 | Step execution | Current array state | Python (yield per op) | Comparison or swap indices |
| 04 | Redraw bars | Updated array and indices | Pygame surface | Frame rendered at chosen speed |
| 05 | Completion | Sorted array | Pygame | Final bars held on screen |
3. Implementation Notes
3.1 Yielding intermediate states
A standard sorting function completes in microseconds for the array sizes used here, so it cannot be observed. Each algorithm was restructured to perform one comparison or swap per invocation, returning the indices involved so the renderer can highlight them before the next step.
3.2 Bar mapping and rendering
Array values are mapped linearly to bar heights within the Pygame window. The draw pass clears the surface, iterates the array, and draws a rectangle per element. Highlighted indices (the pair being compared or swapped) are drawn in a distinct colour.
3.3 Event loop during an active sort
While a sort is in progress the main loop still pumps Pygame events (window close, button clicks) between algorithm steps. The speed slider controls how many frames elapse between steps, letting the user slow the animation to a teaching pace or run it at full speed.
4. Constraints
-
Three algorithms only
Bubble, Selection, and Insertion Sort are the only options. No divide-and-conquer sorts (Merge, Quick, Heap), so the visual comparison is limited to O(n²) behaviour.
-
Fixed window size
The Pygame surface is a single fixed resolution. There is no responsive layout, and the bar count is tied to that width, so very large arrays become unreadable.
-
No step-through or pause
The speed slider is continuous; there is no single-step mode or pause button, so catching a specific comparison mid-sort requires slowing the slider to near-zero.
-
No persistence or tests
State is lost on window close. There are no unit tests for the algorithm stepping logic, so a regression would only surface visually during a manual run.
5. Next
- a. Add Merge Sort and Quick Sort so the visualizer can contrast O(n log n) behaviour against the existing O(n²) algorithms.
- b. Introduce a step-through mode (pause, single-step, resume) and an array-size slider for finer-grained teaching.
- c. Extract the algorithm stepping logic into a testable module with unit tests that assert the correct sequence of comparison and swap indices.
— end of report —