# Rect corner radius issue. Squircles!?

**URL:** <https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924>\
**Category:** Coding Questions\
**Created:** [September 28, 2018, 4:37am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924 "2018-09-28T04:37:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![EliTheIceMan](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@EliTheIceMan](https://discourse.processing.org/u/EliTheIceMan)\
**Post date:** [September 28, 2018, 4:37am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/1 "2018-09-28T04:37:08Z")

</div>

I’m trying to make some buttons based on Tesla’s UI which has round and rounded rectangle buttons and found a weird issue. If you run rect(x, y, n, n, n/2); (in CORNER or CENTER mode) I would think you should get a circle because the corner radius is half of the w and h but you don’t. It’s more like a squircle. In CAD or vector software it would be a circle. What gives?

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [September 28, 2018, 5:08am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/2 "2018-09-28T05:08:49Z")

</div>

If you need an circle you can just use `ellipse(x,y,width,height);`.

---

<div class="post-metadata">

**Author:** ![EliTheIceMan](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@EliTheIceMan](https://discourse.processing.org/u/EliTheIceMan)\
**Post date:** [September 28, 2018, 5:29am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/3 "2018-09-28T05:29:55Z")

</div>

I’m trying to get a rectangle with rounded ends but if you if you use h/2 for the radius you get more of smushed ends that don’t look right. The issue is most evident though by trying to make a circle with rect.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 28, 2018, 6:02am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/4 "2018-09-28T06:02:08Z")

</div>

Hi EliTheiceMan,

Good question!

If you look at the way they draw rounded rectangle, they use `quadraticVertex()`:

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PGraphics.java#L2700-L2730>

So they are using bezier curves to draw the rounded edges. And the way they are using the bezier curves is by putting the control points on the corner of the rectangle like so:

![RoundedRect](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b5922f63031f61ce4db3c2955c8f311ff8019a68.png)

The thing is that you can’t draw a perfect circle with bezier curves so you’ll never get perfect circles with this method.

Although there might be a way to make it appears a bit more like a circle by putting the control point [in a very specific place](https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves).

---

<div class="post-metadata">

**Author:** ![EliTheIceMan](https://avatars.discourse-cdn.com/v4/letter/e/d26b3c/32.png) [@EliTheIceMan](https://discourse.processing.org/u/EliTheIceMan)\
**Post date:** [September 28, 2018, 6:19am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/5 "2018-09-28T06:19:31Z")

</div>

Thank you, that is very interesting! Looks like I need to do more research on Bezier math sometime but I will just deal with my Bezier buttons for now! It’s only a minor detail but was really bugging me!

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 28, 2018, 8:17am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/6 "2018-09-28T08:17:19Z")

</div>

Now you can also create your own rectangle function.

Here an example. I did it quikly to demonstrate that you can have the behavior that you expect but you would need to put a bit more work into it to prevent users to put too high value in the rounding parameters and to create several version to match the behavior of the standard `rect()`.

```auto
float f = 0.552284749831;

void setup() {
  size(500, 500);
  background(20);
  
  noFill();
  stroke(200);
  strokeWeight(1);
  myRect(100, 100, 300, 300, 150, 150, 150, 150);
}

void myRect(float x1, float y1, float lx, float ly, float tl, float tr, float br, float bl) {
  float x2 = x1 + lx;
  float y2 = y1 + ly;

  beginShape();
  if (tr != 0) {
    vertex(x2 - tr, y1);
    bezierVertex(x2 - tr + f * tr, y1, x2, y1 + tr - f * tr, x2, y1 + tr);
  } else {
    vertex(x2, y1);
  }
  if (br != 0) {
    vertex(x2, y2-br);
    bezierVertex(x2, y2 - br + f * br, x2 - br + f * br, y2, x2 - br, y2);
  } else {
    vertex(x2, y2);
  }
  if (bl != 0) {
    vertex(x1+bl, y2);
    bezierVertex(x1 + bl - f * bl, y2, x1, y2 - bl + f * bl, x1, y2 - bl);
  } else {
    vertex(x1, y2);
  }
  if (tl != 0) {
    vertex(x1, y1+tl);
    bezierVertex(x1, y1 + tl - f * tl, x1 + tl - f * tl, y1, x1 + tl, y1);
  } else {
    vertex(x1, y1);
  }
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 28, 2018, 8:58am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/7 "2018-09-28T08:58:28Z")

</div>

For the record I opened a new issue on github:

> <https://github.com/processing/processing/issues/5663>

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 29, 2018, 12:57am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/8 "2018-09-29T00:57:54Z")

</div>

+1 for “squircle”. Very evocative.

@jb4x walks through a great approach to rolling your own rounding parameters – if you are interested in different approaches to morphing between a circle and a square then you should also check out the “Morph” example from the Processing example set.

[https://processing.org/examples/morph.html](https://processing.org/examples/morph.html)

That example gives a point-based shape that you can animate between a square state and a circle state.

---

<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:** [September 29, 2018, 4:20am UTC](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924/9 "2018-09-29T04:20:08Z")

</div>

> [@jeremydouglass](#):
>
> +1 for “squircle”. Very evocative.

[wiki](https://en.wikipedia.org/wiki/Squircle)

a test with LINEs and ARCs show a issue about the fill, thats tricky.

```auto
void my_rounded_rect_using_arcs(float x0,float y0,float wx,float wy,float r,float strokeW) {
  ellipseMode(CENTER);
  strokeWeight(strokeW);
  line(x0+r,y0,x0+wx-r,y0); arc(x0+wx-r,y0+r,2*r,2*r,TWO_PI-HALF_PI,TWO_PI);
  line(x0+wx,y0+r,x0+wx,y0+wy-r); arc(x0+wx-r,y0+wy-r,2*r,2*r,0,HALF_PI);
  line(x0+r,y0+wy,x0+wx-r,y0+wy); arc(x0+r,y0+wy-r,2*r,2*r,PI-HALF_PI,PI);
  line(x0,y0+r,x0,y0+wy-r); arc(x0+r,y0+r,2*r,2*r,PI,PI+HALF_PI);
  //fill the area between the lines
  noStroke();
  rect(x0+r,y0+strokeW/2,wx-2*r,wy-strokeW+1); rect(x0+strokeW/2,y0+r,wx-strokeW+1,wy-2*r);

}

```

and a real SQUIRCLE

```auto
// Squircle is a special case of a superellipse
// https://en.wikipedia.org/wiki/Squircle
// ( x − a )**4 + ( y − b )**4 = r**4
// x ( t ) = | cos t | 1/2 * r * sgn( cos t ) 
// y ( t ) = | sin t | 1/2 * r * sgn( sin t )
// code by Dan Anderson

void setup() {
  size(300, 300);
  background(200, 200, 0);
  stroke(0, 200, 200); 
  strokeWeight(3); 
  fill(0, 100, 0);
}

void my_squircle(float r,float wx,float wy) {
  float x1, y1;  
  beginShape();
  for (float t = 0; t < TWO_PI; t += TWO_PI/160) {
    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);
}

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

void draw() {
  background(200, 200, 0);
  translate(width/2, height/2);
  my_squircle(mouseX/2.0,1.0,float(mouseY)/float(height));
}

```