Hi guys! I'm having a newbie question. I'm writing a little sketch where I want to show pop-ups. I'd like them to be like a square box with round corners. I tried to draw them by using four ellipses for the corners and three rectangles for filling the rest of the body. As long as I draw them in a solid color, everything goes fine. The thing is that I would like to draw them fading in and out, and here it comes the problem. Since I'm applying alpha for getting such effect, the overlapped areas - i.e. intersections between the shapes that compose the pop-up box - become darker.
So what I'm looking for is some way to draw ONLY quarter of a circle, so no area will overlap and therefore the fade in/out effect will work fine.
I tried with beginShape/endShape, but it didn't behave as I expected. I've also tried to use bezier curves and so, but I have to admit that it's a bit overwhelming for me. Moreover I've tried to find examples around the internet, but no luck.
So I'd really appreciate if someone could help me out with this.
Here I put the example code of the shape I want to get in the end. When I fill the shapes with color, I put an alpha value so you can see the problem I'm talking about.
Thanks for your help in advance!

/F

Code:

int CORNER_RADIUS = 20;
int sizeX = 300;
int sizeY = 200;
int posX = 20;
int posY = 20;

void setup(){

  size(600,400);
  background(255);
  smooth();
  noStroke();
  
  
  // SWITCH COMMENTS HERE FOR DESIRED OUTCOME
  fill(color(72,72,72), 100);
  //fill(color(72,72,72));
  
  // Central section
  rect(this.posX, this.posY + this.CORNER_RADIUS, this.sizeX, this.sizeY-2*this.CORNER_RADIUS);

  // Upper rect
  rect(this.posX + this.CORNER_RADIUS, this.posY, this.sizeX-2*this.CORNER_RADIUS, this.CORNER_RADIUS);
  // Bottom rect
  rect(this.posX + this.CORNER_RADIUS, this.posY + this.sizeY - this.CORNER_RADIUS, this.sizeX-2*this.CORNER_RADIUS, this.CORNER_RADIUS);

  // Left top corner
  ellipse(this.posX + this.CORNER_RADIUS, this.posY + this.CORNER_RADIUS, this.CORNER_RADIUS*2, this.CORNER_RADIUS*2);
  // Right top corner
  ellipse(this.posX + this.sizeX - this.CORNER_RADIUS, this.posY + this.CORNER_RADIUS, this.CORNER_RADIUS*2, this.CORNER_RADIUS*2);
  // Left bottom corner
  ellipse(this.posX + this.CORNER_RADIUS, this.posY + this.sizeY - this.CORNER_RADIUS, this.CORNER_RADIUS*2, this.CORNER_RADIUS*2);
  // Right bottom corner
  ellipse(this.posX + this.sizeX - this.CORNER_RADIUS, this.posY + this.sizeY - this.CORNER_RADIUS, this.CORNER_RADIUS*2, this.CORNER_RADIUS*2);

}

 

Thank you very much. That was what I was looking for!

/F