Rectangle does not show corner radius in WEBGL mode

[PhilAndrew]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• 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: latest at editor.p5js.org website
• Web browser and version: Chrome 87.0.4280.141 (Official Build) (64-bit) (cohort: Stable)
• Operating System: Windows
• Steps to reproduce this:

Paste this code into the editor at https://editor.p5js.org/ and remove the WEBGL parameter and see the difference. The rectangle should have curved corners. The rectangles position is not relevant to this bug.

function setup() {
  // Create the canvas
  createCanvas(720, 400, WEBGL);
  background(200);

  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(0, 120, 120, 40, 40, 1, 5, 1);
  
}

[welcome]

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.

[stalgiag]

Thanks for filing this with a clear example @PhilAndrew! This isn't a bug so much as an unimplemented feature. It would take a significant amount of work to get this functionality as both the fill and stroke geometry would need to be made differently. Anyone interested in tackling this is very welcome.

In the short term, a console warning could be useful when arguments are passed for corner radius.

[aferriss]

Is the extra difficulty it in setting this up due to having to generate additional verts for a rounded shape? I wonder if a way to do this without having to change the render pipeline would be to just write a rounded corner shader? Something like this:
https://www.shadertoy.com/view/4llXD7

Definitely a little hacky but it could be an option.

[stalgiag]

@aferriss thanks for the suggestion! Yeah, I assumed we would add more verts for the rounding since that is what is done in Processing's OpenGL mode (if I remember correctly) but something like this would probably work well.

I am just swamped with other projects at the moment so I can't do much more for p5 than respond to issues and fix bugs that I may have personally made 😅. If anyone wants to take a look at rounding the corners of the fill and stroke geometry with a shader, this would be a welcome addition!

[aferriss]

@stalgiag No worries at all! I just wasn't sure if this was a valid way of implementing this feature since it feels little bit hacky to me. I went ahead and wrote a tiny shader that does rounded corners so if someone has the time and initiative it shouldn't be too much work to drop this in.

https://www.shadertoy.com/view/ttKcDD

@stalgiag I wanna work on it

@stalgiag shall you explain it more what feature should I have to add and how can I open editor of p5.js in local copy to know change that i made is working or not

[stalgiag]

Hi @JohnMusk -- even with @aferriss 's example shader, this might be a bit of a difficult issue to tackle in your first time contributing to the codebase unless you have some experience with WebGL and GLSL.

Whether you decide to continue working on this issue or keep an eye out for a smaller issue with a label like 'good-first-issue' or 'level:beginner', you can use the contributor's docs to get a sense of how to contribute to the project. This section, in particular, will be of use to you. The 'Contributing Code' section also has a lot of information that is relevant to the questions you asked.

But just in short, I typically do not use the web editor when working on the codebase. The web editor is a separate project and building it requires a bit of setup. One could theoretically upload the version of p5 that they build locally to the web editor to check to see if your changes worked but this would be a very slow and difficult development process.

Instead, I recommend that you run a local server and test your changes in the empty example. But there are more steps so definitely take the time to read the contributors docs linked above.

@stalgiag I can't understand the code man help me please

[aferriss]

I did a little digging into this (I know it took a year, sorry). And I think it will be pretty simple to implement using the vertex and quadratic vertex functions, which is how desktop processing does it. I just copied their implementation to JS and it seems to work pretty well.

One issue is that it does not generate any uv's by default, so we will need to do something to figure that out. Since uv's can't be passed to quadraticVertex(), I'm not quite sure what to do there.

2nd, the strokes around the corners get pretty funky at larger widths. It looks ok when it's small (like 5 and under), but beyond that shows artifacts. I think this will only be solved once we overhaul the webGL stroke renderer.

Lastly, it would be ideal if we could cache the geometry, so it doesn't need to be made each frame, as we do with rects and other retained mode geo. Since vertex is only in immediate mode, we would need to implement it without using vertex / quadratic vertex if we wish to retain the geo.

Here's a sketch for posterity: https://editor.p5js.org/aferriss/sketches/fNtG6hhpN