Computer Graphics Project

Graph Algorithm Visualizer

This project is being developed for the Computer Graphics course with the objective of creating a graph algorithm visualizer using P5.js. The initial stage focuses on building a visual graph editor, allowing users to create graph structures. In later stages, the project will explore the visualization of graph algorithms through animations that illustrate their execution step by step. The main goal is to provide an educational tool that helps students better understand graph structures and the behavior of graph algorithms through visual representations.

View project on GitHub

Graph Builder

Enter graph edges using the format source target, with one edge per line. For example, the lines 1 2 and 3 4 represent two edges: one connecting vertex 1 to vertex 2, and another connecting vertex 3 to vertex 4.

DFS (Depth-First Search)

Green: vertex currently being processed.
Blue: vertex discovered, but still has neighbors to be processed.
Red: vertex fully processed, all of its neighbors have been visited.

BFS (Breadth-First Search)

Green: vertex currently being processed.
Blue: vertex discovered and waiting in the BFS queue.
Red: vertex fully processed, all of its neighbors have been discovered.