9.4_distance

// Move your mouse inside the canvas to see the change in distance between two points!

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(200);

  fill(0);

​

  let point1x = 10;

  let point1y = 90;

  let point2x = mouseX;

  let point2y = mouseY;

​

  line(point1x, point1y, point2x, point2y); //draw a line

  ellipse(point1x, point1y, 7, 7); //draw circles at the edges of that line

  ellipse(point2x, point2y, 7, 7);

​

  // d is the length of the line (the distance from point 1 to point 2)

  let d = dist(point1x, point1y, point2x, point2y);

​

  // Print what the distance is:

  print("The distance between point1 and point2 is: " + d);

​

  // Fancier feedback options:

  // (we're not going to go over these in class)

  push();

  translate((point1x + point2x) / 2, (point1y + point2y) / 2);

  rotate(atan2(point2y - point1y, point2x - point1x)); // Look up the atan2() reference for more info

  text(nfc(d, 1), 0, -5); // Look up the nfc() reference for more info

  pop();

​

  // // ------- Less fancy ------- //

  // text(nfc(d, 1), 50, 50);

}