Hello Community! 👋

For a while now I have been a huge fan of algorithms and data structures. I have been slowly solving problems on leetcode and algoexpert and I wanted to showcase some of my skills.

Sorting is a staple when it comes to algorithms and one of the first things i learned while studying. There are a lot of easy algorithms, such as bubble sort (one all of us are probably familiar, two for loops for the win!), but there are also harder ones, such as quicksort and maybe a heap sort.

IDEA

So the idea I had is just to visualize how the sorting algorithms work (I know there are many apps already doing that, but I wanted to create something on my own).

The app would be very simple. You just go online, find a picture, copy the image url and paste it in. Additionally you can choose number of rows and cols, which I will use to slice the image into smaller parts.

Once the image is sliced, I would reshape it so it would look all jumbled.

And then you simply decide on what sorting algorithm you want to use, and watch how the animation shows the way algorithm solves the problem.

On the bottom you will get a display saying, how long algorithm ran in the backend, what it's time complexity is and how many animations will processed to get an original image back.

IMAGES

Presorted

Sorted

Where you can find the app

App is hosted on heroku and it's very light and easy to use so feel free to test it out. I would suggest having maybe not more than 10 rows or columns because the number of animations might get too big, and you will probably get bored of watching the whole image reshape itself 😁

I would love if you can give me a feedback on what do you guys think.

Live demo of the app: https://image-sorting-visualizer.herokuapp.com/

Github link of the app is: https://github.com/fvukojevic/Image-Sorting-Visualizer in case any of you kind souls really likes it and decides to star the project 😁