exact saveFrames() syntax?

Xeronimo74

Let's say I want to save the results of a p5js sketch as GIFs, how would I do that?

The reference page is a bit vague on this ... Thanks!

akenaton

@xeronimo:: no it's not vague::: String: any sequence of letters or numbers that ends with either ".tif", ".tga", ".jpg", or ".png" so no for .gif

Xeronimo74

no GIFs? this is not mentioned here: http://p5js.org/reference/#/p5/saveFrames

also, could you please translate this Processing command to p5js then?

if (frameCount<100) saveFrame("image-###.png");

thanks!

akenaton

@xeronimo== no; i know java && android but not p5js... sorry!!!

Xeronimo74

well ... this is the p5js section, no?? ;P

blindfish

@Xeronimo74 You link to the reference which gives the syntax for the command:

saveFrames(filename,extension,_duration,_fps,callback)

What have you tried?

Whilst Processing's saveFrame appears to save an image each frame for as long as it is allowed to; the parameters in saveFrames (note the final 's') imply that you define the number of frames you want up front (and therefore a condition to set a limit is not required).

The answer to your question is dependent on the frame-rate of the sketch; but I would assume something along the lines of the following would work:

saveFrames('Image-', 'png', 4, 25);

Here I'm assuming 25fps; thus 4 seconds = 100 frames...

It's not clear from the documentation whether filnenames are auto-incremented - but I would assume so - nor whether the fps in the parameter must match that of the sketch. It's fair to say that p5js is still in development, as is the documentation (actual usage examples would be helpful!), but it's not difficult to test things out...

One recommendation however: note the following:

If no callback is provided, the browser will attempt to download all of the images that have just been created.

The callback is optional and suggests the image files are available with a variable reference which you can somehow submit to a server. Without it the browser will try and download the images. It's possible that this will invoke a save image dialogue for each one; or simply crash your browser. I'd make sure your initial test saves very few frames so you can see the behaviour and then plan accordingly...

You'll gather from the above I haven't test this ;)

Xeronimo74

Yeah, I'm aware of the alleged syntax ;) But not about the specifics! There is no actual example of how to use this ...

but it's not difficult to test things out...

Dude, I tried to figure it out on my own but obviously wasn't able to ... hence my question here ;)

I can't get it to save. I tried your suggested commands.

Guess I'll ask the p5js people via Twitter.

But thanks anyway!

blindfish

@Xeronimo74: so what did you try? what happened? How are you testing? The source (see line 223 onwards) would appear to confirm my suggested example; though it's not clear where saveFrames should be invoked - e.g. in setup, in draw etc. Report your findings; make a simplified example of your programme; post the code here for others to test.

As I said it's early days for p5js so this may be a bug; but it may be a problem with your implementation. Until we see code we can't help...

Xeronimo74

I added this to the draw() section:

saveFrames('Image-', 'png', 4, 25);

Nothing was saved. Or at least not in the folder of that sketch ...

And again: the reference should include a sample example of how this statement is to be used. Can't be so hard to add if one knows how it's supposed to work?

For now I'm simply translating the sketch to Processing and I'll save my GIFs there ...

blindfish

I added this to the draw() section

Funnily enough I had a hunch it wouldn't work in draw(): putting it there means you're making a call to saveFrames on every frame which could queue up a whole bunch of saveFrames() calls and bring the sketch crashing down (though hopefully they thought of that and simply ignore saveFrames calls from within draw or limit it in some other way). The parameters it accepts suggest it's a one shot method - that means calling it from setup; or maybe from a separate event listener - e.g. a mouse click...

Nothing was saved. Or at least not in the folder of that sketch ...

What makes you think it should save the output in your sketch folder? This isn't Processing; it's running in a web page that might be loaded on a remote browser. Do you want those remote browsers getting access to the sketch folder on your server? [-X

I just tried adding it to setup and it worked as expected; though as predicted it invoked a save dialogue for every image generated. This might depend on your browser settings; but it's still really nasty...

@Xeronimo74 said:

And again: the reference should include a sample example of how this statement is to be used.

@blindfish said:

It's fair to say that p5js is still in development, as is the documentation...

Xeronimo74

Ok, thank you for those insights. I guess I'll stay with Processing for saving GIFs.