​

function setup() {

  createCanvas(window.innerWidth, window.innerHeight);

  textAlign(CENTER);

  point1 = {

    x: 200,

    y: 200,

  };

  point2 = {

    x: 400,

    y: 400,

  };

  point3 = {

    x: 200,

    y: 400,

  };

}

​

function draw() {

  background("black");

  // Strive.drawTickAxes();

​

  circle(point1.x, point1.y, 30);

  circle(point2.x, point2.y, 30);

  moveCheck(point1)

  moveCheck(point2)

​

  point3.x = point1.x;

  point3.y = point2.y;

​

  push();

  noFill();

  stroke(0, 50, 100);

  strokeWeight(5);

  triangle(point1.x, point1.y, point2.x, point2.y, point3.x, point3.y);

  pop();

​

  let widt = dist(point3.x, point3.y, point2.x, point2.y);

  let heigt = dist(point3.x, point3.y, point1.x, point1.y);

  let twidt = (point2.x + point3.x) / 2;

  let theigh = (point1.y + point3.y) / 2;

​

  if (point1.x < point2.x && point1.y < point2.y) {

    fill(255, 0, 0, heigt);

    square(point1.x - heigt, point1.y, heigt);

    fill(0, 255, 0, widt);

    square(point2.x - widt, point2.y, widt);

  } else if (point1.x < point2.x && point1.y > point2.y) {

    fill(255, 0, 0, heigt);

    square(point3.x - heigt, point3.y, heigt);

    fill(0, 255, 0, widt);

    square(point3.x, point3.y - widt, widt);

  } else if (point1.x > point2.x && point1.y < point2.y) {

    fill(255, 0, 0, heigt);

    square(point1.x, point1.y, heigt);

    fill(0, 255, 0, widt);

    square(point2.x, point2.y, widt);

  } else if (point1.x > point2.x && point1.y > point2.y) {

    fill(255, 0, 0, heigt);

    square(point3.x, point3.y, heigt);

    fill(0, 255, 0, widt);

    square(point2.x, point2.y - widt, widt);

  }

​

  fill("grey");

  textSize(20);

  let pytha = dist(point1.x, point1.y, point2.x, point2.y);

  pytha = round(pytha, 2);

  text(widt, twidt, point2.y);

  text(heigt, point1.x, theigh);

  text(pytha, (point1.x + point2.x) / 2, (point1.y + point2.y) / 2);

  fill(0, 50, 100);

  let spacing = 25;

  textSize(30);

  fill(0, 255, 0);

  square(100, 500, widt);

  text("+", 100 + widt + spacing, 650);

  fill(255, 0, 0);

  square(100 + widt + spacing + spacing, 500, heigt);

  text("=", 100 + widt + heigt + 3 * spacing, 650);

  fill(0, 0, 255);

  square(100 + widt + heigt + 4 * spacing, 500, pytha);

}

​

function moveCheck(p) {

  if (mouseIsPressed) {

    if (dist(mouseX, mouseY, p.x, p.y) <= 15) {

      p.x = mouseX;

      p.y = mouseY;

      fill('red')

    }

  }

}

​