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

Processing Coding Questions
1

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


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;
 
 
  }
  
 
  }
2

Hello,

One way is using mask() with images:
https://processing.org/reference/PImage_mask_.html

Here is a simple template from the references:

// 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

I provided some references here:
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
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!

:)

3

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…!

4

Hello,

The homework policy is here:
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

Your exterior and interior shape are the same size.

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

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!

You have not yet succeeded… as opposed to failed.

Keep working on it and you will succeed!

:)

5

Hello,

You inspired me to explore this with your topics!

It took time, effort, research, patience and perseverance but I got there.

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

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

:)