BubbleSort Visualization (want to slow it down)

[Lillbre]

I want to make a visualization of BubbleSort and make rectangles move to show the sorting. My code works “kind off” https://editor.p5js.org/Lillbre/sketches/HkkBABreN but I would love if every move could be seen more slowely. Does anyona have any suggestions ( I need newbeel-anguage to understand

[quark]

It is not easy to synchronize the sort with a visual display, I have tried in the past but found the best way was to let the sort happen at normal speed but remember which elements are being swapped, something like a linked list which you can iterate through forwards and backwards.

Then for the display you can just iterate over the list at any speed you want.

This video is of a Processing sketch I created for visualising a variety of sort algorithms where I used this approach.

Bubble Sort

[Lillbre]

Thank you quark! I’ll try that. Great video!

[jeremydouglass]

Possibly of interest: a related recent discussion of sort visualization –

Issue rendering video/how to render video on processing

I’m extremely new to this and have made a design using a tutorial. My code runs smoothly until I enter: saveFrame(“output/frames_####.png”); when I enter this, my video does not run, instead there is a blank screen. please help if you can CODE BELOW: float[] values; int i = 0; int j = 0; void setup() { size(600, 600); values = new float[width]; for (int i = 0; i < values.length; i++) { values[i] = random(height); } //for (int i = 0; i < values.length; i++) { // for (int…