let halfWidth;

let centerPages;

let pageAmount = 22;

let spacing = 20;

​

function setup() {

  createCanvas(800, 400);

  angleMode(DEGREES);

  strokeWeight(2);

  stroke(color("#f9933e"));

  noFill();

​

  halfWidth = width * 0.5;

  centerPages = (width - (pageAmount * spacing - spacing)) / 2;

​

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

    pages.push(new Page(i));

  }

}

​

function draw() {

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

​

  for (const page of pages) {

    page.move();

    page.show();

  }

}

​

class Page {

  constructor(i) {

    this.index = i;

    this.angle = 270;

    this.origin = this.index * spacing + centerPages;

  }

​

  move() {

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

      this.angle -= (pageAmount - this.index) * 0.07;

    } else if (mouseX > halfWidth && this.angle < 360 - (pageAmount - this.index) * 2) {

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

    }

  }

​

  show() {

    push();

​

    translate(this.origin, height);

​

    this.x = 400 * cos(this.angle);

    this.y = 350 * sin(this.angle);

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

    this.y2 = this.y + 10 * sin(-this.angle);

​

    bezier(0, 0, 0, 0, this.x2, this.y2, this.x, this.y);

​

    pop();

  }

}

​