q5 2.10.7 → 2.11.0

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

@@ -1,413 +0,0 @@
-/**
- * Expects an image file and a p5 instance with an image file loaded and drawn
- * and checks that they are exactly the same. Sends result to the callback.
- */
-var testImageRender = function(file, sketch) {
-  sketch.loadPixels();
-  var p = sketch.pixels;
-  var ctx = sketch;
-
-  sketch.clear();
-
-  return new Promise(function(resolve, reject) {
-    sketch.loadImage(file, resolve, reject);
-  }).then(function(img) {
-    ctx.image(img, 0, 0);
-
-    ctx.loadPixels();
-    var n = 0;
-    for (var i = 0; i < p.length; i++) {
-      var diff = Math.abs(p[i] - ctx.pixels[i]);
-      n += diff;
-    }
-    var same = n === 0 && ctx.pixels.length === p.length;
-    return same;
-  });
-};
-
-suite('loading images', function() {
-  var myp5;
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        myp5 = p;
-        done();
-      };
-
-      // Make sure draw() exists so timing functions still run each frame
-      // and we can test gif animation
-      p.draw = function() {};
-    });
-  });
-
-  teardown(function() {
-    myp5.remove();
-  });
-
-  var imagePath = 'unit/assets/cat.jpg';
-
-  setup(function disableFileLoadError() {
-    sinon.stub(p5, '_friendlyFileLoadError');
-  });
-
-  teardown(function restoreFileLoadError() {
-    p5._friendlyFileLoadError.restore();
-  });
-
-  test('should call successCallback when image loads', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage(imagePath, resolve, reject);
-    }).then(function(pImg) {
-      assert.ok(pImg, 'cat.jpg loaded');
-      assert.isTrue(pImg instanceof p5.Image);
-    });
-  });
-
-  test('should call failureCallback when unable to load image', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage(
-        'invalid path',
-        function(pImg) {
-          reject('Entered success callback.');
-        },
-        resolve
-      );
-    }).then(function(event) {
-      assert.equal(event.type, 'error');
-      assert.isTrue(p5._friendlyFileLoadError.called);
-    });
-  });
-
-  test('should draw image with defaults', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/cat.jpg', resolve, reject);
-    }).then(function(img) {
-      myp5.image(img, 0, 0);
-      return testImageRender('unit/assets/cat.jpg', myp5).then(function(res) {
-        assert.isTrue(res);
-      });
-    });
-  });
-
-  test('static image should not have gifProperties', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/cat.jpg', resolve, reject);
-    }).then(function(img) {
-      assert.isTrue(img.gifProperties === null);
-    });
-  });
-
-  test('single frame GIF should not have gifProperties', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/target_small.gif', resolve, reject);
-    }).then(function(img) {
-      assert.isTrue(img.gifProperties === null);
-    });
-  });
-
-  test('first frame of GIF should be painted after load', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/white_black.gif', resolve, reject);
-    }).then(function(img) {
-      assert.deepEqual(img.get(0, 0), [255, 255, 255, 255]);
-    });
-  });
-
-  test('animated gifs animate correctly', function() {
-    const wait = function(ms) {
-      return new Promise(function(resolve) {
-        setTimeout(resolve, ms);
-      });
-    };
-    let img;
-    return new Promise(function(resolve, reject) {
-      img = myp5.loadImage('unit/assets/nyan_cat.gif', resolve, reject);
-    }).then(function() {
-      assert.equal(img.gifProperties.displayIndex, 0);
-      myp5.image(img, 0, 0);
-
-      // This gif has frames that are around for 100ms each.
-      // After 100ms has elapsed, the display index should
-      // increment when we draw the image.
-      return wait(100);
-    }).then(function() {
-      return new Promise(function(resolve) {
-        window.requestAnimationFrame(resolve);
-      });
-    }).then(function() {
-      myp5.image(img, 0, 0);
-      assert.equal(img.gifProperties.displayIndex, 1);
-    });
-  });
-
-  var backgroundColor = [135, 206, 235, 255];
-  var blue = [0, 0, 255, 255];
-  var transparent = [0, 0, 0, 0];
-  test('animated gifs work with no disposal', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/dispose_none.gif', resolve, reject);
-    }).then(function(img) {
-      // Frame 0 shows the background
-      assert.deepEqual(img.get(7, 12), backgroundColor);
-      // Frame 1 draws on top of the background
-      img.setFrame(1);
-      assert.deepEqual(img.get(7, 12), blue);
-      // Frame 2 does not erase untouched parts of frame 2
-      img.setFrame(2);
-      assert.deepEqual(img.get(7, 12), blue);
-    });
-  });
-
-  test('animated gifs work with background disposal', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/dispose_background.gif', resolve, reject);
-    }).then(function(img) {
-      // Frame 0 shows the background
-      assert.deepEqual(img.get(7, 12), backgroundColor);
-      // Frame 1 draws on top of the background
-      img.setFrame(1);
-      assert.deepEqual(img.get(7, 12), blue);
-      // Frame 2 erases the content added in frame 2
-      img.setFrame(2);
-      assert.deepEqual(img.get(7, 12), transparent);
-    });
-  });
-
-  test('animated gifs work with previous disposal', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/dispose_previous.gif', resolve, reject);
-    }).then(function(img) {
-      // Frame 0 shows the background
-      assert.deepEqual(img.get(7, 12), backgroundColor);
-      // Frame 1 draws on top of the background
-      img.setFrame(1);
-      assert.deepEqual(img.get(7, 12), blue);
-      // Frame 2 returns the content added in frame 2 to its previous value
-      img.setFrame(2);
-      assert.deepEqual(img.get(7, 12), backgroundColor);
-    });
-  });
-
-  /* TODO: make this resilient to platform differences in image resizing.
-  test('should draw cropped image', function() {
-    return new Promise(function(resolve, reject) {
-      myp5.loadImage('unit/assets/target.gif', resolve, reject);
-    }).then(function(img) {
-      myp5.image(img, 0, 0, 6, 6, 5, 5, 6, 6);
-      return testImageRender('unit/assets/target_small.gif', myp5).then(
-        function(res) {
-          assert.isTrue(res);
-        }
-      );
-    });
-  });
-  */
-
-  // Test loading image in preload() with success callback
-  test('Test in preload() with success callback');
-  test('Test in setup() after preload()');
-  // These tests don't work correctly (You can't use suite and test like that)
-  // they simply get added at the root level.
-  var mySketch = function(this_p5) {
-    var myImage;
-    this_p5.preload = function() {
-      suite('Test in preload() with success callback', function() {
-        test('Load asynchronously and use success callback', function(done) {
-          myImage = this_p5.loadImage('unit/assets/cat.jpg', function() {
-            assert.ok(myImage);
-            done();
-          });
-        });
-      });
-    };
-
-    this_p5.setup = function() {
-      suite('setup() after preload() with success callback', function() {
-        test('should be loaded if preload() finished', function(done) {
-          assert.isTrue(myImage instanceof p5.Image);
-          assert.isTrue(myImage.width > 0 && myImage.height > 0);
-          done();
-        });
-      });
-    };
-  };
-  new p5(mySketch, null, false);
-
-  // Test loading image in preload() without success callback
-  mySketch = function(this_p5) {
-    var myImage;
-    this_p5.preload = function() {
-      myImage = this_p5.loadImage('unit/assets/cat.jpg');
-    };
-
-    this_p5.setup = function() {
-      suite('setup() after preload() without success callback', function() {
-        test('should be loaded now preload() finished', function(done) {
-          assert.isTrue(myImage instanceof p5.Image);
-          assert.isTrue(myImage.width > 0 && myImage.height > 0);
-          done();
-        });
-      });
-    };
-  };
-  new p5(mySketch, null, false);
-});
-
-suite('displaying images', function() {
-  var myp5;
-  var pImg;
-  var imagePath = 'unit/assets/cat-with-hole.png';
-  var chanNames = ['red', 'green', 'blue', 'alpha'];
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        myp5 = p;
-        myp5.pixelDensity(1);
-        myp5.loadImage(
-          imagePath,
-          function(img) {
-            pImg = img;
-            myp5.resizeCanvas(pImg.width, pImg.height);
-            done();
-          },
-          function() {
-            throw new Error('Error loading image');
-          }
-        );
-      };
-    });
-  });
-
-  teardown(function() {
-    myp5.remove();
-  });
-
-  function checkTint(tintColor) {
-    myp5.loadPixels();
-    pImg.loadPixels();
-    for (var i = 0; i < myp5.pixels.length; i += 4) {
-      var x = (i / 4) % myp5.width;
-      var y = Math.floor(i / 4 / myp5.width);
-      for (var chan = 0; chan < tintColor.length; chan++) {
-        var inAlpha = 1;
-        var outAlpha = 1;
-        if (chan < 3) {
-          // The background of the canvas is black, so after applying the
-          // image's own alpha + the tint alpha to its color channels, we
-          // should arrive at the same color that we see on the canvas.
-          inAlpha = tintColor[3] / 255;
-          outAlpha = pImg.pixels[i + 3] / 255;
-
-          // Applying the tint involves un-multiplying the alpha of the source
-          // image, which causes a bit of loss of precision. I'm allowing a
-          // loss of 10 / 255 in this test.
-          assert.approximately(
-            myp5.pixels[i + chan],
-            pImg.pixels[i + chan] *
-              (tintColor[chan] / 255) *
-              outAlpha *
-              inAlpha,
-            10,
-            'Tint output for the ' +
-              chanNames[chan] +
-              ' channel of pixel (' +
-              x +
-              ', ' +
-              y +
-              ') should be equivalent to multiplying the image value by tint fraction'
-          );
-        }
-      }
-    }
-  }
-
-  test('tint() with color', function() {
-    assert.ok(pImg, 'image loaded');
-    var tintColor = [150, 100, 50, 255];
-    myp5.clear();
-    myp5.background(0);
-    myp5.tint(tintColor[0], tintColor[1], tintColor[2], tintColor[3]);
-    myp5.image(pImg, 0, 0);
-
-    checkTint(tintColor);
-  });
-
-  test('tint() with alpha', function() {
-    assert.ok(pImg, 'image loaded');
-    var tintColor = [255, 255, 255, 100];
-    myp5.clear();
-    myp5.background(0);
-    myp5.tint(tintColor[0], tintColor[1], tintColor[2], tintColor[3]);
-    myp5.image(pImg, 0, 0);
-
-    checkTint(tintColor);
-  });
-
-  test('tint() with color and alpha', function() {
-    assert.ok(pImg, 'image loaded');
-    var tintColor = [255, 100, 50, 100];
-    myp5.clear();
-    myp5.background(0);
-    myp5.tint(tintColor[0], tintColor[1], tintColor[2], tintColor[3]);
-    myp5.image(pImg, 0, 0);
-
-    checkTint(tintColor);
-  });
-});
-
-suite('displaying images that use fit mode', function() {
-  var myp5;
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        myp5 = p;
-        done();
-      };
-    });
-  });
-
-  teardown(function() {
-    myp5.remove();
-  });
-
-  test('CONTAIN when source image is larger than destination', function() {
-    let src = myp5.createImage(400, 1000);
-    sinon.spy(myp5._renderer, 'image');
-    myp5.image(src, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.CONTAIN);
-    assert(myp5._renderer.image.calledOnce);
-    assert.equal(myp5._renderer.image.getCall(0).args[7], 400 / (1000 / 400)); //  dw
-    assert.equal(myp5._renderer.image.getCall(0).args[8], 1000 / (1000 / 400)); // dh
-  });
-
-  test('CONTAIN when source image is smaller than destination', function() {
-    let src = myp5.createImage(40, 90);
-    sinon.spy(myp5._renderer, 'image');
-    myp5.image(src, 0, 0, 300, 500, 0, 0, 400, 1000, myp5.CONTAIN);
-    assert(myp5._renderer.image.calledOnce);
-    assert.equal(myp5._renderer.image.getCall(0).args[7], 40 / (90 / 500)); //  dw
-    assert.equal(myp5._renderer.image.getCall(0).args[8], 90 / (90 / 500)); // dh
-  });
-
-  test('COVER when source image is larger than destination', function() {
-    let src = myp5.createImage(400, 1000);
-    sinon.spy(myp5._renderer, 'image');
-    myp5.image(src, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.COVER);
-    const r = Math.max(300 / 400, 400 / 1000);
-    assert(myp5._renderer.image.calledOnce);
-    assert.equal(myp5._renderer.image.getCall(0).args[3], 300 / r); //  sw
-    assert.equal(myp5._renderer.image.getCall(0).args[4], 400 / r); // sh
-  });
-
-  test('COVER when source image is smaller than destination', function() {
-    let src = myp5.createImage(20, 100);
-    sinon.spy(myp5._renderer, 'image');
-    myp5.image(src, 0, 0, 300, 400, 0, 0, 20, 100, myp5.COVER);
-    const r = Math.max(300 / 20, 400 / 100);
-    assert(myp5._renderer.image.calledOnce);
-    assert.equal(myp5._renderer.image.getCall(0).args[3], 300 / r); //  sw
-    assert.equal(myp5._renderer.image.getCall(0).args[4], 400 / r); // sh
-  });
-});

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

