Mask and Illuminate only within the unmasked portion of image

AaronR

Hello everyone. I am new to this forum. I've been working with Python for many years and as of 4 days ago, I switched to processing for visual effects and games.

I have a maze...

and I have a mask...

I am adjusting the brightness of the pixels within the maze as they correspond to the movements of the mouse. However, I would only like to adjust the pixels that fall within the mask. If the mouse moves outside the maze boundaries, the adjust brightness function is set to black.

here is my code.

PImage photo, maskImage, img;

void setup() {
  size(781, 742);
  frameRate(30);
  photo = loadImage("test_cave2.jpg");
  maskImage = loadImage("test_cave2_mask.jpg");
  photo.mask(maskImage);
  photo.loadPixels();
  // Only need to load the pixels[] array once, because we're only
  // manipulating pixels[] inside draw(), not drawing shapes.
  loadPixels();
}

void draw() {
  for (int x = 0; x < photo.width; x++) {
    for (int y = 0; y < photo.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      int loc = x + y*photo.width;
      // Get the R,G,B values from image
      float r,g,b;
      r = red (photo.pixels[loc]);

      // Calculate an amount to change brightness based on proximity to the mouse
      float maxdist = 50;//dist(0,0,width,height);
      float d = dist(x, y, mouseX, mouseY);
      float adjustbrightness = 255*(maxdist-d)/maxdist;
      r += adjustbrightness;

      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      //g = constrain(g, 0, 255);
      //b = constrain(b, 0, 255);


      color c = color(r);

      pixels[y*width + x] = c;
      //print(pixels);


    }
  }
  updatePixels();
}

The "illumination" or adjust brightness needs to only happen in the unmasked areas (white). I've tried for loops, masks, and lots of print statements to see what was being spit out from my code, but I cant get the pixels to show exactly what I need.

Even a suggestion as to how to proceed would be forever gracious. I hope someday I can help someone out in return. :)

Thanks so much.

AaronR

I think I am starting to get it, I am masking the photo and not the adjust brightness. ...still, kind of stumped on how to achieve this effect.

amnon

If you are targetting brightness, it's easier to use HSB colormode. And you wanna make the drawing conditional of the mask's pixels. And you could only draw within the relevant (lighted) area to make your sketch more efficient.

Adapted Code

PImage photo, mask;
int md = 50;
int md2 = md * 2;

void setup() {
  size(781, 742);
  photo = loadImage("test_cave2.jpg");
  mask = loadImage("test_cave2_mask.jpg");
  colorMode(HSB, 1);
}

void draw() {
  noStroke();
  fill(0);
  rect(0, 0, photo.width, photo.height);
  loadPixels();
  int minX = max(mouseX - md2, 0);
  int maxX = min(mouseX + md2, photo.width);
  int minY = max(mouseY - md2, 0);
  int maxY = min(mouseY + md2, photo.height);
  for (int x=minX; x<maxX; x++) {
    for (int y=minY; y<maxY; y++ ) {
      int loc = x + y * photo.width;
      float mb = brightness(mask.pixels[loc]);
      if (mb > 0.1) {
        float d = dist(x, y, mouseX, mouseY);
        float adjustBrightness = (md - d) / md;
        color c = photo.pixels[loc];
        float b = brightness(c) + adjustBrightness;
        pixels[x + y * width] = color(hue(c), saturation(c), b);
      }
    }
  }
  updatePixels();
}

AaronR

amnon! Holy cow, that's awesome.

i was unaware of the HSB colormode. It is way more efficient, even when I increase the size of the image.

I wish I could send you money. :)

I have been struggling with that for a few days.