Search code examples
javascriptprocessingp5.js

p5.js ellipse and rect behavior

I'm confused by the way p5 treats location say this...

If I put down:

ellipse(10,10,20);
rect(10, 10, 20, someNumber);

Then the shapes are misaligned! WHY!?

Solution

  • The alignment of the ellipse depends on the ellipseMode() and the alignment of the rectangle depends on the rectMode(). While the default rectangle mode is CORNER, the default ellipse mode is CENTER. Use the same mode for both shapes:

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

function draw() {
    background(255);
    noFill();
    ellipseMode(CENTER);
    rectMode(CENTER);
    ellipse(50, 50, 90);
    rect(50, 50, 90, 90);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>