const points = [];

var cx = 200;

var cy = 200;

var t = 0;

​

​

function setup() {

  createCanvas(400, 400);

  points.push(createVector(100, 200))

  points.push(createVector(300, 200));

}

​

function mousePressed() {

  points.push(createVector(mouseX, mouseY));

  points.shift()

}

​

​

function draw() {

  background(220);

  for (const [i,p] of points.entries()) {

    circle(p.x, p.y, 5);

    textAlign(CENTER)

    text(i, p.x, p.y+15)

​

  }

  P = points[0]

  O = points[1];

  // line from player to opponent

  // line(P.x, P.y, O.x, O.y);

  // angle from player to opponent

  path = p5.Vector.sub(O,P);

  print(`${O.x-P.x} ${O.y-P.y}`)

  print(`${path}`)

  line(P.x, P.y, P.x+path.x, P.y+path.y);

  path.normalize();

  for (var i = 1 ; i < 10 ; i ++ ){

    // b = p5.Vector.lerp(P, O, i/10);

    v = p5.Vector.mult(path,P.dist(O)*(i/10));

    b = p5.Vector.add(P, v);

    // print(`${path.x} ${P.dist(O)} ${P.dist(O)*(i/10)}`)

    circle(b.x, b.y, 5);

  }

  t+=1;

  textAlign(LEFT)

  text(`${P.dist(O)}`, 10, 390)

}