p5.js | createA() Function

p5.js createVector() function

Last Updated : 23 Aug, 2023

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

p5.js | createA() Function

sarthak_ishu11

Improve

Article Tags :

Similar Reads

p5.js createVideo() Function

The createVideo() function is used to create a video element in the DOM. The video is created as a p5.MediaElement, which has methods for controlling the media and its playback. Syntax: createVideo(src, callback) Parameters: This function accepts two parameters as mentioned above and described below

p5.js createSelect() Function

The createSelect() function in p5.js is used to create a dropdown menu element in the DOM (Document Object Model) for taking input. The .value() method is used to get the selected option. This function includes the p5.dom library. Add the following syntax in the head section. Note: This function req

p5.js | createA() Function

The createA() function in p5.js is used to create an anchor element in the DOM (Document Object Model) for creating a hyperlink. This function includes the p5.dom library. Add the following syntax in the head section. C/C++ Code <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.

p5.js createWriter() Function

The createWriter() function in p5.js is used to create a p5.PrintWriter object that can be used to write or print to various available streams. Syntax: createWriter( name, [extension] ) Parameters: This function accepts two parameters as mentioned above and described below. name: It is a string that

p5.js createCamera() Function

The createCamera() function in p5.js is used to create a p5.Camera object and tell the renderer to use it as the current camera. It returns the camera object it newly created. Syntax: createCamera() Parameters: This function accepts no parameters.Return Value: It returns a p5.Camera object that deno

p5.js createSlider() Function

The createSlider() function in p5.js is used to create a slider (input) element in the DOM (Document Object Model). This function includes the p5.dom library. Add the following syntax in the head section. <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js

p5.js createButton() Function

The createButton() function is used to create a button element in the DOM (Document Object Model). The .size() function is used to set the size of button element. The .mousePressed() function is used to specify the behavior of mouse button when pressing it. Note: This function requires the p5.dom li

p5.js createElement() Function

The createElement() function is used to create a element in the DOM (Document Object Model). The .position() function is used to set the position of the element. Note: This function requires the p5.dom library. So add the following line in the head section of the index.html file. <script src="htt

p5.js createAudio() Function

The createAudio() function is used to create an audio element in the DOM. The audio is created as a p5.MediaElement, which has methods for controlling the media and its playback. Syntax: createAudio(src, callback) Parameters: This function accept two parameters as mentioned above and described below

p5.js createInput() Function

The createInput() function is used to create an input element in the DOM for accepting text input. The optional parameters can be used to set the type of input that can be entered. You can use the set() function to define the length of the box.Â Syntax: createInput(value, type) Parameters: This func