Browser locks up on download

[shiffman]

The browser page locks when I call download() -- I am able to interact again a few seconds later once the file downloads. I've tested in both the web editor and just serving the files locally (only tested with latest chrome on mac os)

https://editor.p5js.org/codingtrain/sketches/WfEih8mL7

[WenheLI]

The locking thing is inevitable right now from our point.
While generating the gif Blob, the UI thread will be blocked due to the lack of multi-thread support (That is what we thought the problem is).
We have tried the web-worker to achieve a multi-thread feature, while it doesn't work, probably due to p5.js does not support the web worker yet.
I will let the thread open for discussion on the solution or some possible reasons for this phenomena.

[fffiloni]

I can't really help technically on this issue, but i can tell you how i embraced the freeze, for a project where users can make frame to frame animations (like traditional animation), and then thanks to you, can download a animated Gif from their creation.

In P5Gif.js, i added a callback function that triggers a message after the file is downloaded.
Then that message appears in a front console which give feedback to the user in the GUI.

The scenario is :

1. User click the button "create GIF"
2. A function plays each frame, and each frame is added to the recorder using recorder.addFrame()
3. when we reach the end of the animation, a button appears in the console.
4. This button says "Gif is ready to be baked, do you want to download it ?"
5. user click, so a function calculates the estimated waiting time while the browser will freeze. (I found that P5Gif.js takes approximatively 7 seconds for each frame to be processed.)
6. We send a message to the user in the console to tell him how much time he will have to wait, to take this time to brew a coffee. Then we trigger within a setTimeout the recorder.download() function.
7. Browser freezes. But it's okay, user is aware.
8. Gif is baked and downloaded, browser is back running freely, so we send the message from the callback i mentionned above the scenario, saying "Gif has been downloaded !"
9. User is happy.

It's an UX solution, not quite satifying, but it works like this for now ...
Hope it helps !

Cheers.
(Pardon my english, i'm french :) )
PS: To understand what i meant, you can give it a try here : https://solomotion.herokuapp.com

[WenheLI]

@fffiloni Thanks for your suggestion, I will look into them. It's really helpful in term of the UX design.

[fffiloni]

i get some verbose console.log from p5 while exporting to Gif for each frame :

p5.js says: createImage() was expecting Integer for parameter #1 (zero-based index), received number instead. [http://p5js.org/reference/#p5/createImage]

p5.js says: color() was expecting Number for parameter #0 (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. [http://p5js.org/reference/#p5/color]
maybe its related to the freeze ?

Maybe this is related to the freeze problem ?

[WenheLI]

Can I have a context of how such verbose is made since in my environment I didn't see these warning?

[fffiloni]

I get these when i fire the download function.

In the chrome console, i activated all the type of log (verbose, error, info, etc) .

So for each image that is processed, we get the first message once, then we have 960 occurences of the second one.

And this happen for each frame being processed by p5gif i guess