Catenary Kitty Clouds

let cats = [];
let cArray = [];
let miny = 0,
  nC = 35,
  nStars = 5000,
  t = 0,
  r = 400;
let starArray = [];
let playBool = false;
function preload() {
  cats[0] = loadImage("/assets/CatA.png");
  cats[1] = loadImage("/assets/CatB%202.png");
  cats[2] = loadImage("/assets/CatC%202.png");
  cats[3] = loadImage("/assets/CatD%202.png");
  cats[4] = loadImage("/assets/CatAInv.png");
  cats[5] = loadImage("/assets/CatBInv.png");
  cats[6] = loadImage("/assets/CatC%202Inv.png");
  cats[7] = loadImage("/assets/CatD%202Inv.png");
}
function setup() {
  cnv = createCanvas(500, 5000);
  angleMode(DEGREES);
  starArray[0] = [];
  starArray[1] = [];
  initStars();
  fill(255);
  for (let i = 1; i <= nC + 1; i++) {
    cArray.push(new catenary(i - 2));
  }
  bg = random(0, 20);
}

function draw() {
  stroke(0);
  fill(0, 0, 0, 1);
  background(255);
  push();
  translate(width / 2, height / 2);
  noStroke();
  if (playBool) {
    rotate(t / 5);
    t++;
  }
  for (let i = 0; i < nStars; i++) {
    for (let j = 0; j < 20; j++) {
      if (r != 2) {
        circle(starArray[0][i], starArray[1][i], 500 - j * 10);
      } else {
        circle(starArray[0][i], starArray[1][i], i);
      }
    }
  }
  pop();

  for (let i = nC; i > 1; i--) {
    cArray[i].display();
  }
  push()
  
  translate(450,height-40)
  scale(-0.9,0.9)
  signature();
  pop()
}

function initStars() {
  for (let i = 0; i < nStars; i++) {
    starArray[0][i] = random(-5000, 5000);
    starArray[1][i] = random(-5000, 5000);
  }
}
class catenary {
  constructor(n) {
    this.x = [];
    this.y = [];
    this.cat = [];
    this.miny = 0;
    this.n = n;
    this.d = int(width / (this.n + 1));
    let a = 100;
    this.ymult = 0.3 + 0.03 * this.n;
    this.y[0] =
      (-1 / 2) * a * (exp(-width / 2 / a) + exp(width / 2 / a)) * this.ymult;
    this.x[0] = -width / 2;
    for (let i = 1; i <= this.n + 1; i++) {
      this.x[i] = this.x[i - 1] + this.d;
      this.y[i] =
        (-1 / 2) * a * (exp(this.x[i] / a) + exp(-this.x[i] / a)) * this.ymult;
      this.miny = min(this.y[i], this.miny);
      this.cat[i] = floor(random(0, 8));
    }
  }
  display() {
    push();
    translate(
      width / 2,
      height -
        this.y[ceil(this.n / 2)] -
        this.d -
        (this.n - 1) * (250 - this.n * 3)
    );
    for (let i = 1; i < this.n + 1; i++) {
      line(this.x[i - 1], this.y[i - 1], this.x[i], this.y[i]);
      image(
        cats[this.cat[i]],
        this.x[i] - this.d / 2,
        this.y[i],
        this.d,
        this.d
      );
    }

    line(this.x[this.n], this.y[this.n], width / 2, this.y[0]);
    pop();
  }
}

function mousePressed() {
  cArray = [];
  starArray = [];
  nStars = 2000;
  setup();
  draw();
}

function keyPressed() {
  if (keyCode === 80) {
    playBool = !playBool;
  }
}
function signature() {
  noFill();
  strokeWeight(2);
  stroke(8, 50, 72);
  beginShape();
  for (let i = 400; i > -10; i--) {
    y = i / 15;
    x = 10 * sin(i);
    vertex(x, y);
  }
  endShape();
  circle(-18, 18, 1);
}

function keyPressed(){
  if(keyCode===83){
    save(cnv,"catenary","png")
  }
}