# Sorting algorithms visualisation

**URL:** <https://discourse.processing.org/t/sorting-algorithms-visualisation/8686>\
**Category:** Gallery\
**Created:** [February 24, 2019, 10:09am UTC](https://discourse.processing.org/t/sorting-algorithms-visualisation/8686 "2019-02-24T10:09:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![crashxxl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crashxxl/32/3843_2.png) [@crashxxl](https://discourse.processing.org/u/crashxxl)\
**Post date:** [February 24, 2019, 10:09am UTC](https://discourse.processing.org/t/sorting-algorithms-visualisation/8686/1 "2019-02-24T10:09:30Z")

</div>

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.

Demo is here: [https://crashxxl.github.io/visual\_sorts/](https://crashxxl.github.io/visual_sorts/)  
Full code is here: [https://github.com/crashxxl/visual\_sorts](https://github.com/crashxxl/visual_sorts)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 24, 2019, 11:46am UTC](https://discourse.processing.org/t/sorting-algorithms-visualisation/8686/2 "2019-02-24T11:46:53Z")

</div>

Nice visualisation well done.

The only suggestion I make is _not_ to show the randomising of the data before the sort

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 24, 2019, 7:39pm UTC](https://discourse.processing.org/t/sorting-algorithms-visualisation/8686/3 "2019-02-24T19:39:28Z")

</div>

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

> [@Array Sorting visually](https://discourse.processing.org/t/array-sorting-visually/803):
>
> Hi everyone! This is my first topic, hoping not to do something wrong. I was trying to develop a simple sketch that shows in real time the sorting algorithms of an array of integers, through simple vertical lines which length represents the value of the i-th element of the array. My problem is this: I’m not able to show the algorithm in real time. My idea was to use the redraw() function at the end of each iteration of the sorting algorithm, but it doesn’t work. The sketch only shows, after a …

…that includes a link list to several even older examples with different approaches.

They are mainly Processing. not p5.js, but still interesting.

---

<div class="post-metadata">

**Author:** ![crashxxl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crashxxl/32/3843_2.png) [@crashxxl](https://discourse.processing.org/u/crashxxl)\
**Post date:** [February 24, 2019, 9:19pm UTC](https://discourse.processing.org/t/sorting-algorithms-visualisation/8686/4 "2019-02-24T21:19:49Z")

</div>

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

I will add some other circle visualisations !