# Applying filter to a specific region of a window

**URL:** <https://discourse.processing.org/t/applying-filter-to-a-specific-region-of-a-window/24014>\
**Category:** Coding Questions\
**Created:** [September 22, 2020, 1:32am UTC](https://discourse.processing.org/t/applying-filter-to-a-specific-region-of-a-window/24014 "2020-09-22T01:32:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![clamonni](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clamonni/32/10658_2.png) [@clamonni](https://discourse.processing.org/u/clamonni)\
**Post date:** [September 22, 2020, 1:32am UTC](https://discourse.processing.org/t/applying-filter-to-a-specific-region-of-a-window/24014/1 "2020-09-22T01:32:18Z")

</div>

Hi to everyone,  
I’m trying to make a panel to add filters to an image by clicking over four buttons below the image itself. Another feature I’m trying to develop return the hexadecimal color values of a mouse position when over a certain pixel of the image . The problems are 2:

1. I can’t limit the mouseX and mouseY in order the take values only for the pixel of the image;
2. effects are applied to the whole processing windows instead of the image only

Here the code

```auto
PImage img;

void setup() {
size(1, 1);
surface.setResizable(true);
img = loadImage("./data/immagine.jpg");
surface.setSize(img.width, img.height+200);

background (255);
}

void draw() {
  image(img, 0, 100);

// set top box containing hexadecimal color value depending on mouse position on image

if (mouseX <= img.width && mouseX >= 0 && mouseY >= 100 && mouseY <= height-100) {
  color c = get(mouseX, constrain(mouseY, 0, img.height+100));
  fill(c);
  noStroke();
  rect(0, 0, img.width, 100);
  if (c <= -999999) {
  fill(255);}
  else {
  fill(50);
  }
  textSize(32);
  textAlign(CENTER);
  text("#"+hex(c, 6), width/2, 60);
  noStroke();

}
else if (mouseX > img.width && mouseX < 0 && mouseY < img.height+100 && mouseY > img.height-100) {
  fill(255);
  noStroke();
  rect(0, 0, img.width, 100);
  text(255, 0, 0);
  println(mouseX, mouseY);
 }

// set bottom boxes containing visual fx

  int wBox = (img.width)/4;
  for(int i = 0; i < 4; i++) {
    fill(255);
    stroke(0);
    rect(i*wBox, img.height+100, wBox, 100);
    
    //testo bottoni
       if (i==0){
       textFx();
   text("GRAY", (i*wBox+wBox/2), img.height+160);}
    if (i==1){
        textFx();
     text("BLUR", (i*wBox+wBox/2), img.height+160);}
   if (i==2){
       textFx();
     text("INVERT", (i*wBox+wBox/2), img.height+160);}
   if (i==3){
       textFx();
     text("POSTERIZE", (i*wBox+wBox/2), img.height+160);}
 
    
    if (mouseX > wBox*i && mouseX < wBox*1 && mouseY > img.height+100 && i==0){
       filter(GRAY);
       boxHover(i);
      fill(255);
      text("GRAY", (i*wBox+wBox/2), img.height+160);
    
      }
      if (mouseX > wBox*i && mouseX < wBox*2 && mouseY > img.height+100 && i==1){
          filter(BLUR, 6);
        boxHover(i);
            fill(255);
        text("BLUR", (i*wBox+wBox/2), img.height+160);
        
        }
        
        if (mouseX > wBox*i && mouseX < wBox*3 && mouseY > img.height+100 && i==2){
          filter(INVERT);
          boxHover(i);
          fill(255);
          text("INVERT", (i*wBox+wBox/2), img.height+160);
          
          }
          
          if (mouseX > wBox*i && mouseX < wBox*4 && mouseY > img.height+100 && i==3){
            filter(POSTERIZE, 4);
            boxHover(i);
                fill(255);
            text("POSTERIZE", (i*wBox+wBox/2), img.height+160);
           
    }
  }
}

void boxHover(int i){
  noStroke();
  fill(0);
  int wBox = (img.width)/4;
  rect(i*wBox, img.height+100, img.width/4, 100);
}

void textFx(){
 fill(0);
    textSize(20);
    textAlign(CENTER);
  }

```

Please is there someone who is able to give me some help?!  
Thank you in advance,  
Claudio

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2020, 8:38pm UTC](https://discourse.processing.org/t/applying-filter-to-a-specific-region-of-a-window/24014/2 "2020-09-24T20:38:49Z")

</div>

Hey and welcome to the forum!

Great to have you here!

1. 

> [@clamonni](#):
>
> I can’t limit the mouseX and mouseY in order the take values only for the pixel of the image;

here you refer to this, correct?

> [@clamonni](#):
>
> `if (mouseX <= img.width && mouseX >= 0 && mouseY >= 100 && mouseY <= height-100) {`

maybe change the last element to mouseY \<= img.height+100

Also, consider background(0); as the first line in draw() to delete old text.

* * *

1. 

> [@clamonni](#):
>
> effects are applied to the whole processing windows instead of the image only

not sure about this. Apparently filter cannot be restricted to an area. Maybe there is a work around with PGraphics. OR you have to write your own filter.

like [Images and Pixels / Processing.org](https://www.processing.org/tutorials/pixels/) with section “ **Sharpen with Convolution** ” : [Example: Sharpen with Convolution](http://learningprocessing.com/examples/chp15/example-15-13-Convolution)

Warm regards,

Chrisir