Ellipse mode CORNERS unexpected behaviour

[manstie]

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: Firefox 75.0 64-bit

• Operating System: Windows 10

• Steps to reproduce this bug:

  ellipseMode(CORNERS); ellipse(10, 10, -10, -10);

when x2 and y2 of an ellipse while in ellipseMode(CORNERS) causes the negative value to "bounce" off the negative (upper left) bounds of the canvas.

another example: ellipse(-10, -10, -10, -10) draws the same thing as ellipse(-10, -10, 10, 10)

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for reporting! I think your issue is a question about the p5.js library, rather than the web editor, so I'm going to move this ticket over there.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

If the second set of coordinates have magnitudes larger than or equal to the first set, it results in 0 or negative width and height value being passed to the native canvas ellipse() function, which doesn't accept negative values for those.

A more complicated modeAdjust() function may need to be implemented here.

[manstie]

You can pass something like ellipse(50, 50, 10, 10); and it will draw correctly, it is just when it passes into the negative bounds of the canvas.

[limzykenneth]

It isn't really reliant on it being out of the canvas, if the second set of coordinates are negative and their magnitude (absolute value) is larger than the first set of coordinates, they will not draw. The origin coordinate of the canvas can be translated so that the negative coordinate is in the canvas and the problem will still be there.

[manstie]

Here is a working example of the issue, when you click in the canvas and drag beyond the top left corner: https://editor.p5js.org/

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0);
  fill(255);
  ellipseMode(CORNERS);
  ellipse(x1, y1, x2, y2);
}

let x1 = 220;
let y1 = 220;
let x2 = 180;
let y2 = 180;

function mousePressed()
{
    if (mouseButton === LEFT)
    {
        x1 = mouseX;
        y1 = mouseY;
        x2 = mouseX;
        y2 = mouseY;
    }
}

function mouseDragged()
{
    if (mouseButton === LEFT)
    {
        x2 = mouseX;
        y2 = mouseY;
    }
}

function mouseReleased()
{
    if (mouseButton === LEFT)
    {
        x2 = mouseX;
        y2 = mouseY;
    }
}

[micuat]

I see. However, interestingly, when I copied the ellipse code to a draw function instead of calling ellipse, it works fine https://editor.p5js.org/micuat/sketches/8YZg3hoWD

and manually preparing x/y/w/h works too https://editor.p5js.org/micuat/sketches/EY64BRhjl

[micuat]

@manstie 's code exactly behaves like x2/y2 are absed like in this example https://editor.p5js.org/micuat/sketches/7pIHgznJk

[micuat]

of course. Because ellipse uses abs of w and h regardless of the ellipseMode. https://github.com/processing/p5.js/blob/main/src/core/shape/2d_primitives.js#L297

An elegant way may be to take the negative value condition into account in modeAdjust?