N-Queens Javscript Recursive Solution Visualizer
A Powerful Visualization Tool To Help You Understand An Algorithm To Solve A Famous Computer Science Puzzle
Meet the creator and learn more about this project! What's going on here?
The following describes how the visuals correspond to the algorithm. To learn how the algorithm itself works, read about it at LiuJoyceC.github.io. If you have any comments or questions about this application, feel free to leave a comment at that same link.
The chessboard to the left corresponds to the algorithm execution. Since this algorithm takes advantage of a symmmetry optimization, the chessboard on the right is the mirror image, shown for completeness, although the algorithm does not actually execute the mirror image arrangements. Each stack (created by successive recursive calls) corresponds to a row in the chessboard. The placement of the queen corresponds to the 1 in the binary representation of the variable 'bit' in that stack, while the remaining available squares correspond to the 1's in the variable 'poss'. Eliminated squares (due to symmetry optimization or conflicts with other queens) are lightened in color.
The algorithm shown is not actually what is being run in this application. Instead, it runs a refactored asynchronous version that introduces stopping points and listeners for user input but otherwise imitates the same sequence of code executed by the shown algorithm. This makes it possible for you to examine the process and see each variable's value within each stack without pulling up your browser debugger tools. Otherwise, the real algorithm would finish running within a tiny fraction of a millisecond! Be aware: the stopping points are not placed at the beginning of each recursive call but run up to the beginning of the while loop. This point was chosen because it is more informative to show the variable 'poss' after it has been assigned a value.
The chessboard to the left corresponds to the algorithm execution. Since this algorithm takes advantage of a symmmetry optimization, the chessboard on the right is the mirror image, shown for completeness, although the algorithm does not actually execute the mirror image arrangements. Each stack (created by successive recursive calls) corresponds to a row in the chessboard. The placement of the queen corresponds to the 1 in the binary representation of the variable 'bit' in that stack, while the remaining available squares correspond to the 1's in the variable 'poss'. Eliminated squares (due to symmetry optimization or conflicts with other queens) are lightened in color.
The algorithm shown is not actually what is being run in this application. Instead, it runs a refactored asynchronous version that introduces stopping points and listeners for user input but otherwise imitates the same sequence of code executed by the shown algorithm. This makes it possible for you to examine the process and see each variable's value within each stack without pulling up your browser debugger tools. Otherwise, the real algorithm would finish running within a tiny fraction of a millisecond! Be aware: the stopping points are not placed at the beginning of each recursive call but run up to the beginning of the while loop. This point was chosen because it is more informative to show the variable 'poss' after it has been assigned a value.
Press Enter or click on the chessboards to advance to the next stack. Click here to start over.
