Work, original
Algophi
A sorting algorithm visualizer in the browser: seven algorithms, each drawn as bars that move step by step, with its complexity, pseudocode and C++ beside it.
- Role
- Designer and developer
- With
- On my own
- Status
- Maintained public project
- Years
- to
Hover a part to see its nameThe problem
A sorting algorithm is easy to read and hard to see. Pseudocode tells you what each line does; it does not show you which elements move, how often, and why one algorithm finishes long before another on the same input.
What I built
Algophi draws an array as a row of bars and sorts it in front of you. Seven algorithms run on the same bars: bubble, selection and insertion sort, shell sort, merge sort, quick sort and heap sort. Each comparison and each swap lights the bars it touches, and sorted bars stay marked as they settle.
- Controls. Sliders set the array's size, from 5 to 100 bars, and the speed. A run can pause, resume and reset, and a new random array is one press away.
- Beside each run. A panel gives the algorithm's time and space complexity, its pseudocode and a C++ version, so the motion, the steps and the code read together.
- No build step. Plain HTML, CSS and JavaScript, one file per algorithm. Each algorithm is an async function that awaits a delay between steps, which is what makes pause and resume possible.
I started it in March 2022 and rebuilt its interface in January 2026: a cleaner layout, a mobile layout, global state for the controls, and the algorithm panel.
My role
I designed and built Algophi: the interface, the seven animated algorithms, the controls and the algorithm panel.
Current limits
Algophi is a teaching tool. Its algorithms work on one array in the page, and the speed setting slows them on purpose; it says nothing about their real running time.