search

ondras / primitive.js

JS port of primitive.lol
https://ondras.github.io/primitive.js/
MIT License
778 stars 82 forks source link

GIF generation #18

Open DyeffersonAz opened 6 years ago

DyeffersonAz commented 6 years ago

Make it output a gif to share with friends. That gif'd show how the computer "solved" that problem, but faster than it was.

ondras commented 6 years ago

This sounds really nice, but I have literally zero knowledge on how to create an animated gif in client-side JavaScript :-(

DyeffersonAz commented 6 years ago

https://yahoo.github.io/gifshot/

Is it applicable?

Ataraxy commented 6 years ago

So this would take some doing but it should be possible with 'gifshot'.

One approach would be to take the end result SVG, parse each individual path from it (they're already in order of creation), create an empty SVG element, and then one by one take each path and add it to the new SVG element. Each time you add a path, generate an image from this SVG element.

When done, you'll have an image for each "frame" which you could then use gifshot or another similar library such as ffmpeg to sitch them all together to create a gif.