@@ -1,201 +0,0 @@
-suite('p5.Image', function() {
-  var myp5;
-
-  setup(function(done) {
-    new p5(function(p) {
-      p.setup = function() {
-        myp5 = p;
-        done();
-      };
-    });
-  });
-
-  teardown(function() {
-    myp5.remove();
-  });
-
-  suite('p5.prototype.createImage', function() {
-    test('it creates an image', function() {
-      let img = myp5.createImage(10, 17);
-      assert.isObject(img);
-    });
-  });
-
-  suite('p5.Image', function() {
-    test('it has necessary properties', function() {
-      let img = new p5.Image(100, 100);
-      assert.property(img, 'width');
-      assert.property(img, 'height');
-      assert.property(img, 'canvas');
-      assert.property(img, 'loadPixels');
-      assert.property(img, 'pixels');
-      assert.property(img, 'updatePixels');
-    });
-
-    test('height and width are correct', function() {
-      let img = new p5.Image(100, 100);
-      myp5.pixelDensity(1);
-      assert.strictEqual(img.width, 100);
-      assert.strictEqual(img.height, 100);
-    });
-  });
-
-  suite('p5.Image.prototype.resize', function() {
-    test('it should resize the image', function() {
-      let img = myp5.createImage(10, 17);
-      myp5.pixelDensity(1);
-      img.resize(10, 30);
-      assert.strictEqual(img.width, 10);
-      assert.strictEqual(img.height, 30);
-    });
-  });
-
-  suite('p5.Image.prototype.mask', function() {
-    for (const density of [1, 2]) {
-      test(`it should mask the image at pixel density ${density}`, function() {
-        let img = myp5.createImage(10, 10);
-        img.pixelDensity(density);
-        img.loadPixels();
-        for (let i = 0; i < img.height; i++) {
-          for (let j = 0; j < img.width; j++) {
-            let alpha = i < 5 ? 255 : 0;
-            img.set(i, j, myp5.color(0, 0, 0, alpha));
-          }
-        }
-        img.updatePixels();
-
-        let mask = myp5.createImage(10, 10);
-        mask.pixelDensity(density);
-        mask.loadPixels();
-        for (let i = 0; i < mask.width; i++) {
-          for (let j = 0; j < mask.height; j++) {
-            let alpha = j < 5 ? 255 : 0;
-            mask.set(i, j, myp5.color(0, 0, 0, alpha));
-          }
-        }
-        mask.updatePixels();
-
-        img.mask(mask);
-        img.loadPixels();
-        for (let i = 0; i < img.width; i++) {
-          for (let j = 0; j < img.height; j++) {
-            let alpha = i < 5 && j < 5 ? 255 : 0;
-            assert.strictEqual(img.get(i, j)[3], alpha);
-          }
-        }
-      });
-    }
-
-    test('it should mask images of different density', function() {
-      let img = myp5.createImage(10, 10);
-      img.pixelDensity(1);
-      img.loadPixels();
-      for (let i = 0; i < img.height; i++) {
-        for (let j = 0; j < img.width; j++) {
-          let alpha = i < 5 ? 255 : 0;
-          img.set(i, j, myp5.color(0, 0, 0, alpha));
-        }
-      }
-      img.updatePixels();
-
-      let mask = myp5.createImage(20, 20);
-      mask.loadPixels();
-      for (let i = 0; i < mask.width; i++) {
-        for (let j = 0; j < mask.height; j++) {
-          let alpha = j < 10 ? 255 : 0;
-          mask.set(i, j, myp5.color(0, 0, 0, alpha));
-        }
-      }
-      mask.updatePixels();
-      mask.pixelDensity(2);
-
-      img.mask(mask);
-      img.loadPixels();
-      for (let i = 0; i < img.width; i++) {
-        for (let j = 0; j < img.height; j++) {
-          let alpha = i < 5 && j < 5 ? 255 : 0;
-          assert.strictEqual(img.get(i, j)[3], alpha);
-        }
-      }
-    });
-
-    test('it should mask images from createGraphics', function() {
-      myp5.createCanvas(10,10);
-      myp5.pixelDensity(2);
-      let img = myp5.createGraphics(10,10);
-      img.noStroke();
-      img.rect(0,0,10,10);
-      let mask = myp5.createGraphics(10,10);
-      mask.noStroke();
-      mask.rect(0,0,5,5);
-      let masked = img.get();
-      masked.mask(mask.get());
-
-      for (let i = 0; i < masked.width; i++) {
-        for (let j = 0; j < masked.height; j++) {
-          let alpha = i < 5 && j < 5 ? 255 : 0;
-          assert.strictEqual(masked.get(i, j)[3], alpha);
-        }
-      }
-    });
-
-    test('it should mask the animated gif image', function() {
-      const imagePath = 'unit/assets/nyan_cat.gif';
-      return new Promise(function(resolve, reject) {
-        myp5.loadImage(imagePath, resolve, reject);
-      }).then(function(img) {
-        let mask = myp5.createImage(img.width, img.height);
-        mask.loadPixels();
-        for (let i = 0; i < mask.width; i++) {
-          for (let j = 0; j < mask.height; j++) {
-            const alpha = j < img.height / 2 ? 255 : 0;
-            mask.set(i, j, myp5.color(0, 0, 0, alpha));
-          }
-        }
-        mask.updatePixels();
-
-        img.mask(mask);
-        img.loadPixels();
-        for (let i = 0; i < img.width; i++) {
-          for (let j = 0; j < img.height; j++) {
-            const alpha = j < img.height / 2 ? 255 : 0;
-            assert.strictEqual(img.get(i, j)[3], alpha);
-          }
-        }
-        for (
-          frameIndex = 0;
-          frameIndex < img.gifProperties.numFrames;
-          frameIndex++
-        ) {
-          const frameData = img.gifProperties.frames[frameIndex].image.data;
-          for (let i = 0; i < img.width; i++) {
-            for (let j = 0; j < img.height; j++) {
-              const index = 4 * (i + j * img.width) + 3;
-              const alpha = j < img.height / 2 ? 255 : 0;
-              assert.strictEqual(frameData[index], alpha);
-            }
-          }
-        }
-      });
-    });
-  });
-
-  suite('p5.Graphics.get()', function() {
-    for (const density of [1, 2]) {
-      test(`width and height match at pixel density ${density}`, function() {
-        const g = myp5.createGraphics(10, 10);
-        g.pixelDensity(density);
-        g.rect(2, 2, 5, 5);
-
-        const img = g.get();
-        assert.equal(g.width, img.width);
-        assert.equal(g.height, img.height);
-        assert.equal(g.pixelDensity(), img.pixelDensity());
-
-        g.loadPixels();
-        img.loadPixels();
-        assert.deepEqual([...g.pixels], [...img.pixels]);
-      });
-    }
-  });
-});