meditation of frank

let frankGraveyard;
let cKall;
let c;
let frank;
let t;
let colors = [];

function preload() {
  cKall = loadSound("/assets/Catz1.m4a");
}

function setup() {
  c = min(windowWidth, windowHeight) * 0.9;
  frankGraveyard = createCanvas(c, c);
  strokeWeight(0.5);
  manifestFrank();
  frankMood();
  angleMode(DEGREES);
}

function draw() {
  background(100, 100, 150, 20);
  t = frameCount;
  frank.beSeen();
  frank.ckreep();
  if (killFrank()) {
    cKall.play();
    manifestFrank();
    frankMood();
  }
}

function frankMood() {
  let r1 = random(50, 120);
  let g1 = random(30, 75);
  let b1 = random(30, 70);
  for (let i = 0; i < 10; i++) {
    colors[i] = color(
      r1 + 150 - sin(i) * 12,
      g1 + 150 - cos(i) * 12,
      b1 + 150 - i * 12,
      150
    );
  }
}

function manifestFrank() {
  frank = new Ckreature(c / 2, c / 2, random(15, 30));
}

function killFrank() {
  return frank.attentionLeft > 150;
}

function checkMouse(x, y) {
  return dist(mouseX, mouseY, x, y) <= 25 / 2;
}

class Ckreature {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.diameter = d;
    this.ySpeed = random(0.4, 0.8);
    this.xSpeed = random(0.4, 0.8);
    this.attentionLeft = random(d / 2, d);
  }

  ckreep() {
    if (this.y > height - this.diameter / 2) {
      this.ySpeed = this.ySpeed * -1;
    } else if (this.y < this.diameter / 2) {
      this.ySpeed = this.ySpeed * -1;
    }

    if (this.x > width - this.diameter / 2) {
      this.xSpeed = this.xSpeed * -1;
    } else if (this.x < this.diameter / 2) {
      this.xSpeed = this.xSpeed * -1;
    }

    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

  beSeen() {
    if (checkMouse(this.x, this.y)) {
      fill(colors[0]);
      stroke(colors[1]);
      if (this.attentionLeft > 0) {
        this.attentionLeft -= 0.3;
      }
    } else {
      fill(colors[5]);
      stroke(colors[6]);
      if (this.attentionLeft < 150) {
        this.attentionLeft += 0.3;
      }
    }

    circle(this.x, this.y, this.diameter + this.attentionLeft);
    fill(colors[4]);
    stroke(255, 255, 255, 50);
    circle(this.x, this.y, this.diameter);
    noFill();
    stroke(0);
    let x1 = this.x + this.diameter / 3;
    let y1 = this.y - this.diameter / 3;
    let rx = this.diameter / 2 + (this.diameter / 2) * sin(t);
    let ry = this.diameter / 1.5;
    let theta1 = 0;
    let theta2 = 90;
    arc(x1, y1, rx, ry, theta1, theta2);
    fill(0);
    circle(x1 + (rx / 2) * cos(0), y1 + ry * sin(0), 5);
    fill(255);
    noStroke();
    circle(x1 + (rx / 2) * cos(0), y1 + ry * sin(0), 3);
    noFill();
    x1 = this.x + this.diameter / 2 + 3;
    stroke(0);
    arc(x1, y1, rx, ry, 0, 90);
    let thetaC = 0;
    fill(0);
    circle(x1 + (rx / 2) * cos(0), y1 + ry * sin(0), 5);
    fill(255);
    noStroke();
    circle(x1 + (rx / 2) * cos(0), y1 + ry * sin(0), 3);
  }
  sckream() {}
}