4 ms·

this is potentially exactly what i've been looking for. i posted about where i ended up, using screen recording to capture canvas animations to gifs just a week

this is potentially exactly what i've been looking for. i posted about where i ended up, using screen recording to capture canvas animations to gifs just a week ago https://news.ycombinator.com/item?id=5691742 https://news.ycombinator.com/item?id=5691742 this may not work for me though because i need to record a css-scaled, hard-edges (pixelated) canvas. (which works in ff but not in chrome) and want to do this at 60fps, so on each reqAnimationFrame. maybe i can disable imagesmoothing on the canvas and scale each frame via callback before encoding it.

rwinn 13y ago
not sure if i fully understand what you are trying to do, but encoding 60 frames per second will be hard. If you already know the color palette it might be possible, this lib spends about 80% of the time doing the color reduction.
- leeoniya 13y ago
  yes, the color palette is small and known in advance. http://i.imgur.com/wypWt11.gif http://i.imgur.com/wypWt11.gif is representative of the output. so ideally i would be able to predefine the palette and then hook the encoder into a callback from my reqAnimFrame loop. it could be potentially much easier on the encoder if it did its own scaling instead of being handed scaled frames for analysis. my canvases are typically very small. for slightly more context, it's for clearer, scaled up pXY.js docs/demos here http://o-0.me/pXY/#scanning http://o-0.me/pXY/#scanning
jevinskie 13y ago
Most browsers won't display GIFs at more than ~20 FPS anyways.
- leeoniya 13y ago
  interesting, i think i've been noticing this but wasn't sure what was going on. in my case it's more important to show each frame than to get a specific fast fps. guess i'll have to resort to frame grouping where i need the speed.
  - jevinskie 13y ago
    More information about minimum GIF frame rates across browsers: http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi...
vanderZwan 13y ago
Are you aware of the solution the author or Sublime Text came up with? It uses a PNG plus JSON metadata plus javascript plus canvas to create a tiny animation: http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...
- leeoniya 13y ago
  that's pretty cool. i'll have to look into it. on drawback is that in needs canvas. it may seem strange that i was hoping not to use canvas for the docs/demos since my entire lib is canvas-centric. but i would like at least the docs not to look visually broken in ie8 even if all of the live canvas demos dont work. the primary reason was to have upscaled demos via nearest-neighbor in chrome, though. [EDIT] nvm, "...or emulating it using overlaid div elements for older browsers. "
  - vanderZwan 13y ago
    The discussion when he published[1] it is probably also worth looking into, as people discussed pros and cons of this technique, and alternatives. Which is kinda what you're looking for, right? [1] https://news.ycombinator.com/item?id=4532146 https://news.ycombinator.com/item?id=4532146

rwinn 13y ago

not sure if i fully understand what you are trying to do, but encoding 60 frames per second will be hard. If you already know the color palette it might be possible, this lib spends about 80% of the time doing the color reduction.

leeoniya 13y ago
yes, the color palette is small and known in advance. http://i.imgur.com/wypWt11.gif http://i.imgur.com/wypWt11.gif is representative of the output. so ideally i would be able to predefine the palette and then hook the encoder into a callback from my reqAnimFrame loop. it could be potentially much easier on the encoder if it did its own scaling instead of being handed scaled frames for analysis. my canvases are typically very small. for slightly more context, it's for clearer, scaled up pXY.js docs/demos here http://o-0.me/pXY/#scanning http://o-0.me/pXY/#scanning

jevinskie 13y ago

Most browsers won't display GIFs at more than ~20 FPS anyways.

leeoniya 13y ago
interesting, i think i've been noticing this but wasn't sure what was going on. in my case it's more important to show each frame than to get a specific fast fps. guess i'll have to resort to frame grouping where i need the speed.
- jevinskie 13y ago
  More information about minimum GIF frame rates across browsers: http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi...

vanderZwan 13y ago

Are you aware of the solution the author or Sublime Text came up with? It uses a PNG plus JSON metadata plus javascript plus canvas to create a tiny animation: http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...

leeoniya 13y ago
that's pretty cool. i'll have to look into it. on drawback is that in needs canvas. it may seem strange that i was hoping not to use canvas for the docs/demos since my entire lib is canvas-centric. but i would like at least the docs not to look visually broken in ie8 even if all of the live canvas demos dont work. the primary reason was to have upscaled demos via nearest-neighbor in chrome, though. [EDIT] nvm, "...or emulating it using overlaid div elements for older browsers. "
- vanderZwan 13y ago
  The discussion when he published[1] it is probably also worth looking into, as people discussed pros and cons of this technique, and alternatives. Which is kinda what you're looking for, right? [1] https://news.ycombinator.com/item?id=4532146 https://news.ycombinator.com/item?id=4532146