q5 2.9.21 → 2.9.23

package/p5-tests/unit/image/downloading.js

@@ -0,0 +1,379 @@
+suite('downloading animated gifs', function() {
+  let myp5;
+  let myGif;
+
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        myp5 = p;
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
+
+  let imagePath = 'unit/assets/nyan_cat.gif';
+
+  setup(function disableFileLoadError() {
+    sinon.stub(p5, '_friendlyFileLoadError');
+  });
+
+  teardown(function restoreFileLoadError() {
+    p5._friendlyFileLoadError.restore();
+  });
+
+  setup(function loadMyGif(done) {
+    myp5.loadImage(imagePath, function(pImg) {
+      myGif = pImg;
+      done();
+    });
+  });
+
+  suite('p5.prototype.encodeAndDownloadGif', function() {
+    test('should be a function', function() {
+      assert.ok(myp5.encodeAndDownloadGif);
+      assert.typeOf(myp5.encodeAndDownloadGif, 'function');
+    });
+    test('should not throw an error', function() {
+      myp5.encodeAndDownloadGif(myGif);
+    });
+    testWithDownload('should download a gif', function(blobContainer) {
+      myp5.encodeAndDownloadGif(myGif);
+      let gifBlob = blobContainer.blob;
+      assert.strictEqual(gifBlob.type, 'image/gif');
+    });
+  });
+});
+
+suite('p5.prototype.saveCanvas', function() {
+  let myp5;
+  let myCanvas;
+
+  let waitForBlob = async function(blc) {
+    let sleep = function(ms) {
+      return new Promise(r => setTimeout(r, ms));
+    };
+    while (!blc.blob) {
+      await sleep(5);
+    }
+  };
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        myp5 = p;
+        myCanvas = p.createCanvas(20, 20);
+        p.background(255, 0, 0);
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
+
+  test('should be a function', function() {
+    assert.ok(myp5.saveCanvas);
+    assert.typeOf(myp5.saveCanvas, 'function');
+  });
+
+  // Why use testWithDownload for 'no friendly-err' tests here?
+  // saveCanvas uses htmlcanvas.toBlob which uses a callback
+  // mechanism and the download is triggered in its callback.
+  // It may happen that the test get out of sync and the only way
+  // to know if the callback has been called is if the blob has
+  // been made available to us
+  testWithDownload(
+    'no friendly-err-msg I',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas();
+        },
+        Error,
+        'got unwanted exception'
+      );
+      await waitForBlob(blc);
+    },
+    true
+  );
+  testWithDownload(
+    'no friendly-err-msg II',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas('filename');
+        },
+        Error,
+        'got unwanted exception'
+      );
+      await waitForBlob(blc);
+    },
+    true
+  );
+  testWithDownload(
+    'no friendly-err-msg III',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas('filename', 'png');
+        },
+        Error,
+        'got unwanted exception'
+      );
+      await waitForBlob(blc);
+    },
+    true
+  );
+  testWithDownload(
+    'no friendly-err-msg IV',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas(myCanvas, 'filename');
+        },
+        Error,
+        'got unwanted exception'
+      );
+      await waitForBlob(blc);
+    },
+    true
+  );
+  testWithDownload(
+    'no friendly-err-msg V',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas(myCanvas, 'filename', 'png');
+        },
+        Error,
+        'got unwanted exception'
+      );
+    },
+    true
+  );
+  testWithDownload(
+    'no friendly-err-msg VI',
+    async function(blc) {
+      assert.doesNotThrow(
+        function() {
+          myp5.saveCanvas(myCanvas, 'filename', 'png');
+        },
+        Error,
+        'got unwanted exception'
+      );
+      await waitForBlob(blc);
+    },
+    true
+  );
+
+  testUnMinified('wrong param type #0', function() {
+    assert.validationError(function() {
+      myp5.saveCanvas(5);
+    });
+  });
+
+  testUnMinified('wrong param type #1', function() {
+    assert.validationError(function() {
+      myp5.saveCanvas(myCanvas, 5);
+    });
+  });
+
+  testUnMinified('wrong param type #2', function() {
+    assert.validationError(function() {
+      myp5.saveCanvas(myCanvas, 'filename', 5);
+    });
+  });
+
+  testWithDownload(
+    'should download a png file',
+    async function(blobContainer) {
+      myp5.saveCanvas();
+      // since a function with callback is used in saveCanvas
+      // until the blob is made available to us.
+      await waitForBlob(blobContainer);
+      let myBlob = blobContainer.blob;
+      assert.strictEqual(myBlob.type, 'image/png');
+    },
+    true
+  );
+
+  testWithDownload(
+    'should download a jpg file I',
+    async function(blobContainer) {
+      myp5.saveCanvas('filename.jpg');
+      await waitForBlob(blobContainer);
+      let myBlob = blobContainer.blob;
+      assert.strictEqual(myBlob.type, 'image/jpeg');
+    },
+    true
+  );
+
+  testWithDownload(
+    'should download a jpg file II',
+    async function(blobContainer) {
+      myp5.saveCanvas('filename', 'jpg');
+      await waitForBlob(blobContainer);
+      let myBlob = blobContainer.blob;
+      assert.strictEqual(myBlob.type, 'image/jpeg');
+    },
+    true
+  );
+});
+
+suite('p5.prototype.saveFrames', function() {
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        myp5 = p;
+        p.createCanvas(10, 10);
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
+
+  test('should be a function', function() {
+    assert.ok(myp5.saveFrames);
+    assert.typeOf(myp5.saveFrames, 'function');
+  });
+
+  test('no friendly-err-msg I', function() {
+    assert.doesNotThrow(
+      function() {
+        myp5.saveFrames('out', 'png', 0.1, 25);
+      },
+      Error,
+      'got unwanted exception'
+    );
+  });
+  test('no friendly-err-msg II', function(done) {
+    assert.doesNotThrow(
+      function() {
+        myp5.saveFrames('out', 'png', 0.1, 25, () => {
+          done();
+        });
+      },
+      Error,
+      'got unwanted exception'
+    );
+  });
+
+  testUnMinified('missing param #2 #3', function() {
+    assert.validationError(function() {
+      myp5.saveFrames('out', 'png');
+    });
+  });
+  testUnMinified('wrong param type #0', function() {
+    assert.validationError(function() {
+      myp5.saveFrames(0, 'png', 0.1, 25);
+    });
+  });
+  testUnMinified('wrong param type #1', function() {
+    assert.validationError(function() {
+      myp5.saveFrames('out', 1, 0.1, 25);
+    });
+  });
+  testUnMinified('wrong param type #2', function() {
+    assert.validationError(function() {
+      myp5.saveFrames('out', 'png', 'a', 25);
+    });
+  });
+  testUnMinified('wrong param type #3', function() {
+    assert.validationError(function() {
+      myp5.saveFrames('out', 'png', 0.1, 'b');
+    });
+  });
+  testUnMinified('wrong param type #4', function() {
+    assert.validationError(function() {
+      myp5.saveFrames('out', 'png', 0.1, 25, 5);
+    });
+  });
+
+  test('should get frames in callback (png)', function(done) {
+    myp5.saveFrames('aaa', 'png', 0.5, 25, function cb1(arr) {
+      assert.typeOf(arr, 'array', 'we got an array');
+      for (let i = 0; i < arr.length; i++) {
+        assert.ok(arr[i].imageData);
+        assert.strictEqual(arr[i].ext, 'png');
+        assert.strictEqual(arr[i].filename, `aaa${i}`);
+      }
+      done();
+    });
+  });
+
+  test('should get frames in callback (jpg)', function(done) {
+    myp5.saveFrames('bbb', 'jpg', 0.5, 25, function cb2(arr2) {
+      assert.typeOf(arr2, 'array', 'we got an array');
+      for (let i = 0; i < arr2.length; i++) {
+        assert.ok(arr2[i].imageData);
+        assert.strictEqual(arr2[i].ext, 'jpg');
+        assert.strictEqual(arr2[i].filename, `bbb${i}`);
+      }
+      done();
+    });
+  });
+});
+
+suite('p5.prototype.saveGif', function() {
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        myp5 = p;
+        p.createCanvas(10, 10);
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
+
+  test('should be a function', function() {
+    assert.ok(myp5.saveGif);
+    assert.typeOf(myp5.saveGif, 'function');
+  });
+
+  test('should not throw an error', function() {
+    myp5.saveGif('myGif', 3);
+  });
+
+  test('should not throw an error', function() {
+    myp5.saveGif('myGif', 3, { delay: 2, frames: 'seconds' });
+  });
+
+  test('wrong parameter type #0', function(done) {
+    assert.validationError(function() {
+      myp5.saveGif(2, 2);
+      done();
+    });
+  });
+
+  test('wrong parameter type #1', function(done) {
+    assert.validationError(function() {
+      myp5.saveGif('mySketch', '2');
+      done();
+    });
+  });
+
+  test('wrong parameter type #2', function(done) {
+    assert.validationError(function() {
+      myp5.saveGif('mySketch', 2, 'delay');
+      done();
+    });
+  });
+
+  testWithDownload('should download a GIF', async function(blobContainer) {
+    myp5.saveGif(myGif, 3, 2);
+    await waitForBlob(blobContainer);
+    let gifBlob = blobContainer.blob;
+    assert.strictEqual(gifBlob.type, 'image/gif');
+  });
+});

