# What's the equation for a rectircle? (Perfect rounded-corner rectangle without stretching on only one dim)

The equation for a rounded square seems to be: $x^4 + y^4 = 1$

You can make the radii smaller by increasing (over the even integers) the exponents in the equation.

Here's a picture: Wolfram Alpha squircle.

If you try to make a rectangle out of it by simply throwing in constant scalars: $(x/a)^4 + (x/b)^4 = 1$

You do get a more typical rectangular shape: naively rectangularized squircle

However the round corners seemed to be stretched on the $x$-axis and non-stretched on the $y$-axis. In other words it doesn't look like a typical rounded rectangle composed by rounding (with a circle, non-stretched on either dim) a rectangle: Google search: rounded rectangle.

So I'm wondering how you'd modify the squircle equation to get flat tops, flat sides, except circles on the corners - not circles stretched on one dimension.

What I've tried: adding terms to the equation and looking at the produced image on Wolfram alpha.

Any idea how to make a perfect rounded rectangle with an equation?

• I've thought about this problem for a long time, and I don't think there is a simple equation for that. You can approximate any shape by increasing the number of terms, but you won't get a rectangle with perfectly rounded corners – Yuriy S Feb 10 '16 at 21:57
• @YuriyS well an approximation is good enough for 2D graphics. So what's the approximation - how do you derive it? – EnjoysMath Feb 10 '16 at 21:58
• I got really close with $(x/5)^{16} + y^4 = 1$: wolframalpha.com/input/?i=(x%2F5)%5E16+%2B+y%5E4+%3D+1 – EnjoysMath Feb 10 '16 at 22:03
• well, if it works for you, then you answered your own question. Of course, your method looks good only for a certain proportion between the sides of the rectangle - it's better to find an equation that will work in any case including a square – Yuriy S Feb 10 '16 at 22:10
• @YuriyS you can take absolute value of the $x, y$ variables and use any exponent then. – EnjoysMath Feb 10 '16 at 22:11

A rounded rectangle of size $2a\times2b$ with rounding radius $r$ is given by $$f(x;a,r) + f(y;b,r) = 1$$ where $$f(x;a,r)=\begin{cases}\left(\frac{|x|-(a-r)}r\right)^2&\text{if |x|\ge a-r,}\\0&\text{otherwise.}\end{cases}$$ You want to approximate this with some function of the form $(|x|/a)^p$. Compare derivatives at $x=a$ and you get $p=2a/r$. So a "rectircle" of size $2a\times2b$ with rounding radius $r$ is given by $$\left(\frac{|x|}a\right)^{2a/r} + \left(\frac{|y|}b\right)^{2b/r}=1.$$

• Wow, that's really nice! I will try both equations in D code and have both options available, Rectircle andRoundedRect. – EnjoysMath Feb 10 '16 at 23:20
• Can you do wolfram or mathematica on your rounded rect formula and post a picture? I've seen rectircles already. Rectircles have that nice apple GUI look & feel, but I might want pure rounded rects. – EnjoysMath Feb 10 '16 at 23:21
• Surely you already know what a rounded rectangle looks like. – user856 Feb 10 '16 at 23:24
• Thanks! You're an amazing mathematician and artiste! – EnjoysMath Feb 10 '16 at 23:25

This is a very interesting question, and the answer to it comes from a simple observation of the following figure. If I am thinking correctly, the correct equation to your wanted rectangle is not unique, because it can be made more accurate by better constants. However for a rough idea, just try to think of this.

The shape of the curve x^2+y^2=1, it is a circle, centred at origin, of radius 1. Basically what we have here is an idea of a metric or a distance function ||A,B|| as the distance between two points A and B, and on one dimension we simply define it as |a-b| where a and b are the coordinates of A and B on the real line.

Similarly we have in two dimensions, the distance between two points of coordinates (x,y) and (p,q) as ((x-y)^2+(p-q)^2)^1/2.

So similarly we can define the equation of a circle as (x^2+y^2)^1/2=|1|, and note that this also gives the shape of the circle only. Now we look at the equation (x^4+y^4)^1/4=|1|. Obviously such a curve would be symmetrical about x axis as well as y axis. Now we observe that such a curve passes through points on the axis as marked in the figure. Also it should be in the region of the green dot, or in the region of the red dot. Now it is quite easy to observe that the curve will pass through the red dot, because here both |x|,|y| <1 and for a particular x if 0 < x < 1, x > x^2 > x^3 >...

and for 0 < x,y < 1 if x < y, then x^k

In short as we increase n in (x^n+y^n)^1/n=1 where n is an integer, the curve bulges out from the form of the circle towards the square. And as you can expect as you increase n large enough, the curve will approach the shape of the square. Now for any n, large enough you can adjust the curvature of the edges as much as you want.

However I have only exemplified for a square and it can be modified by taking an ellipse with major axes a and b, and a rectangle of the length a and width b. In that case, x-> x/a and y->y/b will give the similar result. In fact you can even get a rounded rectangle as pointed out by yourself, in the comments but this is also a way in which you can get it. Hope you got it.

This is all visually based so no proof here. But currently I have, given approximate corner radius $r$ and width $w$, height $h$, let $\alpha = w/2$, $\beta = h/2$, the the equation for a nice-enough looking rounded-corner rectangle, aka a rectircle, is:

$$|\dfrac{x}{\alpha}|^{2\alpha/r} + |\dfrac{y}{\beta}|^{2\beta/r} = 1 \\ \alpha, \beta, r \gt 0$$

The $\alpha, \beta$ in the exponent seems to get rid of the stretching I was talking about.

Here's a sample: rectircle 1

And with half that approximate corner radius: rectircle 2

• Okay, so since you have given a particular curvature now to the curves here I think you can find a definite equation to the rectangle now. – user260674 Feb 10 '16 at 22:55