processing · davepagurek · Oct 20, 2024 · Sep 26, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git a/src/core/helpers.js b/src/core/helpers.js
@@ -4,16 +4,47 @@
 
 import * as constants from './constants';
 
+/*
+  This function normalizes the first four arguments given to rect, ellipse and arc
+  according to the mode.
+  It returns a 'bounding box' object containing the coordinates of the upper left corner (x, y),
+  and width and height (w, h). The returned width and height are always positive.
+*/
 function modeAdjust(a, b, c, d, mode) {
+  let bbox;
+
   if (mode === constants.CORNER) {
-    return { x: a, y: b, w: c, h: d };
+
+    // CORNER mode already corresponds to a bounding box (top-left corner, width, height)
+    bbox = { x: a, y: b, w: c, h: d };
+
   } else if (mode === constants.CORNERS) {
-    return { x: a, y: b, w: c - a, h: d - b };
+
+    // 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 };
+
   } else if (mode === constants.RADIUS) {
-    return { x: a - c, y: b - d, w: 2 * c, h: 2 * d };
+
+    // 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 };
+
   } else if (mode === constants.CENTER) {
-    return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d };
+
+    // 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 };
+
   }
+
+  // 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;
 }
 
 export default { modeAdjust };
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
@@ -327,10 +327,6 @@ p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
   start = this._toRadians(start);
   stop = this._toRadians(stop);
 
-  // p5 supports negative width and heights for ellipses
-  w = Math.abs(w);
-  h = Math.abs(h);
-
   const vals = canvas.modeAdjust(x, y, w, h, this._renderer._ellipseMode);
   const angles = this._normalizeArcAngles(start, stop, vals.w, vals.h, true);
 
@@ -547,16 +543,9 @@ p5.prototype._renderEllipse = function(x, y, w, h, detailX) {
     return this;
   }
 
-  // p5 supports negative width and heights for rects
-  if (w < 0) {
-    w = Math.abs(w);
-  }
-
+  // Duplicate 3rd argument if only 3 given.
   if (typeof h === 'undefined') {
-    // Duplicate 3rd argument if only 3 given.
     h = w;
-  } else if (h < 0) {
-    h = Math.abs(h);
   }
 
   const vals = canvas.modeAdjust(x, y, w, h, this._renderer._ellipseMode);

