let x1, y1, x2, y2;

// Position of division

let midX, midY;

​

let mode = 2;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Start off on a diagonal

  x1 = width * 0.25;

  y1 = height * 0.25;

  x2 = width * 0.75;

  y2 = height * 0.75;

}

​

function draw() {

  background(0);

  // Calculate the mid-point between 2 points

  midX = (x1 + x2) / 2;

  midY = (y1 + y2) / 2;

​

  stroke('white');

  noFill();

​

  // fill('white');

  // noStroke();

  // Draw the vertical division

  if (mode == 0) line(midX, 0, midX, height);

  // Draw the horizontal division

  else if (mode == 1) line(0, midY, width, midY);

  else {

    // Calculate angle of the line between the 2 points

    let angle = atan((y2 - y1) / (x2 - x1));

    // Rotate the canvas to that angle

    // to draw the dividing rectangle

    push();

    translate(midX, midY);

    rotate(angle);

    // Draw the xy division

    //line(0,-width, 0, width);

    pop();

    // Slope of perpedicular line is the negative inverse

    // of the the slope of the line from 

    // (x1,y1) and (x2,y2)

    let m = (x1 - x2) / (y1 - y2);

    // Formula for a line is y = mx + b

    // b is the y-value of the line when it crosses x = 0

    let b = midY + (m*midX);

    // Draw a line from where the line intersects

    // x = 0 to where it intersects x = width.

    // If the line is nearly vertical, 

    // this will be a very long line

    line (0, b, width, b-m*width)

  }

​

  fill('red');

  // Draw the people

  ellipse(x1, y1, 10, 10);

  ellipse(x2, y2, 10, 10);

  // Draw the midpoint

  ellipse(midX, midY, 20, 20);

​

}

​

// Move the closest point with the mouse 

// mouse is being dragged

function mouseDragged() {

  let d1 = dist(mouseX, mouseY, x1, y1);

  let d2 = dist(mouseX, mouseY, x2, y2);

  if (d1 < d2) {

    x1 = mouseX;

    y1 = mouseY;

  } else {

    x2 = mouseX;

    y2 = mouseY;

  }

}

​

function keyPressed() {

  mode++;

  mode %= 3;

}