search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.65k stars 3.32k forks source link

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

Open dipamsen opened 3 years ago

dipamsen commented 3 years ago

Most appropriate sub-area of p5.js?

Details about the bug:

Example Code

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

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

Output

image

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.

image

limzykenneth commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

bryanidem commented 3 years ago

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
}

imagen

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 commented 3 years ago

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 commented 2 years ago

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.