p5.js | función bezier() – Barcelona Geeks

La función bezier() en p5.js se usa para dibujar una curva Bezier cúbica en la pantalla. Estas curvas están definidas por una serie de puntos de anclaje y control.

Sintaxis:

bezier( x1, y1, x2, y2, x3, y3, x4, y4 )
or
bezier( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 )

Parámetros: La función acepta doce parámetros como se mencionó anteriormente y se describe a continuación:

x1 Este parámetro almacena la coordenada x para el primer punto de anclaje

y1 Este parámetro almacena la coordenada y para el primer punto de anclaje

x2 Este parámetro almacena la coordenada x para el primer punto de control

y2 Este parámetro almacena la coordenada y para el primer punto de control

x3 Este parámetro almacena la coordenada x para el segundo punto de control

y3 Este parámetro almacena la coordenada y para el segundo punto de control

x4 Este parámetro almacena la coordenada x para el segundo punto de anclaje

y4 Este parámetro almacena la coordenada y para el segundo punto de anclaje

z1 Este parámetro almacena la coordenada z para el primer punto de anclaje

z2 Este parámetro almacena la coordenada z para el primer punto de control

z3 Este parámetro almacena la coordenada z para el segundo punto de control

z4 Este parámetro almacena la coordenada z para el segundo punto de anclaje

Los siguientes programas ilustran la función bezier() en p5.js:

Ejemplo 1: Este ejemplo usa la función bezier() para dibujar una curva bezier().

function setup() {
  
    // Create canvas size 
    createCanvas(150, 110);
}
   
function draw() {
  
    // Set the background color
    background(220);
      
    noFill();
      
    // Set the stroke color
    stroke(0, 0, 0);
      
    // Bezier function 8 parameters 
    // except z-coordinate
    bezier(85, 20, 10, 10, 160, 90, 50, 80);
}

Ejemplo 2: este ejemplo utiliza la función bezier() con todos los parámetros para dibujar una curva bezier().

function setup() {
    
    // Create canvas size
    createCanvas(150, 150);
}
  
function draw() {
  
    // Set the background color
    background(0, 0, 0);
      
    noFill();
      
    // Set the stroke color
    stroke(255);
      
    // Bezier function with all 12 parameters
    bezier(150, 150, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
}

Referencia: https://p5js.org/reference/#/p5/bezier

Publicación traducida automáticamente

Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta