Negative dimensions will flip shapes again

Only applicable to shape mode `CORNER`
Fixes #7353

Author: martinleopold

src/core/helpers.js

@@ -15,35 +15,58 @@ function modeAdjust(a, b, c, d, mode) {
 
   if (mode === constants.CORNER) {
 
-    // CORNER mode already corresponds to a bounding box (top-left corner, width, height)
-    bbox = { x: a, y: b, w: c, h: d };
+    // CORNER mode already corresponds to a bounding box (top-left corner, width, height).
+    // Negative dimensions (width and/or height) result in 'flipping' the shape.
+    if (c < 0) { c = -c; a -= c;  } // Negative width: Move shape to the left (flip left)
+    if (d < 0) { d = -d; b -= d;  } // Negative height: Move shape up (flip up)
+    bbox = {
+      x: a,
+      y: b,
+      w: c,
+      h: d
+    };
 
   } else if (mode === constants.CORNERS) {
 
     // CORNERS mode uses two opposite corners, in any configuration.
     // Make sure to get the top left corner by using the minimum of the x and y coordniates.
-    bbox = { x: Math.min(a, c), y: Math.min(b, d), w: c - a, h: d - b };
+    bbox = {
+      x: Math.min(a, c),
+      y: Math.min(b, d),
+      w: Math.abs(c - a),
+      h: Math.abs(d - b)
+    };
 
   } else if (mode === constants.RADIUS) {
 
     // RADIUS mode uses the center point and half the width and height.
     // c (half width) and d (half height) could be negative, so use the absolute value
     // in calculating the top left corner (x, y).
-    bbox = { x: a - Math.abs(c), y: b - Math.abs(d), w: 2 * c, h: 2 * d };
+    c = Math.abs(c);
+    d = Math.abs(d);
+    bbox = {
+      x: a - c,
+      y: b - d,
+      w: 2 * c,
+      h: 2 * d
+    };
 
   } else if (mode === constants.CENTER) {
 
     // CENTER mode uses the center point, width and height.
     // c (width) and d (height) could be negative, so use the absolute value
-    // in calculating the top-left corner (x,y).
-    bbox = { x: a - Math.abs(c * 0.5), y: b - Math.abs(d * 0.5), w: c, h: d };
+    // in calculating the top-left corner (x, y).
+    c = Math.abs(c);
+    d = Math.abs(d);
+    bbox = {
+      x: a - (c * 0.5),
+      y: b - (d * 0.5),
+      w: c,
+      h: d
+    };
 
   }
 
-  // p5 supports negative width and heights for rectangles, ellipses and arcs
-  bbox.w = Math.abs(bbox.w);
-  bbox.h = Math.abs(bbox.h);
-
   return bbox;
 }
 

test/unit/visual/cases/shape_modes.js

@@ -17,6 +17,10 @@ function shapeCorners(p5, shape, mode, x1, y1, x2, y2) {
     // Don't use abs(), so we get negative values as well
     let w = x2 - x1; // w
     let h = y2 - y1; // h
+    // With mode CORNER, negative widths/heights result in mirrored/flipped shapes
+    // In this case, adjust position so the shape is in line with the other cases
+    if (w < 0) { x += (-w); } // Move right
+    if (h < 0) { y += (-h); } // Move down
     x1 = x; y1 = y; x2 = w; y2 = h;
   } else if (mode === p5.CENTER) {
     // Find center
@@ -56,14 +60,15 @@ function shapeCorners(p5, shape, mode, x1, y1, x2, y2) {
 }
 
 
-/*
-  Comprehensive test for rendering ellipse(), arc(), and rect()
-  with the different ellipseMode() / rectMode() values: CORNERS, CORNER, CENTER, RADIUS.
-  Each of the 3 shapes is tested with each of the 4 possible modes, resulting in 12 test.
-  Each test renders the shape in 16 different coordinate configurations,
-  testing combinations of positive and negative coordinate values.
-*/
 visualSuite('Shape Modes', function(...args) {
+  /*
+    Comprehensive test for rendering ellipse(), arc(), and rect()
+    with the different ellipseMode() / rectMode() values: CORNERS, CORNER, CENTER, RADIUS.
+    Each of the 3 shapes is tested with each of the 4 possible modes, resulting in 12 tests.
+    Each test renders the shape in 16 different coordinate configurations,
+    testing combinations of positive and negative coordinate values.
+  */
+
   // Shapes to test
   const SHAPES = [ 'ellipse', 'arc', 'rect' ];
 
@@ -113,6 +118,55 @@ visualSuite('Shape Modes', function(...args) {
         }); // End of: visualTest
       } // End of: MODES loop
 
-    }); // End of: Inner visualSuite
+    }); // End of: visualSuite
   } // End of: SHAPES loop
-}); // End of: Outer visualSuite
+
+
+  /*
+    An extra test suite specific to shape mode CORNER and negative dimensions.
+    Negative width should result in the shape flipped horizontally (to the left).
+    Negative height should result in the shape flipped vertically (up).
+  */
+  visualSuite('Negative dimensions', function() {
+    visualTest('rect', function(p5, screenshot) {
+      p5.createCanvas(50, 50);
+      p5.translate(p5.width/2, p5.height/2);
+      p5.rectMode(p5.CORNER);
+      p5.rect(0, 0,  20,  10);
+      p5.fill('red');
+      p5.rect(0, 0, -20,  10);
+      p5.fill('green');
+      p5.rect(0, 0,  20, -10);
+      p5.fill('blue');
+      p5.rect(0, 0, -20, -10);
+      screenshot();
+    });
+    visualTest('ellipse', function(p5, screenshot) {
+      p5.createCanvas(50, 50);
+      p5.translate(p5.width/2, p5.height/2);
+      p5.ellipseMode(p5.CORNER);
+      p5.ellipse(0, 0,  20,  10);
+      p5.fill('red');
+      p5.ellipse(0, 0, -20,  10);
+      p5.fill('green');
+      p5.ellipse(0, 0,  20, -10);
+      p5.fill('blue');
+      p5.ellipse(0, 0, -20, -10);
+      screenshot();
+    });
+    visualTest('arc', function(p5, screenshot) {
+      p5.createCanvas(50, 50);
+      p5.translate(p5.width/2, p5.height/2);
+      p5.ellipseMode(p5.CORNER);
+      p5.arc(0, 0,  20,  10, 0, p5.PI + p5.HALF_PI);
+      p5.fill('red');
+      p5.arc(0, 0, -20,  10, 0, p5.PI + p5.HALF_PI);
+      p5.fill('green');
+      p5.arc(0, 0,  20, -10, 0, p5.PI + p5.HALF_PI);
+      p5.fill('blue');
+      p5.arc(0, 0, -20, -10, 0, p5.PI + p5.HALF_PI);
+      screenshot();
+    });
+  });
+
+});

test/unit/visual/screenshots/Shape Modes/Negative dimensions/arc/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Shape Modes/Negative dimensions/arc/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/Shape Modes/Negative dimensions/ellipse/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}