let halfWidth;

let spacing = 20;

let lineAmount = 15;

let angle = 0;

​

function setup() {

  createCanvas(800, 400);

  angleMode(DEGREES);

  noFill();

​

  halfWidth = width * 0.5;

​

  for (let i = 0; i < lineAmount; i++) {

    lines.push(new Line(i));

  }

}

​

function draw() {

  background(color("#1d1419"));

​

  angle = constrain(map(mouseX, 0, width, 180, 360), 180, 360);

​

  stroke(200, 0, 0);

  line(halfWidth, 0, halfWidth, height);

​

  for (const line of lines) {

    line.show();

  }

​

  // console.log(

  //   constrain(

  //     floor(map(abs(halfWidth - mouseX), 0, halfWidth, 0, lineAmount - 1)),

  //     0,

  //     lineAmount - 1

  //   )

  // );

}

​

class Line {

  constructor(i) {

    this.i = i;

  }

​

  show() {

    push();

    translate(

      this.i * spacing + (width - (lineAmount * spacing - spacing)) / 2,

      height

    );

​

    this.x1 = 0;

    this.y1 = 0;

    this.x1control = this.x1;

    this.y1control = this.y1;

​

    this.x2 = 300 * cos(angle);

    this.y2 = 300 * sin(angle);

    this.x2control = this.x2 - 200 * abs(cos(angle)) * cos(-angle);

    this.y2control = this.y2 - 150 * abs(cos(angle)) * sin(-angle);

​

    stroke(color("#f9933e"));

    bezier(

      this.x1,

      this.y1,

      this.x1control,

      this.y1control,

      this.x2control,

      this.y2control,

      this.x2,

      this.y2

    );

​

    stroke(100);

    line(this.x2, this.y2, this.x2control, this.y2control);

​

    textSize(12);

    textAlign(CENTER, CENTER);

    fill(200);

    text(this.i, 0, -10);

    pop();

  }

}

​