# BubbleSort Visualization (want to slow it down)

**URL:** https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742
**Category:** Coding Questions
**Created:** [December 18, 2018, 4:57pm UTC](https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742 "2018-12-18T16:57:39Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)
#### Post date: [December 18, 2018, 4:57pm UTC](https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742/1 "2018-12-18T16:57:39Z")

</div>

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](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 😕

---

<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: [December 18, 2018, 6:20pm UTC](https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742/2 "2018-12-18T18:20:06Z")

</div>

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.

[![](https://img.youtube.com/vi/ezMDe0b_3c0/hqdefault.jpg "Bubble Sort") ](https://www.youtube.com/watch?v=ezMDe0b_3c0)

---

<div class="post-metadata">

### Author: ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)
#### Post date: [December 18, 2018, 6:31pm UTC](https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742/3 "2018-12-18T18:31:26Z")

</div>

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

---

<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: [December 21, 2018, 12:23am UTC](https://discourse.processing.org/t/bubblesort-visualization-want-to-slow-it-down/6742/4 "2018-12-21T00:23:00Z")

</div>

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

> [@Issue rendering video/how to render video on processing](https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667):
>
> 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…