Oval with straight edges

Processing Coding Questions
1

is there a way to create this shape

image
image1920Ă—1920 40.2 KB

as a single thing instead of having an ellipse and a rect?

2

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

size(600,600);
rect(10,10,200,100,50);
3 Likes
3

I advise you to go see this post though:

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:

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);
}
1 Like
4

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

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:

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 :wink: