# Oval with straight edges

**URL:** <https://discourse.processing.org/t/oval-with-straight-edges/32390>\
**Category:** Coding Questions\
**Created:** [September 23, 2021, 5:34am UTC](https://discourse.processing.org/t/oval-with-straight-edges/32390 "2021-09-23T05:34:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [September 23, 2021, 5:34am UTC](https://discourse.processing.org/t/oval-with-straight-edges/32390/1 "2021-09-23T05:34:20Z")

</div>

is there a way to create this shape

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b69405a324fb92dfccf04f27d3bd9bd662dc251a.jpeg)  
as a single thing instead of having an ellipse and a rect?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 23, 2021, 6:24am UTC](https://discourse.processing.org/t/oval-with-straight-edges/32390/2 "2021-09-23T06:24:18Z")

</div>

Yes. The rect() function has a secret, magic 5th argument it can take, which will round the corners.

```auto
size(600,600);
rect(10,10,200,100,50);

```

---

<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 23, 2021, 7:55am UTC](https://discourse.processing.org/t/oval-with-straight-edges/32390/3 "2021-09-23T07:55:29Z")

</div>

I advise you to go see this post though:

> [@Rect corner radius issue. Squircles!?](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924):
>
> 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?

The solution given by @TfGuy44 is good but the current implementation of the `rect()` function does not provide expected results.

In the post above, I propose this solution instead:

```auto
float f = 0.552284749831;

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

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:** ![Naison](https://avatars.discourse-cdn.com/v4/letter/n/3be4f8/32.png) [@Naison](https://discourse.processing.org/u/Naison)\
**Post date:** [September 25, 2021, 5:58pm UTC](https://discourse.processing.org/t/oval-with-straight-edges/32390/4 "2021-09-25T17:58:05Z")

</div>

You also can make this with a `line(x, y, sizeX, sizeY)` command:

```auto
void setup() {
  size(500, 500);
  background(20);
  
  noFill();
  stroke(200);
  strokeWeight(1);
}

void draw() {
  background(20);
  strokeWeight(height/10); //y-size of the button
  strokeCap(ROUND);
  line(100, 250, 400, 250);
}

```

The only “problem” is that this shape is filled and not only the outline border is shown.  
But this can be solved like this:

```auto
void setup() {
  size(500, 500);
  background(20);
  
  noFill();
  stroke(200);
  strokeWeight(1);
}

void draw() {
  background(20);
  strokeWeight(100); //y-size of the button
  strokeCap(ROUND);
  stroke(200);
  line(100, 250, 400, 250); //outline
  strokeWeight(98);
  stroke(20);
  line(101, 250, 399, 250); //inner line
}

```

Greetings 😉