OL_Distance

let n = 10,
  nballs = 1,
  a = 0;
let b_Array = [];
function setup() {
  createCanvas(windowWidth, windowHeight);
  b_Array.push(new Ball(width / 3, height / 3));
  stroke(255);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);
  backgroundLines();
  for (let i = 0; i < nballs; i++) {
    b_Array[i].move();
    b_Array[i].display(i);
  }
}

function backgroundLines() {
  background(0);
  for (let i = 0; i < n; i++) {
    line(-width / 2, -height / 2, -width / 2 + (width / n) * i, height / 2);
    line(-width / 2, -height / 2, width / 2, height / 2 - (height / n) * i);
  }
  for (let j = 0; j < 20 * n; j++) {
    line(
      -width / 2,
      -height / 2 + (j * j * j) / n,
      -width / 2 + (j * j * j) / n,
      -height / 2
    );
  }
}

class Ball {
  constructor(x, y) {
    this.x1 = x;
    this.y1 = y;
    this.x = x;
    this.y = y;
    this.t = 0;
    this.m = (y + height / 2) / (x + width / 2);
    this.b = y - this.m * x;
  }
  move() {
    if (this.x > -width / 2) {
      this.x = this.x1 - this.t;
      this.y = this.m * this.x + this.b;
      this.t += 1;
    } else {
      this.t = -width;
      this.x = this.x1 - this.t;
      this.y = this.m * this.x + this.b;
      this.t += 1;
    }
  }
  display(i) {
    fill(abs(this.x1) / 10 + i * 3, this.y1 / 10 + i * 2, 255 - i * 7);
    let d = dist(this.x, this.y, -width / 2, -height / 2);
    circle(this.x, this.y, d / 4);
  }
}

function mousePressed() {//add ball with click
  b_Array.push(new Ball(mouseX - width / 2, mouseY - height / 2));
  nballs++;
}
function keyPressed() {//clear array with space bar
  if (keyCode === 32) {
    b_Array = [];
    nballs = 0;
  }
}