p5.js dist() Function
dist() function
p5.js | dist() Function
- 2D formula:
- 3D formula:
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:
Example:
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:
Reference:
https://p5js.org/reference/#/p5/dist
Contact Us