Algorithm visualizer made with React, Material UI and P5JS.

Made with React, P5JS and Material UI.

Link

https://andresrodriguez55.github.io/algorithmsVisualizer/#/

Description

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:

• Deep first search
• Breadth first search
• Shortest path (using Dijkstra's algorithm)
• Minimum spanning tree (using Kruskal's algorithm)
• Bubble sort
• Selection sort
• Insertion sort
• Quick sort
• Merge sort
• Sieve of eratosthenes
• Linear algebra methods

and the proofs of:

• Extended eucledian algorithm

How to use visualizations

Graphs

• 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.

Simple & advanced sort

• 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.

Sieve of eratosthenes

• 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.

Linear Algebra

• 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.

Screenshots