[p5.js 2.0+ Bug Report]: WebGL rounded rectangles aren't round enough

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

All of them

Web browser and version

All

Operating system

All

Steps to reproduce this

Steps:

1. Draw a rect with the radius param, e.g. rect(0, 0, 100, 100, 50)

It's currently fine, but could be better. If you try to draw a 200x200 rectangle with a radius of 100, I'd expect it to be a circle, but it currently doesn't:

Meanwhile, with a more standard cubic bezier approximation, it looks like this:

Snippet:

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

function draw() {
  background(220);
  
  if (millis() % 2000 < 1000) {
    rectMode(CENTER)
    rect(0, 0, 200, 200, 100)
  } else {
    const x1 = -100
    const x2 = 100
    const y1 = -100
    const y2 = 100
    const r = 100

    const rr = 0.5523 // kappa: 4*(sqrt(2)-1)/3, handle ratio for cubic bezier circle approximation
    const offset = r * rr;
    bezierOrder(3);
    beginShape();
    vertex(x2 - r, y1);
    bezierVertex(x2 - r + offset, y1);
    bezierVertex(x2, y1 + r - offset);
    bezierVertex(x2, y1 + r);
    vertex(x2, y2 - r);
    bezierVertex(x2, y2 - r + offset);
    bezierVertex(x2 - r + offset, y2);
    bezierVertex(x2 - r, y2);
    vertex(x1 + r, y2);
    bezierVertex(x1 + r - offset, y2);
    bezierVertex(x1, y2 - r + offset);
    bezierVertex(x1, y2 - r);
    vertex(x1, y1 + r);
    bezierVertex(x1, y1 + r - offset);
    bezierVertex(x1 + r - offset, y1);
    bezierVertex(x1 + r, y1);

    endShape(CLOSE);
  }
}

[harshiltewari2004]

Hey @davepagurek can I work on this?

[davepagurek]

Hi! Sorry, I'd already assigned myself and made a PR for it here: #8743

[harshiltewari2004]

Thanks for the clearance @davepagurek . I will keep an eye on for more upcoming issues!