let padding = 20;

let arrowAngle;

​

function setup() {

  createCanvas(400, 400);

  frameRate(4);

  arrowAngle = PI/6;

}

​

function draw() {

  background(220);

  strokeWeight(3);

  stroke(0);

  let point1 = getRandomCoordinates(padding);

  let point2 = getRandomCoordinates(padding);

  drawArrowpoints(point1.x, point1.y, point2.x, point2.y, arrowAngle);

}

​

let drawArrowpoints = (dx1, dy1, dx2, dy2, defaultAngle = PI/4) => {

  let c, a, beta, theta, phi;

  let x1 = dx1,

    x2 = dx2,

    y1 = dy1,

    y2 = dy2;

  let angle = defaultAngle,

    len = arrowHeadLength;

  let ax1, ax2, ay1, ay2;

​

  c = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

  if (Math.abs(x2 - x1) < 1e-6)

    if (y2 < y1) theta = Math.PI / 2;

    else theta = -Math.PI / 2;

  else {

    if (x2 > x1) theta = Math.atan((y1 - y2) / (x2 - x1));

    else theta = Math.atan((y1 - y2) / (x1 - x2));

  }

  a = Math.sqrt(len * len + c * c - 2 * len * c * Math.cos(angle));

  beta = Math.asin((len * Math.sin(angle)) / a);

​

  phi = theta - beta;

  ay1 = y1 - a * Math.sin(phi);

  if (x2 > x1) ax1 = x1 + a * Math.cos(phi);

  else ax1 = x1 - a * Math.cos(phi);

​

  phi = theta + beta;

  ay2 = y1 - a * Math.sin(phi);

  if (x2 > x1) ax2 = x1 + a * Math.cos(phi);

  else ax2 = x1 - a * Math.cos(phi);

​

  line(dx1, dy1, dx2, dy2);

  line(dx2, dy2, ax1, ay1);

  line(dx2, dy2, ax2, ay2);

​

};

​

​

let getRandomCoordinates = (padding) => {

  return {

    x: random(padding, width - padding),

    y: random(padding, height - padding)

  }

}