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:
javascript
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:
javascript
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
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA