search

jackschaedler / goya

Pixel art editor built on Clojurescript + Om
Eclipse Public License 1.0
1.68k stars 66 forks source link

Add 'Export History as Animation' feature #6

Closed jackschaedler closed 10 years ago

jackschaedler commented 10 years ago

Since we have such power w/r/t the undo-history, it would be very cool to add an option for exporting the entire undo history as an animated gif. This would allow artists to easily make tutorials showing their process from start to finish.

I'd like to look into adding a menu entry beneath 'Export to Canvas' called 'Export History as Animation' or something similar.

It looks like the gif.js library (http://jnordberg.github.io/gif.js/) could be a good option for rendering each frame in the undo history into a gif.

swannodette commented 10 years ago

+1, I was thinking the exact same thing when manually scrubbing over the history with my mouse.

jackschaedler commented 10 years ago

Done... I think. I've tested the github-page on Chrome, Firefox and Opera and it seems to be working as intended.

http://jackschaedler.github.io/goya/

Some interesting commits: Using Om's component local state makes displaying the export progress really clean: https://github.com/jackschaedler/goya/commit/c24f284e1375606673f048e200c538a5bdd764b3

Another example of the power of the persistent data structures: https://github.com/jackschaedler/goya/commit/d91119788d38e430a242f00d3d6d749ede3e1d05

Not sure if I'm incorporating the library correctly here. I tried to follow the example on your "Externs getting you down?" blog post:

https://github.com/jackschaedler/goya/commit/7af42094fc525aa5da6d2789a2a5fe1880040790

I think this can be a really cool tool for people making pixel-art tutorials. Imagine if you could do this with every app! Seems like it could be the killer feature for this example app.