Sliding Block Puzzle State Space

An interactive visualization of the underlying structure of sliding block puzzles.

Welcome! This app lets you explore the mathematical space of sliding block puzzles.
  • Select a puzzle from the dropdown menu below.
  • Use your mouse or touch to pan/zoom the graph, and click nodes to see puzzle states.
  • If a puzzle looks empty, try another one or click "Reset View".
  • Click "Play Demo" to watch an agent explore the puzzle space.
Loading puzzle data...

Overview

This interactive simulation visualizes the "state space" of various sliding block puzzles, inspired by the concepts in the video. Each possible arrangement of blocks on the puzzle board is a "state," represented here as a node (a dot) in a graph. An edge (a line) connects two nodes if you can get from one state to the other with a single move.

By mapping out all possible states and moves, we reveal the hidden mathematical structure of the puzzle. Simple puzzles can form clean, grid-like structures, while more complex ones, like the famous Klotski puzzle, create intricate, web-like topologies with distinct local and global features.

How to Use

  • Select a Puzzle: Use the dropdown menu to load different puzzle state spaces.
  • Explore the Graph:
    • Mouse: Click and drag to pan. Use the scroll wheel to zoom in and out. Click on a node to select it.
    • Touch: Drag with one finger to pan. Pinch with two fingers to zoom. Tap a node to select it.
    • Keyboard: Use the Arrow Keys (←, →, ↑, ↓) to move between connected nodes.
  • View Puzzle State: The small window in the top-left corner shows the block arrangement corresponding to the currently selected node (highlighted in red).
  • Reset View: If you get lost, click the "Reset View" button to center the graph.
  • Play Demo: Click "Play Demo" to automatically cycle through the different puzzles and see a "random agent" explore the graphs.

Future Directions & Notes

This project serves as a foundational viewer. The true power of this visualization comes from analysis:

  • Pathfinding: We could visualize the shortest path between any two nodes, effectively finding the optimal solution to the puzzle from any given state. The white and yellow paths for the "Klotski" puzzle are examples of this.
  • Community Detection: Algorithms could identify "clusters" or "neighborhoods" in the graph, representing sets of puzzle states that are easy to move between but hard to leave.
  • Dimensionality: The "local dimensionality" (how many directions you can move in) changes across the graph. In the Klotski puzzle, the corners are higher-dimensional because more blocks can be moved simultaneously, creating complex "junctions."
  • Data Generation: The graph data here is pre-computed. A more advanced version could generate these graphs on-the-fly for any user-defined puzzle layout using a Breadth-First Search (BFS) algorithm.