# Rounded corners rectangle in webGL?

Is it possible to draw a rectangle with rounded corners in webGL? When I try it squares it.

// setup
let canvas = createCanvas(400, 400, WEBGL);

// draw
rectMode(CENTER);
rect(30, 3, 100, 200, 20, 20, 20, 20);

make one?

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

function draw() {
background(220);
my_squircle(10,10,5);
}

//__________________________________________________________ SQUIRCLE
function my_squircle(r, wx, wy) {
let x1, y1;
beginShape();
stroke(180, 180, 180);
strokeWeight(5);
fill(190, 190, 190);
for (let t = 0; t < TWO_PI; t += TWO_PI/160) {          // 160 vertex points is too much
x1 = pow(abs(cos(t)), 0.5) * r*wx * sign(cos(t));
y1 = pow(abs(sin(t)), 0.5) * r*wy * sign(sin(t));
vertex(x1, y1);
}
endShape(CLOSE);
}

function sign( input) {
if (input < 0)  return -1.0;
if (input > 0)  return  1.0;
return 0.0;
}

``````

https://editor.p5js.org/kll/sketches/hjwW2pgaX

1 Like

not quite a rectangle, but very cool I found ways of doing it with a shader, but wondering if there is a 3D primitive or an easier way of doing building it?

1 Like

why not use lines and arcs…
and make it a little function