La función beginContour() en p5.js se usa para crear formas negativas en otras formas, es decir, se puede usar para eliminar una parte de una forma con los vértices dados. Esta función inicia el registro de la forma que se debe eliminar. Se usa con la función endContour() que detiene la grabación de los vértices.
Los vértices de la forma interior tienen que estar definidos en dirección opuesta a la de la exterior. Si la forma exterior tiene los vértices definidos en el sentido de las agujas del reloj, entonces la forma interior debe definirse en el sentido contrario a las agujas del reloj.
Esta función solo se puede usar dentro de la función beginShape() o endShape() . Las transformaciones como translate() , rotate() y scale() no funcionan con formas y contornos.
Sintaxis:
beginContour()
Parámetros: Esta función no acepta parámetros.
El siguiente programa ilustra la función beginContour() en p5.js:
Ejemplo 1:
function setup() {
createCanvas(400, 300);
textSize(16);
}
function draw() {
clear();
fill("black");
text("The inside of the letter is cut"+
" out using a countour", 10, 20);
fill("yellow");
// Starting the shape using beginShape()
beginShape();
// Specifying all the vertices
// of the exterior shape
vertex(50, 50);
vertex(200, 50);
vertex(200, 200);
vertex(50, 200);
// Starting a contour
beginContour();
// Specifying all the vertices
// of the interior shape
// in counter-clockwise order
vertex(100, 175);
vertex(175, 175);
vertex(175, 75);
vertex(100, 75);
// Ending the contour
endContour();
// Ending the shape
endShape(CLOSE);
// Draw Circles for demonstration
// Red ones for exterior shape
fill("red");
circle(50, 50, 10);
circle(200, 50, 10);
circle(200, 200, 10);
circle(50, 200, 10);
fill("blue");
// Blue ones for interior shape
circle(100, 175, 10);
circle(175, 175, 10);
circle(175, 75, 10);
circle(100, 75, 10);
}
Producción:
Ejemplo 2:
function setup() {
createCanvas(400, 300);
textSize(16);
}
function draw() {
clear();
background("green");
text("The inside of the letter is cut out"+
" using a countour", 10, 20);
// Starting the shape using beginShape()
beginShape();
// Specifying all the vertices
// of the exterior shape
vertex(50, 250);
vertex(50, 50);
vertex(175, 50);
vertex(175, 150);
vertex(90, 150);
vertex(90, 250);
// Starting a contour
beginContour();
// Specifying all the vertices
// of the interior shape
// in counter-clockwise order
vertex(90, 120);
vertex(140, 120);
vertex(140, 75);
vertex(90, 75);
// Ending the contour
endContour();
// Ending the shape
endShape(CLOSE);
}
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/reference/#/p5/beginContour
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA