How to erase parts of a shape without drawing another

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) {
    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.



  • edited July 2017

    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.background(0, 0, 0, 0);
      pg.translate(100, 100);
      pg.ellipse(0, 0, 200, 200);
      pg.ellipse(-75, 0, 50, 50);
      pg.ellipse(-25, 0, 50, 50);
      pg.ellipse(25, 0, 50, 50);
      pg.ellipse(75, 0, 50, 50);
      PImage msk = pg.get();
      umb = get(0,0,200,100);
      background(100, 40, 150); // Purple
    void draw () {
    void mousePressed() {
      image(umb, mouseX-100, mouseY-100);

    Feel free to ask more questions about this!

Sign In or Register to comment.