How to use a mouse's Y position to show an image's normal or negative filter within an array

Ali_84

Hi there,

I am new to Processing 2 and am trying to figure out how to display an image normally (when the mouse is in the top half of the screen) and display a negative filter of the image (when the mouse is in the bottom half of the screen).

Currently, in the top half of the screen the image flickers between normal/negative filters, but when I move the mouse into the bottom half of the screen, it shows either the normal/negative filter (depending on what was last shown).

The image in question is the second image in an array (effect for second image). The other images in the array should not be affected.

My full code is below, any help would be much appreciated!

    PImage[] picArray = new PImage[3];
    int ix;

    void setup() {
      size(427,640);     //Size of all images
      imageMode(CENTER);
      // Load images
      picArray[0] = loadImage("chrissie0.jpg");
      picArray[1] = loadImage("chrissie1.jpg");
      picArray[2] = loadImage("chrissie2.jpg"); 

      image(picArray[0], 0, 0);
      noStroke();
    }      
    // end setup()

    void draw() {

      //effect for first image
      if (ix == 0){
        for (int b=0; b<10000; b++) {
          addPoint(ix);
        }
      }

    //effect for second image
          if (ix == 1){
            boolean isChanged = false;
              if (mouseY < height/2 && isChanged == false){
                for (int y=0; y<height; y++) {
                  for (int x=0; x<width; x++) {
                    color c = get(x, y);
                    set(x, y, color(255-red(c), 255-green(c), 255-blue(c)));
                  }
                }
              isChanged = true;
            } else if(isChanged == true){
              isChanged = false;
            }
          }

          //effect for third image
          if (ix == 2){ 
      }
    }//end draw

      //Generates and loads pic based on ix
    void mousePressed(){
      ix = (int)random(picArray.length);
      image(picArray[ix], width/2,height/2);    
    }

    //for image 1 pointillism effect  
    void addPoint(int ix) {
      // Add a random filled circle to image
      int x = (int)random(width);
      int y = (int)random(height);
      int b = x + width*y;
      color c = picArray[ix].pixels[b];
      fill(c);
      //to change size of circles
      ellipse(x, y, mouseX/10, mouseY/10);
    }

    //more effects should be here

ankhelos

HI.. First of all your code does a lot more than displaying the two images. There is a pointillism effect in it as well which I don't know how you want to use.

Then, you are calling image() inside mousePressed(), something that I would strongly advise against, as mousePressed() is called every time you click the mouse. I would only change the index in mousePressed() andd then draw it inside draw(). If you wanted to do just what you describe, ie

display an image normally (when the mouse is in the top half of the screen) and display a negative filter of the image (when the mouse is in the bottom half of the screen).>

something like this would be enough:

PImage[] picArray = new PImage[3];
void setup() {
  size(427, 640);     //Size of all images
  // Load images
  picArray[0] = loadImage("chrissie0.jpg");
  picArray[1] = loadImage("chrissie1.jpg");
  picArray[2] = loadImage("chrissie2.jpg"); 
}      
// end setup()

void draw() {
  if ( mouseY > (height/2) )
  {
    image(picArray[0], 0,0);
  }
  else
  {
    image(picArray[1], 0,0);
  }
}//end draw

Let me know if that helps. :)