saveFrames for canvas with WEBGL renderer

pic

Hi, I tried to add saveFrames in setup() of the official sample code here, but it seems to take no effect. May I ask if it's not supported to save frames for WEBGL renderer? I don't see it in reference document. Thanks!

jeremydouglass

Are you using the p5.js saveFrames(), here?

• https://p5js.org/reference/#/p5/saveFrames

You said "it seems to take no effect." Which effect are you trying to create?

If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames.

What is the callback that you are using? Can you share brief example code?

pic

Hi Jeremy, yes I'm using saveFrames() without callback:

function setup(){ createCanvas(710, 400, WEBGL);

saveFrames("3D_", "png", 10, 1); }

draw() is the same as original sample program. The png files I got all seem to be blank. Thanks.

jeremydouglass

Ah, I just noticed in your original post:

I tried to add saveFrames in setup()

The png files I got all seem to be blank.

Setup runs first. It creates a canvas. Nothing has been drawn to the canvas.

You then run saveFrame in setup. Draw hasn't run yet. What will be in the frame? Nothing.

So you have to run saveFrame after draw has run at least once. You could run it at a particular time, or on a particular frame number, or in reaction to an event (e.g. keyPressed).

pic

I added below to save on mouse click:

function mousePressed() { saveFrames("3D_", "png", 1, 1); }

And I waited a while after all shapes started to rotate, before I clicked. Still I got an empty png.

Thanks again.

pic

I just found a comment a while ago that it's not supported by default. I tried to change preserveDrawingBuffer in p5.js from false to true, it doesn't display correctly but does save to png file: