Related Articles

Related Articles

p5.js | line() Function
  • Last Updated : 10 Apr, 2019

The line() function is an inbuilt function in p5.js which is used to draw a line. In order to change the color of the line stroke() function is used and in order to change the width of the line strokeWeight() function is used.

Syntax:

line(x1, y1, x2, y2)

or

line(x1, y1, z1, x2, y2, z2)

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

  • x1: This parameter takes the x-coordinate of the first point.
  • y1: This parameter takes the y-coordinate of the first point.
  • z1: This parameter takes the z-coordinate of the first point.
  • x2: This parameter takes the x-coordinate of the second point.
  • y2: This parameter takes the y-coordinate of the second point.
  • z2: This parameter takes the z-coordinate of the second point.

Below programs illustrates the line() function in P5.js:



Example 1: This example uses line() function to draw a line without using z-coordinate.

filter_none

edit
close

play_arrow

link
brightness_4
code

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1 = 38, 31; x2, y2 = 300, 20;
    // Use line() function to draw line
    line(38, 31, 30, 200); 
}

chevron_right


Output:

Example 2: This example uses line() function to draw the line using z-coordinate.

filter_none

edit
close

play_arrow

link
brightness_4
code

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1, z1 = 38, 31, 34; 
    // x2, y2, z2 = 300, 200, 45;
    // Use line() function to draw line
    line(38, 31, 34, 300, 200, 45); 
}

chevron_right


Output:

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :