Merge pull request #9012 from harshiltewari2004/fix-saveframes-frame-count

Terminate saveFrames() capture by frame count instead of wall-clock d…

Author: davepagurek

src/image/image.js

@@ -640,22 +640,22 @@ function image(p5, fn) {
     const makeFrame = fn._makeFrame;
     const cnv = this._curElement.elt;
     let frames = [];
+    const totalFrames = (duration * fps) / 1000;
     const frameFactory = setInterval(() => {
       frames.push(makeFrame(fName + count, ext, cnv));
       count++;
-    }, 1000 / fps);
-
-    setTimeout(() => {
-      clearInterval(frameFactory);
-      if (callback) {
-        callback(frames);
-      } else {
-        for (const f of frames) {
-          fn.downloadFile(f.imageData, f.filename, f.ext);
+      if (count >= totalFrames) {
+        clearInterval(frameFactory);
+        if (callback) {
+          callback(frames);
+        } else {
+          for (const f of frames) {
+            fn.downloadFile(f.imageData, f.filename, f.ext);
+          }
         }
+        frames = [];
       }
-      frames = []; // clear frames
-    }, duration + 0.01);
+    }, 1000 / fps);
   };
 
   fn._makeFrame = function (filename, extension, _cnv) {

test/unit/image/downloading.js

@@ -160,6 +160,19 @@ suite('Downloading', () => {
       assert.typeOf(mockP5Prototype.saveFrames, 'function');
     });
 
+    test('should capture duration x frames', async () => {
+      return new Promise(resolve => {
+        // 0.4s x 7.93fps -> totalFrames = 3.172, so 4 frames are captured.
+        // Ticks land every 1000/7.93 = 126ms, so the old wall-clock cutoff at
+        // 400ms stopped after only 3.
+        mockP5Prototype.saveFrames('aaa', 'png', 0.4, 7.93, function cb1(arr) {
+          assert.typeOf(arr, 'array');
+          assert.equal(arr.length, 4);
+          resolve();
+        });
+      });
+    });
+
     test('should get frames in callback (png)', async () => {
       return new Promise(resolve => {
         mockP5Prototype.saveFrames('aaa', 'png', 0.5, 25, function cb1(arr) {