let b;

let c;

let ab;

let bc;

let ac;

​

let aover = false;

let bover = false;

let cover = false;

​

let mouse;

let da;

let db;

let dc;

​

let move = false;

let av;

let bv;

let cv;

​

function setup() {

  createCanvas(960, 720);

  a = createVector(100, 100);

  b = createVector(860, 100);

  c = createVector(480, 500);

  av = createVector(random(-5, 5), random(-5, 5));

  bv = createVector(random(-5, 5), random(-5, 5));

  cv = createVector(random(-5, 5), random(-5, 5));

}

​

function draw() {

  background(220);

  mouse = createVector(mouseX, mouseY);

​

  // Draw the sides

  line(a.x, a.y, b.x, b.y);

  line(b.x, b.y, c.x, c.y);

  line(a.x, a.y, c.x, c.y);

​

  // Draw the vertices

  strokeWeight(2);

  if (aover) {

    fill(150);

  } else {

    fill(255);

  }

  ellipse(a.x, a.y, 25, 25);

  if (bover) {

    fill(150);

  } else {

    fill(255);

  }

  ellipse(b.x, b.y, 25, 25);

  if (cover) {

    fill(150);

  } else {

    fill(255);

  }

  ellipse(c.x, c.y, 25, 25);

  fill(0);

  textSize(20);

  textAlign(CENTER);

  text("A", a.x, a.y + 7.5);

  text("B", b.x, b.y + 7.5);

  text("C", c.x, c.y + 7.5);

  // Display lengths of sides

  ab = round(p5.Vector.dist(a, b) * 100) / 100;

  bc = round(p5.Vector.dist(b, c) * 100) / 100;

  ac = round(p5.Vector.dist(a, c) * 100) / 100;

  text("AB = " + ab, width / 2, height - 125);

  text("BC = " + bc, width / 2, height - 100);

  text("AC = " + ac, width / 2, height - 75);

  text("AB + BC > AC", width / 2, height - 50);

  text(ab + " + " + bc + " > " + ac, width / 2, height - 25);

  // Allow user interaction

  da = p5.Vector.dist(a, mouse);

  db = p5.Vector.dist(b, mouse);

  dc = p5.Vector.dist(c, mouse);

  if (da < 20) {

    aover = true;

  } else {

    aover = false;

  }

  if (db < 20) {

    bover = true;

  } else {

    bover = false;

  }

  if (dc < 20) {

    cover = true;

  } else {

    cover = false;

  }

  // Allow moving of points 

  if (move) {

    a.add(av);

    b.add(bv);

    c.add(cv);

    if (a.x > width - 10 || a.x < 10) {

      av.x *= -1;

    }

    if (a.y > height - 10 || a.y < 10) {

      av.y *= -1;

    }

    if (b.x > width - 10 || b.x < 10) {

      bv.x *= -1;

    }

    if (b.y > height - 10 || b.y < 10) {

      bv.y *= -1;

    }

    if (c.x > width - 10 || c.x < 10) {

      cv.x *= -1;

    }

    if (c.y > height - 10 || c.y < 10) {

      cv.y *= -1;

    }

  } else if (mouseIsPressed) {

    if (aover) {

      a = mouse.copy();

    } else if (bover) {

      b = mouse.copy();

    } else if (cover) {

      c = mouse.copy();

    }

  }

  // others

  text("Moving: " + move, 60, 20);

}

​

function keyPressed() {

  if (key == "m") {

    if (move) {

      move = false;

    } else {

      move = true;

    }

  }

}