Skip to content
Chris Shockley

Software Engineer

Back to Blog

Pathfinder Visualizer

Interactive visualization of BFS and DFS pathfinding algorithms

View Live SiteView Code
Pathfinder Visualizer

The Challenge

Animating hundreds of cell state changes in real-time caused performance issues and jank, especially on slower devices. Users couldn't see the algorithm behavior smoothly.

The Solution

Implemented a render queue system that batches state updates and uses requestAnimationFrame for smooth 60fps animations. Added speed controls so users can adjust visualization speed based on their device capabilities.

My Role

Solo Developer

Timeline

Personal Project - 2024

Technologies Used

ReactTypeScriptNext.jsTailwind CSSVercel

Key Features

  • ✓Interactive 20x20 grid with click-and-drag wall placement
  • ✓Real-time algorithm visualization with adjustable speed controls
  • ✓Side-by-side comparison mode for BFS vs DFS
  • ✓Statistics tracking nodes visited, path length, and execution time

Challenges & Solutions

Animation Performance

Challenge:

Animating hundreds of cell state changes in real-time caused performance issues and jank, especially on slower devices. Users couldn't see the algorithm behavior smoothly.

Solution:

Implemented a render queue system that batches state updates and uses requestAnimationFrame for smooth 60fps animations. Added speed controls so users can adjust visualization speed based on their device capabilities.

Algorithm Visualization Clarity

Challenge:

The initial color scheme made it difficult to distinguish between nodes being explored, nodes in the frontier, and the final path. Users were confused about what they were watching.

Solution:

Researched data visualization best practices and chose a high-contrast, accessible color palette. Added a legend and multiple visualization styles that users can toggle between for different learning preferences.

State Management Complexity

Challenge:

Managing grid state, algorithm execution state, and UI state became unwieldy as features were added. Bugs were hard to track and the codebase was becoming difficult to maintain.

Solution:

Refactored to use a state machine pattern with clear transitions between states (idle, running, paused, complete). This made the code more maintainable and made bugs easier to identify and fix.

What I Learned

  • 💡Visualization is a powerful teaching tool - seeing algorithms in action makes abstract concepts concrete
  • 💡Performance matters for user experience - smooth animations are crucial for understanding algorithm behavior
  • 💡Accessibility includes cognitive load - clear visual hierarchy and legends help users understand what they're seeing
  • 💡State management patterns scale - investing time in proper architecture pays dividends as complexity grows
  • 💡User testing reveals blindspots - assumptions about what's "obvious" often aren't until someone else tries the tool

Interested in working together?

Let's build something amazing together

Pathfinder Visualizer: Making Algorithms Visible

Understanding pathfinding algorithms through textbook descriptions alone can be abstract and difficult. I wanted to create an interactive tool that makes BFS and DFS tangible and accessible for learners.

The Problem with Learning Algorithms

Pathfinding algorithms are fundamental to computer science, but they're typically taught through:

  • Static diagrams that don't show progression
  • Pseudocode that's hard to map to real behavior
  • Examples too simple to reveal nuances

I wanted to bridge this gap with an interactive tool that lets users experiment and learn through play.

Building for Understanding

The visualizer uses a 20x20 grid where users can draw walls, set start and end points, and watch algorithms find paths in real-time. Color-coded cells show visited nodes, the current frontier, and the final path.

The Animation Challenge

The biggest technical hurdle was rendering hundreds of state changes smoothly. My initial implementation updated the UI immediately after each algorithm step, which caused severe jank on slower devices.

The solution was a render queue that batches updates and uses requestAnimationFrame to synchronize with the browser's refresh rate. This achieved consistent 60fps animations while keeping the algorithm logic clean and separate from the rendering logic.

Design for Learning

Color choices weren't arbitrary - I researched data visualization best practices to ensure high contrast and accessibility. The palette makes it easy to distinguish between:

  • Unexplored cells (white)
  • Frontier cells being considered (light blue)
  • Visited cells already explored (darker blue)
  • The final path (yellow)

Side-by-Side Comparison

The comparison mode lets users run BFS and DFS simultaneously on the same maze. This visual comparison makes the algorithms' differences immediately obvious:

  • BFS explores level-by-level (finds shortest path)
  • DFS dives deep before backtracking (may not find shortest path)

Seeing this play out in real-time is far more intuitive than reading about it.