How can I force a display refresh?

Kwantuum

I am trying to animate sorting algorithms to visualize them, I would like to refresh the display (i.e. run the draw function) every time the array is modified, how would I go about doing that? Since redraw() only sets a flag, it waits for the whole sorting to be finished before refreshing which is completely against the point. I'd also like the method to be easily applicable to any sorting algorithm regardless of implementation. Ideally I'd like for the sorting algorithm to hang until the refresh is complete so that every array modification shows at least for one frame.

TfGuy44

https://forum.processing.org/two/discussion/comment/100882

Kwantuum

It looks like what I'm trying to do would work fine with a separate thread, but I can't do that in p5, another reply suggest using frameCount as my loop counter but that means that my algorithms would require a lot of adaptation, particularly recursive ones. Is there really no way to ask p5 for a refresh and wait for it to complete?

GoToLoop

Ideally I'd like for the sorting algorithm to hang...

1. yield: https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield
2. next(): https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next
3. function*: https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Kwantuum

That is exactly what I needed! It needed a few adaptations because I used nested functions for mergeSort, but still not much work at all and does exactly what I wanted, 10/10, even learned some neat JS stuff in the process, thank you!

GoToLoop

Glad that was the approach you needed for it! :-bd

Just use operator yield to pause your sorting algorithm function*.

Then within sketch's draw(), call next() in order to resume the algorithm step-by-step. *-:)

Kwantuum

Exactly what I did! And for recursive functions (or nested functions):

function fn(a) {
  if(a <= 0)
    return;
  var iterFn = fn(a-1);
  while(!fn.next().done)
    yield;
}

this way the next() just propagates to the deepest recursion level on every call.

GoToLoop

... with a separate thread, but I can't do that in p5, ...

p5.js is merely a framework/library. What you meant was whether JS programming language can have multiple threads/concurrency execution. O:-)

It's an advanced feature, w/ lotsa boilerplate; but answer is YES, the Worker API w/ its other stuff: \m/

1. https://developer.Mozilla.org/en-US/docs/Web/API/Worker
2. https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
3. https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics

Kwantuum

What I meant is that I can't just run my sorting algorithm in a separate thread with a simple thread(function) statement as in Processing, I did find out about the worker API in my search but even then I wasn't sure it would really solve my problem, and I'd probably still have to artificially slow down the sorting algorithm anyways. With this generator solution, I can have a 1 to 1 correspondance between frames and array modifications which is what I was really after, and I can easily speed it up or slow it down by calling next() multiple times per frame or once every few frames. It allows me to choose selectively what parts of the algorithm waits a frame before resuming and what part doesn't (for example I can have merging arrays be progressive or instantaneous). Multi-threading is an interesting advanced feature for sure, I'll keep in mind it exists if I ever encounter a situation that requires it, thanks again :)

GoToLoop

Well, I was just making sure you knew multi-threading is possible in JS if you indeed would need it! ~O)