# Rounded corners rectangle in webGL?

**URL:** <https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739>\
**Category:** p5.js\
**Created:** [November 23, 2019, 1:12pm UTC](https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739 "2019-11-23T13:12:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ishback](https://avatars.discourse-cdn.com/v4/letter/i/d9b06d/32.png) [@ishback](https://discourse.processing.org/u/ishback)\
**Post date:** [November 23, 2019, 1:12pm UTC](https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739/1 "2019-11-23T13:12:17Z")

</div>

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);  
rotateX(radians(-rotationX));  
rotateY(radians(rotationY));  
rect(30, 3, 100, 200, 20, 20, 20, 20);

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 23, 2019, 1:28pm UTC](https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739/2 "2019-11-23T13:28:43Z")

</div>

make one?

```auto
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](https://editor.p5js.org/kll/sketches/hjwW2pgaX)

---

<div class="post-metadata">

**Author:** ![ishback](https://avatars.discourse-cdn.com/v4/letter/i/d9b06d/32.png) [@ishback](https://discourse.processing.org/u/ishback)\
**Post date:** [November 24, 2019, 3:38pm UTC](https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739/3 "2019-11-24T15:38:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 24, 2019, 11:13pm UTC](https://discourse.processing.org/t/rounded-corners-rectangle-in-webgl/15739/4 "2019-11-24T23:13:35Z")

</div>

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

* * *

OOPS, is that correct?

in JAVA P3D a line with strokeWeight is a cylinder and can have even round ends…

in p5.js WEBGL  
a line with strokeWeight is a rectangle?  
( need some rotation or 3D view to see )  
looks poor.