p5.js | función blendMode()

La función blendMode() se usa para combinar dos píxeles de acuerdo con el modo de combinación dado. Los diferentes tipos de modos de fusión tienen diferentes métodos para mezclar los píxeles de origen con los presentes en la ventana de visualización, para producir el píxel resultante.

Sintaxis:

blendMode( mode )

Parámetros: esta función acepta el modo de parámetro único que se utiliza para combinar los píxeles. Puede tener los siguientes valores:

BLEND: Mezcla los píxeles usando la interpolación lineal de los colores. Es el modo de fusión predeterminado.
AGREGAR: produce el nuevo color agregando los colores de ambos píxeles.
MÁS OSCURO: utiliza solo el color más oscuro de los dos píxeles.
LIGHTEST: utiliza solo el color más claro de los dos píxeles.
DIFERENCIA: Resta colores de la imagen subyacente.
EXCLUSIÓN: Tiene un efecto similar a la propiedad de “diferencia” con menor intensidad.
MULTIPLICAR: Multiplica ambos colores dando como resultado una imagen más oscura.
SCREEN: Tiene el efecto contrario al efecto “multiplicar” y utiliza valores inversos de los colores.
REEMPLAZAR: Reemplaza completamente los píxeles del primero con los píxeles del otro ignorando los valores alfa.
QUITAR: Elimina los píxeles del segundo color usando su fuerza alfa.
SUPERPOSICIÓN: es una combinación de los modos «multiplicar» y «pantalla». Multiplica los valores de luz y filtra los valores oscuros. Funciona solo en el renderizador 2D.
HARD_LIGHT: Aplica el efecto “pantalla” cuando el valor de gris es superior al 50% y “multiplica” cuando es inferior. Funciona solo en el renderizador 2D.
SOFT_LIGHT: Es una mezcla de «más oscuro» y «más claro». Funciona como el modo «superposición» con menos intensidad. Funciona solo en el renderizador 2D.
DODGE: Aclara los tonos claros y aumenta el contraste, ignorando los tonos oscuros. Funciona solo en el renderizador 2D.
BURN: Aclara los tonos oscuros y aumenta el contraste, ignorando los tonos claros. Funciona solo en el renderizador 2D.
RESTA: Aplica el color final en base al resto de los dos píxeles. Funciona solo en el renderizador WEBGL.

El siguiente ejemplo ilustra la función blendMode() en p5.js:

Ejemplo:

function setup() {
  blendModes = [
    BLEND,
    ADD,
    DARKEST,
    LIGHTEST,
    DIFFERENCE,
    EXCLUSION,
    MULTIPLY,
    OVERLAY,
    HARD_LIGHT,
    SOFT_LIGHT,
    DODGE,
    BURN
  ]
  
  index = 0;
  currBlendMode = blendModes[index];
  
  createCanvas(600, 300);
  textSize(20);
}
  
function draw() {
  clear();
  text('Click on the button to change the blend mode', 20, 20);
  text("Current blendMode: " + currBlendMode, 20, 50);
  
  btn = createButton("Change blendMode");
  btn.position(30, 80);
  btn.mousePressed(changeBlendMode);
  
  // Set the blend mode
  blendMode(currBlendMode);
  
  // Draw the first circle
  fill("red");
  circle(180, 200, 150);
  
  // Draw the second circle
  fill("green");
  circle(260, 200, 150);
}
  
function changeBlendMode() {
  if (index < blendModes.length - 1)
    index++;
  else
    index = 0;
  currBlendMode = blendModes[index];
}

Producción:
blendMode-salida