# Masking - I want to get rid of the outside of the circle

**URL:** <https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [July 24, 2021, 9:40pm UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428 "2021-07-24T21:40:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jih](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jih](https://discourse.processing.org/u/jih)\
**Post date:** [July 24, 2021, 9:40pm UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428/1 "2021-07-24T21:40:23Z")

</div>

Hello, I’m studying masking.  
I want to get rid of the outside of the circle. (background color is gray)  
I tried BeginContour, but I failed.  
Thank you

```auto

int barWidth = 10;
int lastBar = -1;
int r ;

void setup(){
  size(200,200);
background(143);
  colorMode(HSB, height, height, height);  
  noStroke();

}

void draw(){
  
  pushMatrix();
  
  translate(width/2,height/2);
  beginShape();
  
  for (float a=0; a<TWO_PI ; a+=0.01){
    r=50;
    float x = r*cos(a);
    float y = r*sin(a);
    vertex(x,y); 
  }

  beginContour();
  for(float a=0; a<TWO_PI ; a+=0.01){
    r=50;
    float x = r*cos(a);
    float y = r*sin(a);
    vertex(y,x);}
  endContour();
    endShape();
    
 
    
    
    popMatrix();

  
    int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth; 
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
 
 
  }
  
 
  }

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 24, 2021, 10:26pm UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428/2 "2021-07-24T22:26:22Z")

</div>

Hello,

One way is using mask() with images:  
[https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)

Here is a simple template from the references:

```auto
// Masking
// v1.0.0
// GLV 2021-07-24

PGraphics pg1;
PImage img1;

void setup() 
  {
  size(330, 280);
  img1 = loadImage("frog.png");
  pg1 = createGraphics(330, 280); 
  }

void draw() 
  {
  background(0);

  pg1.beginDraw();
  //Your code for the mask goes here
  pg1.endDraw();
  
  img1.mask(pg1);
  
  image(img1, 0, 0);
  }

```

You will need to draw a circle with an alpha for transparency in your mask image.  
I used a picture for img1 but this could also be another PGraphic for your bars.

This is the result (circle moved with mouse):

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cd21ed92dff1bb1bb2ee57fd6f61c4cdc7fb6e4b.png)

I provided some references here:  
[https://discourse.processing.org/t/i-want-to-masking/31382/2](https://discourse.processing.org/t/i-want-to-masking/31382/2)  
See the UPDATE.

You will have to do some work with PGraphics to understand this approach.

I was also able to do this with this example:  
[https://processing.org/examples/brightness.html](https://processing.org/examples/brightness.html)  
You asked about this in another topic.

You already had two topics that are related to this that were _homework_.  
I tagged this topic as _homework_.

You have a lot of blank lines in your posted code; these could be cleaned up to make code more readable for the community.

The rest is up to you.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![jih](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jih](https://discourse.processing.org/u/jih)\
**Post date:** [July 25, 2021, 12:10am UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428/3 "2021-07-25T00:10:53Z")

</div>

Thank you for your hard work.  
Separately, When I first asked a question, I was alerted to put up a homework category.  
I read a guide, but I’m confused about the “home work category”.  
Thank you…!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 25, 2021, 1:22am UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428/4 "2021-07-25T01:22:51Z")

</div>

Hello,

> [@jih](#):
>
> I’m confused about the “home work category”.

The homework policy is here:  
[https://discourse.processing.org/faq#homework](https://discourse.processing.org/faq#homework)

Your method will work but you have some errors.

Take a good look at the reference:  
[https://processing.org/reference/beginContour\_.html](https://processing.org/reference/beginContour_.html)

Your exterior and interior shape are the same size.

> [@jih](#):
>
> I want to get rid of the outside of the circle.

Change the size of your exterior shape.  
Think about what size you want it to be.

My exterior shape covers the entire sketch window:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/596439509e7204a5a228e146855797bf3feb5fae.png)

You must also consider the order you are drawing; you can easily move things around to see what happens.

I displayed my image and overlaid a shape (with a window in it) on top of my image in that order.

I have never used beginContour() / endContour() and was able to make it work after reading the reference. Thanks for enlightening me!

I now have 3 methods to “mask” in my repertoire:

- mask() method
- pixel manipulation
- shapes with beginContour()/endContour();
- Shaders is next!

> [@jih](#):
>
> I tried BeginContour, but I failed.

You have not yet succeeded… as opposed to failed.

Keep working on it and you will succeed!

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 25, 2021, 2:08pm UTC](https://discourse.processing.org/t/masking-i-want-to-get-rid-of-the-outside-of-the-circle/31428/5 "2021-07-25T14:08:00Z")

</div>

> [@glv](#):
>
> I now have 3 methods to “mask” in my repertoire:
> 
> - mask() method
> - pixel manipulation
> - shapes with beginContour()/endContour();
> - Shaders is next!

Hello,

You inspired me to explore this with your topics!

It took time, effort, research, patience and [perseverance](https://www.merriam-webster.com/dictionary/perseverance) but I got there.

I also have experience which helped and that is something that is gained over time.

[Perseverance](https://www.merriam-webster.com/dictionary/perseverance) is defined as:

> continued effort to do or achieve something despite difficulties, failure, or opposition

Keep working on it!

Your code works with a few tweaks:

1. Make the outer shape a bit larger than inner shape.
2. Move the bars code to the start of draw()
3. Add color to the shape.

And voila!  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6dd2f1dab8a0a9cd3946098f3444a6ac159ddcfb.png)

`:)`