GraphBuilder
June 2025

To build the graphBuilder I first implemented a Node class, which would contain an adjacency list. I decided that creating a list of nodes with adjacency lists was the easiest way to move forward.

​

Once that was done I implemented the creation of nodes through clicking on the screen and then to link them together with right click.

With this I now have a functioning graph builder and can implement some algorithms like DFS and BFS to start with.

I also updated the menu UI.

Adding a menu
June 2025

Adding a menu took quite a bit of work. I had to make the current logic work by calling a single function to be able to use a state machine for what part of the program to show (menu or sorting). This was very helpful because it forced me to clean up the code and make it very decoupled.

​

I then had to create the state machine for the program and implement the menu page.

​

Following that I created a button class, made it drawable by inheriting from SFML's drawable class as well as clickable.

Finally I created a few buttons, and linked so they changed the states correctly.

Sorting with keys
June 2025

I wanted to highlight the interesting parts of the sort. To do this I simply refactored my code to use a vector of structs instead of a vector of vectors.

​

The structs contain a snapshot of the sorting process as well as two indexes which will be used to determine which index to highlight.

Sorting with steps
May 2025

Because I stored a snapshot of each step the insertion sort algorithm went through, I was able to implement an interactive navigation system:

Navigation Controls:

• Left/Right Arrow Keys: Holding either key cycles quickly through the sort steps.

• Left/Right Mouse Buttons: Clicking steps forward or backward one frame at a time for more granular control.

This gives users full control over the sorting animation, allowing them to observe the algorithm at their own pace.

Visual Enhancements (Planned)

To improve clarity and highlight algorithm behavior:

• I will implement color indicators to show the current key element and the element being compared during each step.

• This will help distinguish between steps where no visual change occurs (e.g., when no swap is made), making the sorting logic more transparent.

Merge sort
May 2025

Thanks to the low coupling of the visualization system, integrating additional sorting algorithms was straightforward.

• I implemented merge sort and, with minimal changes, adapted it to the existing visualization structure.

• Specifically, by reusing the snapshot mechanism, I was able to record the full state of the vector at every swap or merge step.

• This required only three extra lines of code beyond the standard merge sort logic, highlighting the flexibility and extensibility of the initial design.

This proved that my approach made it easy to expand the project without rewriting or heavily modifying existing code—keeping the system clean and modular.

Insertion sort
May 2025

Initialization:

• I created a vector arr containing values from 1 up to a user-defined size.

• The vector was then shuffled to simulate an unsorted dataset.

Visualization Setup:

• Each value in arr was mapped to a rectangle whose height corresponded to the value (e.g., if arr[1] = 5, then rectangleList[1].height = 5).

• This allowed for a straightforward visual mapping of data values to graphical elements.

Sorting Process:

• I implemented the insertion sort algorithm.

• At each key operation (swap), I captured the current state of arr and saved it as a snapshot (currentStep).

• These snapshots were stored in a vector of vectors called steps, preserving every state the algorithm passed through.

Animation Logic:

• The visualization iterates through each snapshot in steps, updating rectangle heights to reflect the current state.

• I introduced a 10ms delay between updates to animate the sorting process.

• By storing all steps, the animation can be played forward or backward, enabling more interactive control.

Design Tradeoffs:

• This approach is memory-intensive due to the storage of all intermediate states, but it offers low coupling and high clarity—suitable for a small-scale project.

• The current implementation favors simplicity and clarity over optimization, which I plan to improve in future iterations.