I recently created an algorithm visualizer in Java using JavaFX. It’s a desktop application that demonstrates various sorting, path-finding and maze-building algorithms.
You can check out the source code on my Github.

This post is going to be more of an expose of the project and less of a tutorial since the project is quite large and it would take a very long time to document the entire thing.

  • The first thing I did was setup a general JavaFX project and create a main controller.
  • Next I created the general layout and UI. The page is tab-based for each section. Keep in mind that I am not too great at designing efficient clean user interfaces lol.
  • Once the rough layout had been built I started by creating the controller and a few models. The first thing I tried building was a sorting visualizer. This consisted of a tab that has a rectangle area where lots of tall, skinny rectangles could be populated and sorted.
  • This gif shows the Coctail Sort algorithm visualization. In coctail sort the largest bars are sifted up to the end of the list and on the way back, the smallest bars are brought to the front. You can see it looks like someone stirring a coctail with the bars going back and forth.

    Here is an example of Heap Sort. This shows how you can add as many bars as your computer can process. If you add too many though they may start going off the side of the screen since there is a finite amount of room and they each need a certain amount of space between them.

    And this is the famous Quick Sort. The current generally accepted “fastest sorting algorithm” record holder. There are other variations of the algorithm but this is the most common. It creates a pivot then checks and sorts values on either side of the pivot. This process continues until it is fully sorted.

  • Next I wanted to implement a path-finding algorithm visualizer. I wanted to be able to create huge mazes so I had to figure out how to allow a varied number of rows and columns in a grid while keeping everything on the page and centered.
  • Another requirement I had was that I wanted the actual shortest path to be displayed in reverse order of the direction it was found.
  • The first path-finding algorithm I implemented was Dijkstras algorithm. In this technique the nodes spread out equally in all directions from the origin until a path is found.

    This is A*, or “astar” algorithm. It is one of the fastest path-finding algorithms. Because of this it is used by large companies including Google for Google Maps.