diff --git a/test/shape-modes.html b/test/shape-modes.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html  lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+</head>
+<body>
+  <script src="../lib/p5.js"></script>
+
+  <script>
+    function setup() {
+      createCanvas(600, 900);
+      noFill();
+      noLoop();
+    }
+
+    const SHAPES = [ 'ellipse', 'arc', 'rect' ];
+    const MODES = [ 'corners', 'corner', 'center', 'radius' ];
+    let SHAPE = 'ellipse';
+    let MODE = 'corners';
+    let num = 1;
+
+    function nextSetting() {
+        let modeIdx = MODES.indexOf(MODE);
+        let shapeIdx = SHAPES.indexOf(SHAPE);
+        modeIdx++;
+        if (modeIdx >= MODES.length) {
+            modeIdx = 0;
+            shapeIdx++;
+            if (shapeIdx >= SHAPES.length) {
+                shapeIdx = 0;
+            }
+        }
+        SHAPE = SHAPES[shapeIdx];
+        MODE = MODES[modeIdx];
+        num = (shapeIdx * MODES.length + modeIdx) + 1;
+        redraw();
+    }
+
+    function keyPressed() {
+        nextSetting();
+    }
+
+    function mousePressed() {
+        nextSetting();
+    }
+
+    function ellipseCorners(x1, y1, x2, y2) {
+      // Bounding box (light gray)
+      rectMode(CORNERS);
+      stroke(200);
+      noFill();
+      strokeWeight(1);
+      rect(x1, y1, x2, y2);
+
+      // Adjust coordinates for testing modes other than CORNERS
+      if (MODE == CORNER) {
+        let x = min(x1, x2);  // x
+        let y = min(y1, y2);  // y
+        // Don't use abs on w and h, so we get negative values as well
+        let w = x2 - x1; // w
+        let h = y2 - y1; // h
+        x1 = x; y1 = y; x2 = w; y2 = h;
+      } else if (MODE == CENTER) {
+        let x = (x2 + x1) / 2; // x
+        let y = (y2 + y1) / 2; // y
+        // Don't use abs on w and h, so we get negative values as well
+        let w = x2 - x1;
+        let h = y2 - y1;
+        x1 = x; y1 = y; x2 = w; y2 = h;
+      } else if (MODE == RADIUS) {
+        let x = (x2 + x1) / 2; // x
+        let y = (y2 + y1) / 2; // y
+        // Don't use abs on w and h, so we get negative values as well
+        let r1 = (x2 - x1) / 2; // r1;
+        let r2 = (y2 - y1) / 2; // r2
+        x1 = x; y1 = y; x2 = r1; y2 = r2;
+      }
+
+
+      // P1, P2 dots
+      stroke(150);
+      strokeWeight(4);
+      point(x1, y1);
+      if (MODE === CORNERS) {
+        point(x2, y2);
+      }
+
+      // P1, P2 text labels
+      fill(150);
+      noStroke();
+      text('P1', x1 + 5, y1);
+      if (MODE === CORNERS) {
+        text('P2', x2 + 5, y2);
+      }
+
+
+      // Shape
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      ellipseMode(MODE);
+      rectMode(MODE);
+
+      try {
+        console.log(`Drawing (${x1}, ${y1}, ${x2}, ${y2})`);
+        if (SHAPE === 'ellipse') {
+            ellipse(x1, y1, x2, y2);
+        } else if (SHAPE === 'arc') {
+            const GAP = 0.1;
+            arc(x1, y1, x2, y2, 0 + GAP/2, HALF_PI - GAP);
+            arc(x1, y1, x2, y2, HALF_PI + GAP, PI - GAP);
+            arc(x1, y1, x2, y2, PI + GAP, PI + HALF_PI - GAP);
+            arc(x1, y1, x2, y2, PI + HALF_PI + GAP, TWO_PI - GAP);
+        } else if (SHAPE === 'rect') {
+            rect(x1, y1, x2, y2);
+        }
+      } catch (e) {
+        console.warn(`Error drawing (${x1}, ${y1}, ${x2}, ${y2})`);
+        console.error(e);
+      }
+    }
+
+
+    function draw() {
+      background(220);
+      translate(width/2, height/2);
+
+      // Coordinate System
+      stroke(200);
+      line(-width/2, 0, width/2, 0);
+      line(0, -height/2, 0, height/2);
+      stroke(0);
+
+      // Shape + Mode Text Labels
+      fill(0);
+      noStroke();
+      const counterLabel = `(${num}/${SHAPES.length * MODES.length})`;
+      text(counterLabel, 5, 15);
+      text(SHAPE, 5, 30);
+      text(MODE.toUpperCase(), 5, 45);
+
+      console.log(counterLabel);
+      console.log("Shape: ", SHAPE);
+      console.log("Mode:  ", MODE);
+
+
+      // Quadrant I (Bottom Right)
+      console.log("(I) BOTTOM RIGHT");
+      ellipseCorners(100, 50, 200, 100);  // OK
+      ellipseCorners(100, 200, 200, 150); // Error
+      ellipseCorners(200, 300, 100, 250); // Error
+      ellipseCorners(200, 350, 100, 400); // Error
+
+
+      // Quadrant II (Bottom Left)
+      console.log();
+      console.log("(II) BOTTOM LEFT");
+      ellipseCorners(-200, 50, -100, 100);  // Wrong ellipse
+      ellipseCorners(-200, 200, -100, 150); // Error
+      ellipseCorners(-100, 300, -200, 250); // Error
+      ellipseCorners(-100, 350, -200, 400); // Wrong ellipse
+
+
+      // Quadrant III (Top Left)
+      console.log();
+      console.log("(III) TOP LEFT");
+      ellipseCorners(-200, -400, -100, -350); // Wrong ellipse
+      ellipseCorners(-200, -250, -100, -300); // Wrong ellipse
+      ellipseCorners(-100, -150, -200, -200); // Wrong ellipse
+      ellipseCorners(-100, -100, -200, -50);  // Wrong ellipse
+
+
+      // Quadrant IV (Top Right)
+      console.log();
+      console.log("(IV) TOP RIGHT");
+      ellipseCorners(100, -400, 200, -350); // Wrong ellipse
+      ellipseCorners(100, -250, 200, -300); // Wrong ellipse
+      ellipseCorners(200, -150, 100, -200); // Error
+      ellipseCorners(200, -100, 100, -50);  // Error
+    }
+  </script>
+</body>
+</html>