ellipseMode(CORNERS) with circle() does not draw a circle

[dipamsen]

trafficstars

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version:
• Web browser and version:
• Operating System:

Example Code

function setup() {
  createCanvas(100, 100);
  ellipseMode(CORNERS);
}

function draw() {
  background(220);
  circle(10, 30, 70);
}

Output

Reason

The p5.js circle() function passes on the arguments to ellipse(), by specifying the third arg twice.

So, circle(x, y, d) becomes ellipse(x, y, d, d)

With ellipseMode(CORNERS), the corners of the ellipse are specified as coords.

[limzykenneth]

Good find. I wonder in this case should circle simply bypass ellipseMode or does it need to calculate the corners manually? What happens when ellipseMode is CORNERS but only passed three arguments?

[soegaard]

Note that the Java version of Processing behaves in the same way - and that the docs for the Java version, doesn't explicitly describe what is supposed to happen.

[limzykenneth]

Parity with Processing is not a goal here so we can decide here what the behaviour should be.

[bryanidem]

Hi! @limzykenneth Using ellipse(10, 30, 70) i have the same result as circle(10, 30, 70). Also, yes as @dipamsen mentioned, it looks that the coordinates are used as width/height, and the diameter as the circle coordinates.

function setup() {
  createCanvas(100, 100);
  ellipseMode(CORNERS);
}

function draw() {
  background(220);
  circle(50, 50, 0); //drawing a circle of 50 by 50 with diameter=0
}

I got the same behaviour using Processing. Honestly, i feel that this is not very intuitive, and I am interested on working on this, if there is a chance :)

[dipamsen]

Well, there's no bug here, it works as intended. It is just not intuitive/useful the way it currently works.

In @BryanMed's example, circle(50, 50, 0) turns into ellipse(50, 50, 0, 0) which translates as "draw a ellipse with corner coords (50, 50) and (0, 0)"

Would a way to fix this be to ignore ellipseMode(CORNERS) just for circle()?

[awelles]

Would a way to fix this be to ignore ellipseMode(CORNERS) just for circle()?

If you want circle() to respond to CORNERS you could do something like this: Taking the third parameter in circle(a,b,c) as the x coordinate of the second corner calculate the fourth parameter to pass ellipse() so that your corners describe a square.

circle(x1, y, x2) should become ellipse(x1, y, x2, y + x2 - x1).

circle(10, 30, 70), for instance, would become ellipse(10, 30, 70, 90), staying nice and circley.

This is unintuitive, but if you're going to stay circular then either x2 or y2 has to be a dependent variable.

Ignoring ellipseMode(CORNERS) just for circle() might be a cleaner solution.