Applying filter to a specific region of a window

Processing Coding Questions
1

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

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 * asking questions

1 Like
2

Hey and welcome to the forum!

Great to have you here!

here you refer to this, correct?

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

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

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 with section “Sharpen with Convolution” : Example: Sharpen with Convolution

Warm regards,

Chrisir