Hacker News Reader

Comment by leeoniya | Hacker News Reader

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

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.

View on HN

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.h...

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. "

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

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.

yes, the color palette is small and known in advance. 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

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

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.

More information about minimum GIF frame rates across browsers: http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi...

Reply on news.ycombinator.com