Hi everyone !
I would share little work i did for array visualisation while a sorting algorithm is running, with p5.js
You can choose array size, steps speed, algorithms, and 2 types of visualisations. It plays sound while running, depending on array values that are readed.
I’m new to p5.js and i found some performances issues while runing on big arrays. Use Chrome for better performances.
I enjoyed the sound effects – also, the ability to switch views.
The circle arcs change radius as they move, while the bars do not change height as they move. Why is the circle view doing that? It hides the fact that the sort has taken place at the conclusion.
You might be interested in past discussions of visualizing sorting
…that includes a link list to several even older examples with different approaches.
They are mainly Processing. not p5.js, but still interesting.
The only suggestion I make is not to show the randomising of the data before the sort
Agree with that, i will add a checkbox to skip randomisation !
The circle arcs change radius as they move, while the bars do not change height as they move. Why is the circle view doing that? It hides the fact that the sort has taken place at the conclusion.
The arc radius are determined by how far they are of the right position. If an arc is near the right position, the radius will be near maximum, otherwise it will be smaller.