Open In App

p5.js dist() Function

Improve
Improve
Like Article
Like
Save
Share
Report
The dist() function calculates the Euclidean distance in 2D or 3D. Means the p5.js | dist() Function is used to measure the distance between two points in 2D or 3D. Below is the formula for distance in 2D and 3D.
  • 2D formula:   d = \sqrt{(x_1-x_2)^2+(y_1-y_2)^2}
  • 3D formula:   d = \sqrt{(x_1-x_2)^2+(y_1-y_2)^2+(z_1-z_2)^2}
Syntax:
dist(x1, y1, x2, y2)
dist(x1, y1, z1, x2, y2, z2)
Parameters:
  • x1: These parameters holds the x-coordinate of the first point.
  • y1: These parameters hold the y-coordinate of the first point.
  • z1: These parameters hold the z-coordinate of the first point.
  • x2: These parameters hold the x-coordinate of the second point.
  • y2: These parameters hold the y-coordinate of the second point.
  • z2: These parameters hold the z-coordinate of the second point.
Return value: Distance between two points. Example: This example calculates and prints the distance between a fixed point and the cursor.
function setup() {
    // Create a canvas
    createCanvas(400, 400);
}
  
function draw() {
    // set background color
    background(50);
    // coordinates of the fixed point
    var x1 = 200;
    var y1 = 200;
    // coordinates of the cursor
    var x2 = mouseX;
    var y2 = mouseY;
    // set line color and weight
    stroke(255);
    strokeWeight(2);
    // draw a line connecting 2 points
    line(x1, y1, x2, y2);
    fill("red");
    // draw a circle centered at each point
    ellipse(x1, y1, 10);
    ellipse(x2, y2, 10);
    // calculate the distance between 2 points
    d = dist(x1, y1, x2, y2);
    noStroke();
    fill("lightgreen");
    // set text size and alignment
    textSize(20);
    textAlign(CENTER);
    // display the distance calculated
    text("distance = "+ str(d), 200, 350);
}

                    
Output: Online editor: https://editor.p5js.org/ Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/ Reference: https://p5js.org/reference/#/p5/dist

Last Updated : 23 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads