Fancy Interactive DFS Graph Visualizer (Processing)

Overview

This project is an interactive graph visualizer built in Processing that demonstrates Depth-First Search (DFS) traversal in real time.
It allows users to create graphs by clicking on the canvas, run DFS from any chosen node, and watch the algorithm animate step by step with color-coded nodes and highlighted edges.

The visualization is designed to make it easy to understand how DFS explores nodes and edges in order.

---

Features

• Add Nodes: Click on empty space to create a new node.
• Add Edges: Click two nodes sequentially to connect them with an edge.
• Run DFS: Click the same node twice to start DFS traversal from it.
• Heatmap Coloring: Nodes change color from red → green depending on the order they are visited.
• Edge Traversal Animation: Edges light up cyan as DFS travels along them.
• Draggable Nodes: Click and drag nodes to reposition them dynamically.
• Reset Button: Clears the DFS traversal results, allowing you to run DFS again.

---

Expected Behaviors

1. When DFS runs:
   • The first visited node turns red.
   • Each subsequent node smoothly transitions along the red → green gradient, indicating traversal order.
   • Edges are highlighted in cyan as the DFS algorithm traverses them.
   • The traversal proceeds step by step with a short delay, so you can watch the search unfold.
2. After DFS completes:
   • All nodes remain color-coded in their traversal order.
   • All traversed edges remain highlighted.
3. Resetting:
   • Clicking the Reset DFS button restores all nodes to gray and edges to light gray, clearing the current traversal.
   • You can then run DFS again from any node.

---

How to Use

1. Setup

1. Install Processing.
2. Copy the sketch code into a new Processing .pde file.
3. Run the sketch by clicking the Play button in Processing.

2. Controls

• Add a node → Click on empty space in the canvas.
• Add an edge → Click one node, then another node.
• Run DFS → Click the same node twice (this becomes the DFS start node).
• Move a node → Click and drag a node to a new position.
• Reset DFS → Click the "Reset DFS" button in the top-right corner.

---

Example Workflow

1. Start the program.
2. Click four times in different spots to create 4 nodes.
3. Connect them by clicking pairs of nodes in sequence.
4. Pick any node and double-click it (click twice) to start DFS.
5. Watch as:
   • Nodes light up with colors according to visit order.
   • Edges glow cyan as DFS traverses them.
6. Click Reset DFS to clear traversal and try again from a different node.

---

License

This project is released under the MIT License.
You are free to use, modify, and distribute it, provided that the license is included.

---