In the AU Library (currently in beta – see earlier posts for download links) you can store an RGB image in an object called an AUMultiField, where you can do lots of things to do it, including drawing it on the screen.

Now you can also draw it using a mask. Create any AUField with shades of gray, and tell the library to use this as a mask when you draw your picture. Values of the mask from 0 to 1 control the opacity of the corresponding pixels, from fully transparent to fully opaque. In other words, the mask is an alpha layer, but it’s better than Processing’s built-in alpha because the values are stored in floats, giving them much more range and precision. The layer is also separate from the pixels, making it easier and faster to modify.

The code is easy. When you call RGBtoPixels() to draw your AUMultiField object, just include another AUField argument, and that will be the mask. You can also mask a plain AUField object, and you can apply the mask when drawing either kind of object to an offscreen PGraphics buffer if you like. The new documentation gives the details.

Here’s the code for the image above. The mask is a white triangle and a 50% gray thick Bezier curve. There’s no draw() because in this simple example we’re just drawing one image. The cloud and fire images came from www.freeimages.com.

import AULibrary.*;

void setup() {
  // import images (both saved 375 wide by 500 high) 
  PImage fireImage = loadImage("freeimages-1093986.jpg");
  PImage cloudsImage = loadImage("freeimages-1444573.jpg");
  
  size(fireImage.width, fireImage.height);
  
  // save the color fire image into fireField
  image(fireImage, 0, 0);
  AUMultiField fireField = new AUMultiField(this, 3, width, height);
  fireField.RGBfromPixels(AUMultiField.FIELD_REPLACE, 1.);
  
  // draw a fun mask in shades of gray. White=fire, Black=clouds
  background(0);                // black background
  fill(255);                    // fill with white
  triangle(50, 150, 200, 300, 250, 50);  // draw triangle
  noFill();                     // don't fill
  stroke(128);                  // only half bright
  strokeWeight(50);             // draw a big fat stroke
  bezier(50, 425, 100, 225, 300, 625, 325, 275);  // a little curve
  
  // save this grayscale image with values scaled to (0,1)
  AUField mask = new AUField(this, width, height);
  mask.fromPixels(AUField.FIELD_LUM, AUField.FIELD_REPLACE, 1/255.);

  image(cloudsImage, 0, 0);           // draw the clouds
  fireField.RGBtoPixels(0, 0, mask);  // draw the fire through the mask
}