blendMode and transparency

Processing Coding Questions
6

Hi again!

Thanks @behreajj for the insight on how to do this with Java AWT! :wink:

Just for fun, here’s a method that support arbitrary shapes by using a mask (of black pixels) that we then fill with the gradient using PGraphics :

/**
 * Draw a rhombus shape mask of size s
 */
void rhombusMask(PGraphics mask, int s) {
  // It's important to fill it with black
  mask.beginDraw();
  
  mask.fill(0);
  mask.noStroke();
  
  mask.translate(mask.width / 2, mask.height / 2 - s);
  
  mask.beginShape();
  mask.vertex(-s * 0.10, s * 0.10);
  mask.quadraticVertex(0, 0, s * 0.10, s * 0.1);
  mask.vertex(s * 0.10, s * 0.10);
  
  mask.vertex(s * 0.8, s * 0.9);
  mask.quadraticVertex(s * 0.9, s, s * 0.8, s * 1.1);
  mask.vertex(s * 0.8, s * 1.1);
  
  mask.vertex(s * 0.1, s * 1.9);
  mask.quadraticVertex(0, s * 2, -s * 0.1, s * 1.9);
  mask.vertex(-s * 0.1, s * 1.9);
  
  mask.vertex(-s * 0.8, s * 1.1);
  mask.quadraticVertex(-s * 0.9, s, -s * 0.8, s * 0.9);
  mask.vertex(-s * 0.8, s * 0.9);
  mask.endShape(CLOSE);
  
  mask.endDraw();
}

/**
 * Take a PGraphics with some black mask and return a new image filled 
 * with a vertical gradient
 */
PGraphics createGradientFromMask(PGraphics mask, color from, color to) {
  mask.loadPixels();
  
  // We are going to compute the bounds of the mask
  // And store the mask pixels in an array
  ArrayList<PVector> maskPixels = new ArrayList<PVector>();
  int minY = mask.height;
  int maxY = 0;
  
  for (int x = 0; x < mask.width; x++) {
    for (int y = 0; y < mask.height; y++) {
      int loc = x + y * mask.width;
      
      // If it's a black pixel
      if (mask.pixels[loc] == color(0)) {
        // Add it to the array
        maskPixels.add(new PVector(x, y));
        
        // Update min and max y
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
      }
    }
  }
  
  // Create a new graphics object
  PGraphics gradient = createGraphics(mask.width, mask.height);
  
  gradient.beginDraw();
  gradient.loadPixels();
  
  // For every pixel, draw it with the gradient
  for (PVector pixel : maskPixels) {
    int loc = (int) pixel.x + (int) pixel.y * gradient.width;
    gradient.pixels[loc] = lerpColor(from, to, map(pixel.y, minY, maxY, 0, 1));
  }
  
  gradient.updatePixels();
  
  return gradient;
}

PGraphics mask, gradient;
int shapeSize = 150;

void setup() {
  size(500, 500);
  
  // Create the mask and add a shape
  mask = createGraphics(shapeSize * 2, shapeSize * 2);
  rhombusMask(mask, shapeSize);
  
  // Create the gradient from the mask
  gradient = createGradientFromMask(mask, color(#d35400), color(#2980b9));
}

void draw() {
  background(#16a085);
  
  // Display the final gradient centered
  imageMode(CENTER);
  image(gradient, width / 2, height / 2);
  
  noLoop();
}

gradient gradient

2 Likes