La función erase() en p5.js se usa para restar todos los dibujos que se harían después del uso de esta función. El área de dibujo sustraída revelaría la página web debajo del lienzo. El efecto de esta función se puede cancelar utilizando la función noErase().
No afecta a los dibujos realizados por las funciones image() y background().
Sintaxis:
erase( [strengthFill], [strengthStroke] )
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación.
- strongFill: es un número en el rango de 0 a 255, que denota la fuerza del relleno de la forma que se borra. Es un valor opcional. El valor predeterminado es 255, que indica la fuerza total del relleno de la forma.
- fuerzaStroke: Es un número en el rango de 0 a 255, que denota la fuerza del trazo de la forma que se borra. Es un valor opcional. El valor predeterminado es 255, que denota la fuerza total del trazo de la forma.
Los siguientes ejemplos ilustran la función erase() en p5.js:
Ejemplo 1:
function setup() {
createCanvas(600, 400);
textSize(20);
fill('black');
text("Move the slider below to change fill strength", 20, 30);
fillStrengthSlider = createSlider(0, 255, 128, 1);
fillStrengthSlider.position(30, 50);
text("Move the slider below to change stroke strength", 20, 100);
strokeStrengthSlider = createSlider(0, 255, 128, 1);
strokeStrengthSlider.position(30, 120);
}
function draw() {
fill('red');
rect(50, 200, 200, 200);
erase(fillStrengthSlider.value(), strokeStrengthSlider.value());
circle(100, 300, 200);
noErase();
}
Producción:
Ejemplo 2:
let eraseEnable = false;
function setup() {
createCanvas(600, 400);
textSize(20);
fill('black');
text("Click the button to see the effects of"
+ " the erase() function", 20, 30);
toggleBtn = createButton("Toggle erase");
toggleBtn.position(30, 60);
toggleBtn.mouseClicked(toggleErase);
}
function toggleErase() {
if (eraseEnable) {
noErase();
eraseEnable = false;
}
else {
erase();
eraseEnable = true;
}
}
function mouseMoved() {
fill('red');
noStroke();
circle(mouseX, mouseY, 50);
}
Producción:
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/reference/#/p5/erase
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA