Add unit tests and improve set() handling for p5.Graphics

Author: VANSH3104

src/core/p5.Renderer2D.js

@@ -541,25 +541,17 @@ class Renderer2D extends Renderer {
     // round down to get integer numbers
     x = Math.floor(x);
     y = Math.floor(y);
-    if (imgOrCol instanceof Graphics) {
+    if (imgOrCol instanceof Graphics || imgOrCol instanceof Image) {
       this.drawingContext.save();
       this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
       this.drawingContext.scale(
         this._pixelDensity,
         this._pixelDensity
       );
-      this.drawingContext.drawImage(imgOrCol.canvas, x, y);
-      this.drawingContext.restore();
-    } else if (imgOrCol instanceof Image) {
-      this.drawingContext.save();
-      this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
-      this.drawingContext.scale(
-        this._pixelDensity,
-        this._pixelDensity
-      );
-      this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height);
-      this.drawingContext.drawImage(imgOrCol.canvas, x, y);
-      this.drawingContext.restore();
+      const width = imgOrCol.width;
+      const height = imgOrCol.height;
+      this.drawingContext.clearRect(x, y, width, height);
+      this.drawingContext.drawImage(imgOrCol.canvas, x, y, width, height);
     } else {
       let r = 0,
         g = 0,

test/unit/rendering/set-graphics.js

@@ -0,0 +1,78 @@
+import p5 from '../../../src/app.js';
+
+suite('set() with p5.Graphics', function() {
+  let myp5;
+
+  beforeEach(function() {
+    myp5 = new p5(function(p) {
+      p.setup = function() {
+        p.createCanvas(100, 100);
+        p.pixelDensity(1);
+      };
+    });
+  });
+
+  afterEach(function() {
+    myp5.remove();
+  });
+
+  test('set() works with p5.Graphics on main canvas', function() {
+    myp5.background(0, 255, 0);
+    const gfx = myp5.createGraphics(20, 20);
+    gfx.background(255, 0, 0);
+    myp5.set(10, 10, gfx);
+    myp5.updatePixels();
+    assert.deepEqual(myp5.get(15, 15), [255, 0, 0, 255]);
+    assert.deepEqual(myp5.get(5, 5), [0, 255, 0, 255]);
+  });
+
+  test('set() works with p5.Graphics on p5.Graphics', function() {
+    const mainGfx = myp5.createGraphics(100, 100);
+    mainGfx.background(255);
+    const smallGfx = myp5.createGraphics(20, 20);
+    smallGfx.background(0, 0, 255);
+    mainGfx.set(10, 10, smallGfx);
+    mainGfx.updatePixels();
+    myp5.image(mainGfx, 0, 0);
+    assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]);
+  });
+
+  test('set() clears area under p5.Graphics', function() {
+    myp5.background(255);
+    myp5.stroke(255, 0, 0);
+    myp5.strokeWeight(2);
+    for (let i = 0; i < 100; i += 10) {
+      myp5.line(i, 0, i, 100);
+    }
+    const gfx = myp5.createGraphics(40, 40);
+    gfx.background(0, 255, 0);
+    myp5.set(30, 30, gfx);
+    myp5.updatePixels();
+    assert.deepEqual(myp5.get(35, 35), [0, 255, 0, 255]);
+  });
+
+  test('set() works at edge (0,0)', function() {
+    myp5.background(255);
+    const gfx = myp5.createGraphics(30, 30);
+    gfx.background(0, 0, 255);
+    myp5.set(0, 0, gfx);
+    myp5.updatePixels();
+    assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]);
+    assert.deepEqual(myp5.get(35, 35), [255, 255, 255, 255]);
+  });
+
+  test('set() behaves same for p5.Graphics and p5.Image', function() {
+    const gfx = myp5.createGraphics(20, 20);
+    gfx.background(255, 0, 0);
+    const img = gfx.get();
+    myp5.background(255);
+    myp5.set(10, 10, gfx);
+    myp5.updatePixels();
+    const pixelFromGfx = myp5.get(15, 15);
+    myp5.background(255);
+    myp5.set(10, 10, img);
+    myp5.updatePixels();
+    const pixelFromImg = myp5.get(15, 15);
+    assert.deepEqual(pixelFromGfx, pixelFromImg);
+  });
+});