How to erase parts of a shape without drawing another

puzzletree

Hello! I am new to Processing. I wanted to try and draw (the top of) an umbrella when you click. My first idea was to just remove parts of a big circle to make it look like an umbrella from the side. The code of that is down below.

I was wondering though if there is a way I can, instead of drawing over the circle, just remove parts of it so I am not actually drawing anything in those areas.

void setup () {
  size(500, 500);
  background(100, 40, 150);
}
void draw () {
  if (mousePressed) {
    stroke(#85FCA1);
    fill(#85FCA1);
    ellipse(mouseX, mouseY, 200, 200);
    fill(100, 40, 150);
    stroke(100, 40, 150);
    rect(mouseX-100, mouseY, 200, 100);
    ellipse(mouseX-75, mouseY, 50, 50);
    ellipse(mouseX-25, mouseY, 50, 50);
    ellipse(mouseX+25, mouseY, 50, 50);
    ellipse(mouseX+75, mouseY, 50, 50);
  }
}

Here is the result of that code, the one on the bottom was drawn first and the one on top was drawn second. I would like to be able to only draw the green part of that when I click so I am not drawing on top of the other.

Thank you in advance.

TfGuy44

Your approach was good. Top marks for a beginner. Well done on posting your code, a sample image, the problem, your issues, and formatting your code properly.

Alas, a solution for your problem relies on some more advanced techniques. Specifically, you will need to use a mask. Here is a working example, look it over, check out the reference for mask(), and see if you can understand how this works:

PImage umb;

void setup () {
  size(500, 500);
  background(#85FCA1); // Green
  PGraphics pg = createGraphics(200, 100);
  pg.beginDraw();
  pg.background(0, 0, 0, 0);
  pg.translate(100, 100);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(0, 0, 200, 200);
  pg.fill(0);
  pg.ellipse(-75, 0, 50, 50);
  pg.ellipse(-25, 0, 50, 50);
  pg.ellipse(25, 0, 50, 50);
  pg.ellipse(75, 0, 50, 50);
  pg.endDraw();
  PImage msk = pg.get();
  umb = get(0,0,200,100);
  umb.mask(msk);
  background(100, 40, 150); // Purple
}

void draw () {
}

void mousePressed() {
  image(umb, mouseX-100, mouseY-100);
}

Feel free to ask more questions about this!