User Interface Overview
Left Panel: Controls and Information
- Game State: Shows the current board and whose turn it is
- Controls: Adjust iterations, speed, and algorithm settings
- Selected Node: Details about the node you clicked on
Center Panel: Search Tree
- Visual representation of the MCTS tree
- Each node represents a game state
- Edges show possible moves
- Auto-scales to fit the entire tree
Bottom Panel: Activity Log
- Real-time log of MCTS operations
- Shows which iteration is running
- Reports final move selections
Tree Visualization
Tree Layout
The tree grows from top to bottom:
- Root node (top): Current game state
- Children: Possible next states after one move
- Grandchildren: States two moves ahead
- And so on...
Automatic Scaling
As the tree grows, the visualization automatically:
- Calculates the space needed for all nodes
- Scales down if necessary to fit the canvas
- Centers the tree for optimal viewing
- Maintains a minimum size (50% of original) for readability
Color Coding
Node Colors
It's Player 2's turn at this state (Player 1 just played)
It's Player 1's turn at this state (Player 2 just played)
The current game state where MCTS starts
Node currently being updated with simulation results
Node in the selection path or being expanded
Node you clicked on for detailed view
Understanding Node Statistics
What Each Node Shows
Top: Action Label
The position that was played to reach this state (0-3)
Inside the Node (for non-root nodes):
Below the Node:
Interpreting Statistics
- High visit count: MCTS thinks this branch is important
- High win rate: This move has performed well in simulations
- Low visits, high win rate: Promising but under-explored
- High visits, low win rate: Thoroughly explored but not performing well
MCTS Phases in Detail
🔍 Phase 1: Selection
What happens: Start at the root and traverse the tree by selecting the most promising child nodes using the UCB1 formula until reaching a node that isn't fully expanded.
Visual cues:
- Selected nodes turn orange
- Path is highlighted with thick orange lines
- Selection box appears showing the path taken
- UCB values displayed for each node selected
✨ Phase 2: Expansion
What happens: Add a new child node to the tree by selecting one of the unexplored moves from the current position.
Visual cues:
- New node appears in the tree with initial statistics (V:0)
- Marked with a green checkmark ✨ in the selection path
- This new node becomes the starting point for simulation
🎲 Phase 3: Simulation (Rollout)
What happens: From the expanded node, simulate a complete game by making random moves (or heuristic-guided moves) until the game ends.
Visual cues:
- Simulation box appears showing starting board, moves, and result
- Moves are shown as they're played (in step-by-step mode)
- Final result displayed: who won or if it's a draw
⬆️ Phase 4: Backpropagation
What happens: Propagate the simulation result back up the tree, updating visit counts and win statistics for all nodes along the path.
Visual cues:
- Nodes turn green as they're updated
- Path highlighted with thick green lines
- You can see statistics change in real-time
Step-by-Step Mode
Enable this mode for maximum educational value!
Each MCTS iteration pauses at the start of each phase, letting you manually click through each step to understand exactly what the algorithm does.
During Selection:
- Next Select: Show the next node in the selection path
- Finish Selection: Skip to the end of selection phase
During Simulation:
- Next Sim Step: Reveal the next move in the rollout
- Finish Simulation: Skip to the simulation result
During Backpropagation:
- Next Backprop: Update the next node in the path
- Finish Backprop: Complete all remaining updates
Interpreting Tree Growth
Early Iterations (1-20)
- Tree is shallow and wide
- Many first-level nodes get explored
- Win rates are unstable (based on few simulations)
- Algorithm is exploring all options
Middle Iterations (20-60)
- Tree starts growing deeper
- Some branches get more visits than others
- Win rates stabilize
- Clear favorites emerge at the first level
Late Iterations (60-100)
- Most effort on 1-2 promising branches
- Deep exploration of best lines
- Other branches mostly ignored
- Win rates are reliable
Why Asymmetric Growth is Good
MCTS naturally creates asymmetric trees:
- Good moves get deeper subtrees (more exploration)
- Bad moves stay shallow (minimal exploration)
- This is efficient: computation focused where it matters
Advanced Features
Selected Node Details
As MCTS runs, the "Selected Node" panel on the left shows details for the currently processing node. You can see the exact board state, visit count, win rate, and statistics for each node as it's selected, expanded, or backpropagated.
Player 2 Engine
Choose between:
- Random: Player 2 makes random legal moves
- MCTS: Player 2 also uses MCTS (watch AI vs AI!)
Heuristic Rollout
Enable for smarter simulations that:
- Take winning moves immediately
- Block opponent from winning
- Create double threats
- Fall back to random for other situations
This can help MCTS converge faster to better moves.
Common Questions
Why does MCTS visit bad moves?
MCTS must balance exploration and exploitation. Even moves that look bad need some visits to confirm they're actually bad. The UCB1 formula ensures rarely-visited moves get occasional attention.
Why do win rates change?
Early win rates are based on few simulations and are unreliable. As visits increase, win rates converge to their true values through the law of large numbers.
What's a "good" win rate?
- 50%: Probably a draw or equal position
- 60-70%: Slight advantage
- 80%+: Strong advantage
- 90%+: Nearly winning position
How many iterations do I need?
- 10-20: Get a rough idea of best moves
- 40-60: Reasonable confidence
- 80-100: High confidence for strong play