paoloose/sorthem

A language agnostic tool to visualize your sorting algorithms easily

Sorthem

Sorthem is a language-agnostic tool that enables you to visualize your sorting algorithms with just a few lines of code.

How does it work?

Sorthem is simple. You have a sorting algorithm, written in whatever language you like. Let's say, a bubble sort implementation in Ruby:

arr = [3, 9, 1, 8, 6, 10, 4, 7, 2, 5]

for i in 0..arr.length - 2 do
    for j in 0..arr.length - i - 2 do
        left = arr[j]
        right = arr[j + 1]

        if left > right
            arr[j], arr[j + 1] = right, left
        end
    end
end

Almost all algorithms are made up with basic operations like comparing two values, swapping them, etc.

Sorthem needs to know two things:

• what are the values you're sorting
• what are the operations you're doing in order to sort those values

An all you need to do is to print that information to the standard output.

arr = [3, 9, 1, 8, 6, 10, 4, 7, 2, 5]

# Print the array in the format [ 3 9 1 8 6 10 4 7 2 5 ]
puts "[ #{arr.join(' ')} ]"

for i in 0..arr.length - 2 do
    for j in 0..arr.length - i - 2 do
        left = arr[j]
        right = arr[j + 1]

        # Tell Sorthem that you're comparing two values
        puts "compare #{j} #{j + 1}"
        if left > right
            # Tell Sorthem that you're swapping two values
            puts "swap #{j} #{j + 1}"
            arr[j], arr[j + 1] = right, left
        end
    end
end

With these three lines of code, you now have a visualizer for your algorithm. You can run it with:

ruby bubble_sort.rb | sorthem

Note that compare isn't actually needed. Only swap does the job of sorting the array. compare is simply a helpful operation for visualization.

Of course, there are more types of operations for more complex algorithms, each associated with semantic color.

You have a variety of examples in the examples directory (WIP).

Basic operations

• compare: for comparing to indexes

  usage: compare i j

• swap: for swapping the values of two indexes

  usage: swap i j

• get: for consulting the value at some index

  usage: get i

• set: for setting a value at some index

  usage: set i value

  where 0 <= value <= max_value, otherwise panics

• context: makes future index ops relative to this context

  usage: context start end

  where startand end fall within the array's bounds

• pop: pops the last context

  usage: pop

  panics if there are no contexts to pop

i and j must be valid zero-based indexes.

Getting started

Usage

your_sorting_algorithm | sorthem

Controls

• Space - pause/resume
• R - restart
• ↑ - speed up
• ↓ - speed down

Building sorthem

sorthem uses SFML for graphics. The instalation process depends on your OS. See the official documentation.

# Debian based distros
sudo apt update
sudo apt install libsfml-dev

# On MacOS
brew install sfml

There are no official packages for Windows, but you can download the binaries from the official website.

Run the following commands to build sorthem:

git clone https://github.com/paoloose/sorthem.git
cd sorthem

# On windows, build under WSL
./build.sh
cat examples/test | dist/sorthem

Semantic Colors

• #ffffff: an iddle bar
• #ffffff: iddle bar within a context
• #f33232: two bars being swaped
• #9b54c3: getting the value of the bar
• #2d43db: setting the value of the bar
• #e79933: two bars are being compared