Sorting LabCompare

Compare two sorting algorithms on the same array.

Choose the algorithms, input preset, size, and speed. Run, pause, step, and reset while metrics and pseudocode stay in sync.

Comparison Controls

Choose two algorithms and run them on the same starting array.

Left AlgorithmRight Algorithm

Shared Run State

Ready

Both panels replay the same dataset from one playback clock, so comparisons stay synchronized even when one algorithm completes ahead of the other.

Input PresetRandom

Unstructured values with no special ordering.

Array Size24 / 48

Standard mode keeps the DOM renderer. Turn on performance mode around 72+ bars.

Animation Speed72%

Performance Mode

Uses Canvas rendering, larger dataset sizes, and stripped-down animation styling to keep frame updates smooth.

Synchronized event playback

Run Status

Both panels advance together. Finished runs stay on their last frame.

Left: Bubble Sort

Right: Quick Sort

Shared operations elapsed: 0 / 432

Standard mode is on.

Bubble Sort

Left Panel shares the dataset but keeps its own derived event stream and completion state.

Left PanelReady24 Bars

Ready to sort

LowRelative value magnitudeHigh

DefaultComparingSwappingOverwritePivotMergeSorted

Current Step

Ready to sort

This frame shows the current state of the algorithm. Press play or step forward to see the next decision.

Beginner Explanation

Bubble Sort repeatedly walks through neighboring pairs. If the left value is bigger than the right value, it swaps them. After each pass, the largest remaining value has bubbled to the end.

Pseudocode

Idle

1repeat until no swaps happen

2 swapped = false

3 for each adjacent pair in the unsorted range

4 compare left and right values

5 if left > right

6 swap them

7 swapped = true

8 mark the last position as sorted

Comparisons

Swaps

Elapsed Time

0 ms

Operations

Simple adjacent swaps. Easy to teach, poor at scale.

Status

Ready

Space

O(1)

Best

O(n)

Average

O(n²)

Worst

O(n²)

StableIn-placeImplemented

Quick Sort

Right Panel shares the dataset but keeps its own derived event stream and completion state.

Right PanelReady24 Bars

Ready to sort

LowRelative value magnitudeHigh

DefaultComparingSwappingOverwritePivotMergeSorted

Current Step

Ready to sort

This frame shows the current state of the algorithm. Press play or step forward to see the next decision.

Beginner Explanation

Quick Sort picks a pivot, moves smaller values to one side and larger values to the other, then repeats that idea on each side. It is fast on average but sensitive to pivot choice.

Pseudocode

Idle

1choose a pivot value

2scan the range and compare each value with the pivot

3if a value belongs on the left side, swap it forward

4place the pivot between the two partitions

5mark the pivot position as sorted

6repeat on the left and right partitions

Comparisons

Swaps

Elapsed Time

0 ms

Operations

Partition-driven sorting that keeps pivot behavior visible throughout the run.

Status

Ready

Space

O(log n)

Best

O(n log n)

Average

O(n log n)

Worst

O(n²)

UnstableIn-placeImplemented

Loading Sorting Lab

Preparing comparison controls, timeline playback, and visualization panels.

Hydrating interactive controls and playback state.