p5.js | createVector() function

The createVector() function in p5.js is used to create the new p5 vector which contains both magnitude and direction. This provides a two or three-dimensional vector, specifically a geometric vector.

Syntax:

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

Parameters: This function accepts three parameters as mentioned above and described below:  

• x: This parameter stores the x component of the vector.
• y: This parameter stores the y component of the vector.
• z: This parameter stores the z component of the vector.

Below programs illustrate the createVector() function in p5.js:

Example 1: This example uses createVector() function to draw a line.  

Javascript

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);
}

Output:

Example 2: This example uses createVector() function to draw a circle. 

Javascript

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);
}

Output:

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