Random Angles

Moving the Points

The first point initially moves in a diagonal direction from the upper left corner of the canvas. The point moves based on an angle of 45° that is put into the sin() and cos() methods.

let stepSize = 1;
let angle = 45;
let sw = 1;
let x1, y1, x2, y2, colorPalette;

function setup() {
  [...]
  x1 = 0;
  y1 = 0;
  colorPalette = [
    color(225, 221, 191),
    color(4, 37, 58),
    color(76, 131, 122)
  ];
  background(colorPalette[0]);
}

function draw() {
  let speed = map(mouseX, 0, width, 2, 8);
  for (let i = 0; i < speed; i++) {
    x1 += cos(radians(angle)) * stepSize;
    y1 += sin(radians(angle)) * stepSize;
    stroke(colorPalette[1]);
    strokeWeight(sw);
    point(x1, y1);
  }
}

The other point mirrors the first point's movement by taking away the first point's current position from the width and height of the canvas.

for (let i = 0; i < speed; i++) {
  [...]
  x2 = width - x1;
  y2 = height - y1;
  stroke(colorPalette[2]);
  point(x2, y2);
}

Changing the Angle of the Point

The point bounces at a random angle when it reaches the centre and an edge of the canvas. Its stroke weight also changes.

let angleCount = 5;

function draw() {
  [...]
  if (x1 < 0 || x1 > width/2 || y1 < 0 || y1 > height) angle = getRandomAngle(x1, y1);
}

function getRandomAngle(_x, _y) {
  let randomAngle = (floor(random(-angleCount, angleCount)) + 0.5) * 90 / angleCount;
  let randomAngle = (floor(random(-angleCount, angleCount)) + 0.5) * 90 / angleCount;
  let swOptions = [1, 2, 3, 4, 5];
  sw = swOptions[floor(random()*swOptions.length)];
  if (_x > width/2) return randomAngle + 180;
  if (_x < 0) return randomAngle;
  if (_y > height) return randomAngle - 90;
  if (_y < 0) return randomAngle + 90;
}