USER INTERFACE LAYER

HTML5 + Bootstrap (index.html)

- Navigation Bar (Algorithm Selection, Controls)

- Metrics Dashboard (Performance Table)

- P5.js Canvas (Grid Visualization)

PRESENTATION LOGIC LAYER

UIHandler (ui.js)

- Mouse Event Handling (Click, Drag, Release)

- Terrain Selection Management

- Source/Destination Repositioning

- User Feedback Messages

APPLICATION CONTROL LAYER

PathfindingApp (main.js)

- Application State Management

- Algorithm Lifecycle Control (Start/Stop/Resume)

- Visualization Loop Coordination

- Metrics Collection & Display

- Canvas Rendering Orchestration

DATA STRUCTURE LAYER

Grid (Grid.js)

- 2D Graph Creation

- Node Initialization

- Neighbor Mapping

- Rendering Logic

- Obstacle Generation

- Node Reset

ALGORITHM LAYER

AStar.js

Dijkstra.js

BFS.js

DFS.js

Greedy.js

UTILITY LAYER

config.js

- heuristic() - Euclidean Distance

- findLowest() - Min Priority

- reconstructPath() - Backtrack

USER

Select Algorithm & Configure Grid

Click START

PathfindingApp.start()

- Create Algorithm Instance

- Initialize Open/Closed Sets

Visualization Loop (P5.js)

- Call algorithm.step()

- Render current state

Path Found?

Calculate Metrics

- Nodes Explored

- Path Length

- Path Cost

- Execution Time

Display Results in Dashboard

Continue Searching