let img;
let alphaImg;

function preload() {
  img = loadImage('imagen.jpg');
}

function setup() {
  createCanvas(400, 400);

  // Crea una imagen con canal alfa del mismo tamaño que la imagen original
  alphaImg = createImage(img.width, img.height);
}

function draw() {
  background(220);

  // Dibuja la imagen actual
  image(img, 0, 0);

  // Crea el canal alfa
  alphaImg.loadPixels();
  img.loadPixels();
  for (let i = 0; i < img.pixels.length; i += 4) {
    // Calcula el valor del canal alfa en función del brillo de cada píxel
    let brightness = (img.pixels[i] + img.pixels[i + 1] + img.pixels[i + 2]) / 3;
    alphaImg.pixels[i] = 255; // Canal rojo
    alphaImg.pixels[i + 1] = 255; // Canal verde
    alphaImg.pixels[i + 2] = 255; // Canal azul
    alphaImg.pixels[i + 3] = brightness; // Canal alfa
  }
  alphaImg.updatePixels();

  // Aplica la máscara
  img.mask(alphaImg);
}