Feature for saving gif files

[stalgiag]

New feature details:

I am getting this request quite a lot from my students. They want to be able to share their work on social media in animated form. I know that saveFrames exists but students have to already be relatively advanced to use that and it doesn't encode to gif.

Other options like using ccapture.js, require a number of advanced skills that students often don't have during their first experiences with coding.

Since GIF support was enabled we already have most of the work in place for this feature. saveGif already exists as a private method for saving animated p5.Image objects as GIFs. To enable this feature, we would have to add a separate public method (probably saveGif and the private one would be renamed) that stores frames over a certain number of frames and then turns them into an animated p5.Image object. This object could then be sent to the private method which could handle all of the encoding.

How would this new feature help increase access to p5.js?

It would enable students to share their work in animated form without needing advanced skills.

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

[golanlevin]

The p5.createloop library by @mrchantey currently provides straightforward GIF loop export functionality for p5.js. I have used it very successfully with my students (Art first-year undergrads with no prior programming experience); the only "advanced skill" needed is knowing how to add the include to the HTML.

It would be worth evaluating whether it should be incorporated wholesale, or, remain an external library and simply advertised better, for example on the https://p5js.org/libraries/ page.

• Library: https://www.npmjs.com/package/p5.createloop
• My sample sketch: https://editor.p5js.org/golan/sketches/KAF80owRC

[stalgiag]

Thanks @golanlevin ! Yes I saw createLoop in exploring and it seems really cool. I think there is still a bit of curtain pulling back here that could ideally be avoided for something this core to the use of p5. Depending on the education context revealing a secondary file with a markup language, adding additional libraries, and passing object literals as parameters can all feel pretty intimidating. I have had students ask to download gifs on their first or second day of class.

I believe that since we already have gif encoding functionality in the core library we should take advantage of this and have a simple saveGif() function that works with or without arguments.

[golanlevin]

Thanks @stalgiag, I completely understand. This especially makes sense for middle-schoolers. Uh, so let's think through some proposals then:

(1) saveGif(filename, nFrames);

This immediately starts recording the next nFrames frames, and when it's done, saves it out as a GIF. Puts the burden on the programmer of knowing whether they are actively writing to a GIF. Could cause problems if the programmer calls saveGif while another call to saveGif is actively running.

(2)
saveGif(START, filename); // starts recording
saveGif(STOP); // stops recording

(3)
beginRecord(GIF, filename);
endRecord();
// analogous to Processing PDF: https://processing.org/reference/libraries/pdf/index.html

(4)
// in setup:
GIFWriter myGiffer = createGIFWriter();
// in draw:
myGiffer.nextFrame();
// on (e.g.) keyPressed:
myGiffer.save(filename, fps, loopBool, nPaletteColors);
myGiffer.clear();

[stalgiag]

Thanks for this!

Number 1 is what I was originally thinking. My thought was that the library could keep a flag true during recording and ignore additional calls (maybe use FES). I like that both parameters can be optional here with a default name and frame count. We could also enforce a maximum frame count to prevent memory problems. Anything over 500ish frames should likely be a screen recording. This has the benefit of being a single command that could be put in mousePressed but it also runs the risk of masking complexity too much.

I like 2 and 3. The start and stop formatting feels natural. My primary concern would be holding programmers responsible for not overflowing the memory.

I dig the flexibility and power of 4. Would it be overdoing it to combine 1 & 4? Webgl camera offers something like this with the ability to create a persistent camera with createCamera() for later use or call camera()to edit the sketch state immediately.

I'd love to hear thoughts from other people as well. I think this issue can stay open for a while as it warrants discussion. In the meantime, p5.createLoop is a great alternative and is heavily encouraged for people facing this challenge right now.

[golanlevin]

I would also love to hear other voices in this.
I have just two other considerations:

• I think it could be good to mimic Processing-style libraries if possible (e.g. PDF export), to encourage harmonies across toolkits.
• I can imagine situations in which the user doesn't know (in advance) how many frames they want to record. For example, suppose I create a GIF from a gesture that I'm drawing -- the number of frames depends on how long I'm scribbling.

FWIW, The following would be a Processing (Java) style way of doing things:

var myGiffer; 
var bRecording = false; 
function setup(){
  myGiffer = createGIFWriter();
}

function draw(){
  circle(mouseX, mouseY, 50); 
  if (bRecording) myGiffer.nextFrame();
}

function mousePressed(){
  if (!bRecording){
    bRecording = true;
    myGiffer.clear();
    myGiffer.beginRecord(); 
  } else {
    bRecording = false;
    myGiffer.endRecord();
    myGiffer.save("output.gif", 30, TRUE, 256); // filename, fps, loop, npalette
  }
}

[mrchantey]

Great to see this discussion being had. In writing p5.createGIF, and then deprecating it in favour of p5.createLoop, I encountered a handful of discoveries:

• When a user says "I want to create a GIF", what they usually mean is a looping GIF
• This workflow is fundamentally different from that of saving images or frames
• Users will generally have an idea of the duration in seconds rather than frame count
• The createLoop library works with a single argument, createLoop(duration), which defaults to 3 seconds.
• To create a meaningful looping animation, variables like loopProgress need to be exposed in the draw function.
• This approach means that a user can write a frame-perfect GIF loop with the library only appearing twice in their sketch:

  //in setup
  createLoop()
  //in draw
  myObjectXPos = animLoop.progress

• The encoder used should be asynchronous so the user can continue to enjoy their sketch, some of these operations can be expensive

[mrchantey]

Out of interest the library was created after following some of @shiffman's more loopy tutorials on coding train :)

• GIF loops
• Polar Noise
• Noise GIF loops
• 4D polar noise loops

For anybody interested in an implementation, these are a great starting point for observing the workflow and where it can be improved.

[golanlevin]

@mrchantey — thanks for making such a great, easy-to-use library. I had very good results using p5.createLoop with my students, Art-school first-years.

I totally get what you're saying about making looping GIFs being the goal for many people. The variables you exposed for this (0..1, 0....2pi) are super useful. Your looping noise also elegantly obscures some really complex, difficult-to-explain stuff under the hood -- nicely done.

I wasn't sure how to trigger p5.createLoop to start recording at any time other than in setup(). Admittedly I didn't work very hard to figure out an answer. But FWIW, this became a small issue for a student who wanted to record a GIF after the screen had already built up some imagery through user interaction. She ended up doing something else.

I don't think it's crazy to want a screen-recording tool, that produces animated GIFs, whose recording the p5 programmer can .start() and .stop() when they choose. I agree that this is a different workflow.

[mrchantey]

@golanlevin that is a very understandable use-case. Not crazy at all, and the implementation wouldnt be either. If you're interested, the encoding library works just like this. All that would be needed is to create a p5 wrapper for it.

[stalgiag]

Thanks for the library @mrchantey ! I love the ability to create seamless loops.

p5 has an encoding library omggif. It is similar to gif.js, just smaller. We actually already encode gifs for people that are saving image assets that are already animated as seen in saveGif. We just need to decide on the design for making this available for recording the entire canvas.

[shiffman]

Super excited to see this discussion! Would love to help in any way that I can. A totally different but related direction (a la the Processing "MovieMaker" tool) would be to build in a saveGIF button / export option into the web editor itself! This is probably a step 2 or longer term option (and has its downsides as well) but could be really wonderful for the short 2 hour intro to p5 weekend workshop context.