Algorithm visualizer made with React, Material UI and P5JS

algorithmsVisualizer

The purpose of doing this was to learn to make animations and at the same time strengthen the knowledge of some classic algorithms.

For now the page contains the visualizations of:

and the proofs of:

In the section of vertices you can eliminate the vertices that are in the graph or you can add new vertices in the empty places, the application will not allow you to add a vertex very close to the sides of the screen or very close to another vertex, this was done with the purpose of giving a better user experience
In the edges section you can at first choose an initial vertex to add a new edge or delete an existing one, you can also directly touch on an edge value to be able to change it.

If you chose a first vertex you should then choose a second vertex, when choosing it if there is no edge between the two chosen vertices, an edge of an average value will be added to the distance of the two vertices, if an edge already exists it will be eliminated.
if you choose the dfs or bfs option you will be prompted to choose an initial vertex for the algorithm to start.
If you choose the dijkstra algorithm, you must choose an initial vertex and a destination vertex.
The kruskal algorithm will work as soon as you press the minimum spanning tree button.

You can at any time manipulate the array with the inputs section given below the screen.
After pressing on the algorithm you want, you can put it to work by pressing the play button, at any time you can reset the screen obtaining the state in which the input array is.

Choosing the final number in the slider, you can start the algorithm whenever you want by pressing the play button, to reset everything press the reset button.

By clicking on the method you want to use, depending on that method you will be asked for the required inputs, giving the calculate button you will be shown step by step how the result was reached.