p5.js | función crearVector()

La función createVector() en p5.js se usa para crear el nuevo vector p5 que contiene tanto la magnitud como la dirección. Esto proporciona un vector bidimensional o tridimensional, específicamente un vector geométrico.

Sintaxis: 

createVector([x], [y], [z])

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

• x: este parámetro almacena la componente x del vector.
• y: este parámetro almacena la componente y del vector.
• z: Este parámetro almacena el componente z del vector.

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

Ejemplo 1: Este ejemplo usa la función createVector() para dibujar una línea.  

function setup() {
 
    // Create a Canvas
    createCanvas(500, 550);
}
 
function draw() {
    
    // Vector initialisation
    // using createVector
    t1 = createVector(10, 40);
    t2 = createVector(411, 500);
    
    // Set background color 
    background(200);
    
    // Set stroke weight
    strokeWeight(2);
    
    // line using vector
    line(t1.x, t1.y, t2.x, t2.y);
    
    translate(12, 54);
  
    line(t1.x, t1.y, t2.x, t2.y);
}

Producción: 

Ejemplo 2: Este ejemplo usa la función createVector() para dibujar un círculo. 

function setup() {
 
    // Create a Canvas
    createCanvas(500, 550);
}
  
function draw() {
    
    // Vector initialisation
    // using createVector
    t1 = createVector(10, 40);
    t2 = createVector(41, 50);
    
    // Set background color 
    background(200);
    
    // Set stroke weight
    strokeWeight(2);
    
    // Fill yellow
    fill('yellow');
    
    // ellipse using vector
    ellipse(t1.x*millis() / 1000 * 20,
            t1.y, t2.x+100, t2.y+100);
}

Producción: 

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