let halfWidth;

let spacing = 20;

let lineAmount = 10;

​

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"));

​

  // vertical line to show the center

  // stroke(200, 0, 0);

  // line(halfWidth, 0, halfWidth, height);

​

  for (const line of lines) {

    line.move();

    line.show();

  }

}

​

class Line {

  constructor(i) {

    this.index = i;

    this.angle = 270;

  }

​

  move() {

    if (mouseX < halfWidth && this.angle > 180 + (this.index + 1) * 2) {

      this.angle -= (lineAmount - this.index) * 0.3;

    } else if (

      mouseX > halfWidth &&

      this.angle < 360 - (lineAmount - this.index) * 2

    ) {

      this.angle += (this.index + 1) * 0.3;

    }

  }

​

  show() {

    push();

    translate(

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

      height

    );

​

    // this is the side that stays still below

    this.x1 = 0;

    this.y1 = 0;

    this.x1control = this.x1;

    this.y1control = this.y1;

​

    // this is the side that moves above

    this.x2 = 300 * cos(this.angle);

    this.y2 = 300 * sin(this.angle);

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

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

​

    // these are the actual pages

    stroke(color("#f9933e"));

    bezier(

      this.x1,

      this.y1,

      this.x1control,

      this.y1control,

      this.x2control,

      this.y2control,

      this.x2,

      this.y2

    );

​

    // to visualize the bezier control

    // stroke(100);

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

​

    // to visualize the indexes of the pages

    // textSize(12);

    // textAlign(CENTER, CENTER);

    // fill(200);

    // text(this.index + 1, 0, -10);

    pop();

  }

}

​