search

WenheLI / p5.gif

P5.js gif helper
MIT License
38 stars 4 forks source link

Browser locks up on download #8

Open shiffman opened 5 years ago

shiffman commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

fffiloni commented 5 years ago

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 commented 5 years ago

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

fffiloni commented 5 years ago

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