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 few instants (I delayed every iteration of some milliseconds), the ending configuration of the array (which is, at least, sorted 
).
This is my code:
int W = 1000;
int H = 300;
int[] array;
boolean start = true;
void setup() {
size(1000,300); // Set the same as W and H
initArray();
noLoop();
}
void initArray() {
array = new int[W];
for(int i=0; i<array.length; i++){
array[i] = int(random(1,H));
}
}
void draw() {
background(200);
if(start) {
new MySorting().sort();
start = false;
}
for(int i=0; i<array.length; i++) {
line(i, H, i, H-array[i]);
}
}
void waitMillis(float m) {
int start = millis();
while(millis() < start + m);
}
///////////////////////
class MySorting {
void sort () {
for(int i=0; i<array.length; i++){
waitMillis(2);
Element min = findMin(array, i);
int temp = array[i];
array[i] = min.value;
array[min.position] = temp;
redraw();
println(i);
}
}
Element findMin(int[] array, int startIndex) {
if(startIndex == array.length-1) {
return new Element(startIndex, array[startIndex]);
}
int minValue = Integer.MAX_VALUE;
int minPos = -1;
for(int i=startIndex; i<array.length; i++) {
if(array[i] < minValue) {
minValue = array[i];
minPos = i;
}
}
return new Element(minPos, minValue);
}
}
class Element {
int position;
int value;
Element(int position, int value) {
this.position = position;
this.value = value;
}
}
Hope someone can help me!!
Thank you! 
1 Like
Hi Bertin
This is such an interesting idea.
I’m not sure, but try implementing your sort algorithm without a for-loop. Manually increment i when you click the mouse or press a key.
See if that works first as a quick fix. It would be my first step in debugging this.
Good luck!
@bertin
Funnily enough, I wrote a Processing sketch that did exactly that a few years ago, inspired by the visual and auditory sorting demonstration video on youtube. The way I did it was as follows:
I was pretty new to Processing at the time, and only just beginning to understand recursion. Given that Processing has a built in continuous loop (draw()), I wrote functions that performed one step of a sorting algorithm. Then, I used the draw loop to continue calling that function until the array was sorted. It only works for some algorithms, like bubble and selection sorts, but it gets the job done. I hope this is clear enough to understand, but if it is not, I can provide a working example. Best of luck, and have fun!
1 Like
@Red_Hen @Trilobyte Thank you for your answers !!
@Trilobyte yes, I understood what you mean but I was trying to avoid that solution because I wanted to separate as much as possibile the sorting algorithm implementation from the logic of draw(), because my initial goal was to implement different algorithms and see their visual behaviour, simply changing the class that implements the sorting method.
At the end i came up with this idea, that is working!
I left the idea of using redraw() with noLoop() and I used a separate thread for the sorting of the array, launching it in the setup().
draw() continues to loop showing the current configuration of the array, while the thread class sorts the array indipendently, without any “Processing” calls.
This is the code that I changed:
void setup() {
size(1500,500);
initArray();
thread("sortArray");
}
/* THREAD */
void sortArray() {
//new SelectionSort().sort();
new BubbleSort().sort();
}
void draw() {
background(200);
for(int i=0; i<array.length; i++) {
line(i, height, i, height-array[i]);
}
}
And for example, this is my BubbleSort class (I only found out later that the algorithm that i previously called MySorting is called SelectionSort 
)
interface Sorting {
void sort();
}
class BubbleSort implements Sorting {
@Override
void sort() {
int L = array.length;
while(arrayNotSorted()) {
waitMillis(5);
for(int i=0; i < L-1; i++) {
if(array[i] > array[i+1]) {
switchPos(i,i+1);
}
}
L--;
}
}
void switchPos (int i, int j) {
int temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
Thanks again for your answers!
3 Likes
This isn’t how I would do it, but this is a quick fix to get your OP code working as expected
int W = 1000;
int H = 300;
int[] array;
boolean start = true;
int k = 0;
void setup() {
size(1000, 300);
initArray();
}
void initArray() {
array = new int[W];
for (int i=0; i<array.length; i++) {
array[i] = int(random(1, H));
}
}
void draw() {
background(200);
sortStep();
for (int i=0; i<array.length; i++) {
line(i, H, i, H-array[i]);
}
}
void sortStep() {
Element min = findMin(array, k);
int temp = array[k];
array[k] = min.value;
array[min.position] = temp;
k++;
k = constrain(k, 0, array.length-1);
}
Element findMin(int[] array, int startIndex) {
if (startIndex == array.length-1) {
return new Element(startIndex, array[startIndex]);
}
int minValue = Integer.MAX_VALUE;
int minPos = -1;
for (int i=startIndex; i<array.length; i++) {
if (array[i] < minValue) {
minValue = array[i];
minPos = i;
}
}
return new Element(minPos, minValue);
}
class Element {
int position;
int value;
Element(int position, int value) {
this.position = position;
this.value = value;
}
}
1 Like
You may also be interested in previous discussions of animating a bubble sort in Processing, here:
2 Likes