package/p5-tests/unit/image/filters.js

@@ -0,0 +1,92 @@
+suite('Filters', function() {
+  var myp5;
+  let img;
+  setup(function(done) {
+    new p5(function(p) {
+      p.setup = function() {
+        myp5 = p;
+        myp5.createCanvas(10, 10);
+        img = myp5.createImage(10, 10);
+        myp5.pixelDensity(1);
+        img.loadPixels();
+        for (let i = 0; i < img.width; i++) {
+          for (let j = 0; j < img.height; j++) {
+            img.set(i, j, myp5.color(120, 20, 40));
+          }
+        }
+        img.updatePixels();
+        done();
+      };
+    });
+  });
+
+  teardown(function() {
+    myp5.remove();
+  });
+
+  test('threshold filter. less than threshold', function() {
+    img.filter(myp5.THRESHOLD);
+    myp5.image(img, 0, 0);
+    myp5.loadPixels();
+    for (let i = 0; i < img.width * img.height; i += 4) {
+      assert.strictEqual(myp5.pixels[i], 0);
+      assert.strictEqual(myp5.pixels[i + 1], 0);
+      assert.strictEqual(myp5.pixels[i + 2], 0);
+    }
+  });
+
+  test('threshold filter. greater than threshold', function() {
+    img.loadPixels();
+    for (let i = 0; i < img.width; i++) {
+      for (let j = 0; j < img.height; j++) {
+        img.set(i, j, myp5.color(211, 228, 250));
+      }
+    }
+    img.updatePixels();
+    img.filter(myp5.THRESHOLD);
+    myp5.image(img, 0, 0);
+    myp5.loadPixels();
+    for (let i = 0; i < img.width * img.height; i += 4) {
+      assert.strictEqual(myp5.pixels[i], 255);
+      assert.strictEqual(myp5.pixels[i + 1], 255);
+      assert.strictEqual(myp5.pixels[i + 2], 255);
+    }
+  });
+
+  test('gray filter', function() {
+    img.filter(myp5.GRAY);
+    myp5.image(img, 0, 0);
+    myp5.loadPixels();
+    for (let i = 0; i < img.width * img.height; i += 4) {
+      assert.strictEqual(myp5.pixels[i], myp5.pixels[i + 1]); // r, g, b values should be equal for gray
+      assert.strictEqual(myp5.pixels[i + 1], myp5.pixels[i + 2]);
+    }
+  });
+
+  test('opaque filter', function() {
+    img.loadPixels();
+    for (let i = 0; i < img.width; i++) {
+      for (let j = 0; j < img.height; j++) {
+        img.set(i, j, myp5.color(120, 20, 40, 10));
+      }
+    }
+    img.updatePixels();
+    img.filter(myp5.OPAQUE);
+    myp5.image(img, 0, 0);
+    myp5.loadPixels();
+    for (let i = 0; i < img.width * img.height; i += 4) {
+      assert.strictEqual(myp5.pixels[i + 3], 255); // 'a' value should be 255 after OPAQUE filter
+    }
+  });
+
+  test('invert filter', function() {
+    img.filter(myp5.INVERT);
+    myp5.image(img, 0, 0);
+    myp5.loadPixels();
+    for (let i = 0; i < img.width * img.height; i += 4) {
+      assert.strictEqual(myp5.pixels[i], 135);
+      assert.strictEqual(myp5.pixels[i + 1], 235);
+      assert.strictEqual(myp5.pixels[i + 2], 215);
+    }
+  });
+});