p5.js | función filtro()

La función filter() se usa para aplicar filtros al lienzo. p5.js tiene varios ajustes preestablecidos que se pueden usar con diferentes niveles de intensidad para obtener el efecto deseado.
Sintaxis: 
 

filter( filterType, filterParam)

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación: 
 

• filterType: Es una constante que define el preset que se utilizará como filtro. Puede tener los siguientes valores: 
  • UMBRAL: Este modo se utiliza para convertir la imagen a blanco y negro dependiendo del umbral definido en el parámetro de nivel opcional. Un valor de nivel de 0,0 significa que la imagen sería completamente negra y un valor de 1,0 significa que la imagen sería blanca. En caso de que no se especifique ningún valor, se utiliza 0,5.
  • GRAY: este modo convierte todos los colores de la imagen en equivalentes de escala de grises. El parámetro opcional no se utiliza para este ajuste preestablecido.
  • OPAQUE: este modo establece que el canal alfa de la imagen sea completamente opaco. El parámetro opcional no se utiliza para este ajuste preestablecido.
  • INVERTIR: Este modo invierte cada uno de los píxeles de la imagen. El parámetro opcional no se utiliza para este ajuste preestablecido.
  • POSTERIZAR: este modo limita cada canal de la imagen al número de colores especificado en el valor. El parámetro opcional se puede configurar en el rango de 2 a 255, con los efectos más notables en los rangos de color más bajos.
  • BLUR: este modo aplica un desenfoque gaussiano a la imagen. El parámetro opcional se utiliza para especificar la intensidad del desenfoque. Si no se especifica ningún parámetro, se aplica un desenfoque gaussiano con un radio de 1 metro.
  • ERODE: Este modo reduce las áreas claras. El parámetro opcional no se utiliza para este ajuste preestablecido.
  • DILATE: este modo aumenta las áreas claras. El parámetro opcional no se utiliza para este ajuste preestablecido.
• filterParam: Es un número que es único para cada filtro y afecta la funcionalidad del filtro. Es un parámetro opcional.

Los siguientes ejemplos ilustran la función filter() en p5.js:
Ejemplo 1:
 

function preload() {
  img = loadImage("sample-image.png");
}
 
function setup() {
  filterModes = [
    GRAY,
    OPAQUE,
    INVERT,
    POSTERIZE,
    BLUR,
    ERODE,
    DILATE,
    BLUR,
    THRESHOLD
  ];
 
  index = 0;
  currFilterMode = filterModes[index];
 
  createCanvas(500, 300);
  textSize(20);
 
  btn = createButton("Change filter");
  btn.position(30, 200);
  btn.mousePressed(changeFilter);
}
 
function draw() {
  clear();
 
  text('Click on the button to change the filter mode', 20, 20);
  text("Current filter: " + currFilterMode, 20, 50);
 
  image(img, 20, 80);
 
  // Set the filter
  filter(currFilterMode);
}
 
function changeFilter() {
  if (index < filterModes.length - 1)
    index++;
  else
    index = 0;
  currFilterMode = filterModes[index];
 
  console.log("Current filter: " + currFilterMode);
}

Producción: 
 

Ejemplo 2: 
 

let level = 0;
 
function preload() {
  img = loadImage("sample-image.png");
}
 
function setup() {
  createCanvas(500, 300);
  textSize(20);
 
  valueSlider = createSlider(0, 3, 0, 0.1);
  valueSlider.position(30, 200);
  valueSlider.input(changeLevel);
}
 
function draw() {
  clear();
 
  text('Move the slider to change the blur radius', 20, 20);
  text("Current radius: " + level + "m", 20, 50);
 
  image(img, 20, 80);
 
  // Set the filter
  filter(BLUR, level);
}
 
function changeLevel() {
  level = valueSlider.value();
}

Producción: 
 

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5/filtro