origin breathes

let playB = true;
let hive = [];
let cnt = 0;
let t = 0;
let initV = true;
function setup() {
  cnv = createCanvas(600, 600);
  n = 50;
  d = width / n;
  background(255);
  fill(255);
  stroke(200);
  hexGrid();
  background(255);
}
function draw() {
  if (!playB) {
    frameCount--;
  }
  translate(width / 2, height / 2);
  t = TWO_PI * sin(frameCount / 500) * sin(frameCount / 500);
  t2 = frameCount / 3000;
  background(
    40 + 232 * cos(t2) * cos(t2),
    50 + 253 * cos(t2) * cos(t2),
    80 + 255 * cos(t2) * cos(t2),
    15
  );
  noStroke();
  fill(255);
  translate(0, d * 5.18 * 2);
  for (let i = 0; i < hive.length; i++) {
    hive[i].display();
    hive[i].move();
  }
}

function hexGrid() {
  for (let j = 0; j < n; j++) {
    for (let i = 0; i < n; i++) {
      if (j % 2 == 0) {
        x = d * j * 1.5 - width / 2;
        y = i * d * sqrt(3) - height / 2;
      } else {
        x = d * j * 1.5 - width / 2;
        y = i * d * sqrt(3) + d * 0.87 - height / 2;
      }
      cnt++;
      hexi(x + d * 2, y, d);
      if (initV) {
        makeCells(cnt, x, y);
      }
    }
  }
  initV = false;
}

function hexi(x1, y1, r) {
  beginShape();
  for (let a = 0; a < TWO_PI; a += TWO_PI / 6) {
    vertex(x1 + cos(a) * r, y1 + sin(a) * r);
  }
  endShape(CLOSE);
}

class cellS {
  constructor(x, y, r1, g1, b1) {
    this.x = x;
    this.y = y;
    this.color = color(
      r1 + random(-20, 20),
      g1 + random(-20, 20),
      b1 + random(-20, 20)
    );
    this.color2 = color(
      r1 + random(-20, 20),
      g1 + random(-20, 20),
      b1 + random(-20, 20)
    );
    this.var1 = random(0, d * 2);
    this.x1 = this.x;
    this.y1 = this.y;
  }
  display() {
    push();
    let g1 = d + this.var1 * sin((t * this.var1) / 10);
    let g2 = d + (this.var1 * sin((t * this.var1) / 5) * cos(t)) / 2;
    fill(this.color);
    hexi(this.x + d * 2, this.y, g1);
    push();
    scale(-1, 1);
    translate(3 * d, 0);
    hexi(this.x, this.y, g1);
    pop();
    fill(this.color2);
    hexi(this.x + d * 2, this.y, g2);
    push();
    scale(-1, 1);
    translate(3 * d, 0);
    hexi(this.x, this.y, g2);
    pop();
    pop();
  }
  move() {
    push();
    this.x = this.x1 + this.var1 * sin(t) - (this.var1 / 2) * sin(t / 3);
    this.y = (this.y1 / 3) * sin(t / 2) + this.y1;
    pop();
  }
}
function makeCells(cnt, x, y) {
  for (let i = 0; i < c1A.length; i++) {
    if (cnt === c1A[i]) {
      hive.push(new cellS(x, y, 35, 89, 110));
    }
  }
  for (let i = 0; i < c2A.length; i++) {
    if (cnt === c2A[i]) {
      hive.push(new cellS(x, y, 109, 176, 179));
    }
  }
  for (let i = 0; i < c3A.length; i++) {
    if (cnt === c3A[i]) {
      hive.push(new cellS(x, y, 178, 233, 235));
    }
  }
}

let c1A = [159, 158, 208, 209, 210, 258, 259];
let c2A = [157, 156, 206, 255, 305, 355, 406, 455, 505];
let c3A = [
  554,
  555,
  556,
  557,
  558,
  559,
  604,
  605,
  606,
  607,
  608,
  609,
  610,
  611,
  612,
  653,
  654,
  655,
  656,
  657,
  658,
  659,
  660,
  661,
  662,
  663,
  664,
  703,
  704,
  705,
  706,
  707,
  708,
  709,
  710,
  711,
  712,
  713,
  714,
  715,
  716,
  717,
  752,
  753,
  754,
  755,
  756,
  757,
  758,
  759,
  760,
  761,
  762,
  763,
  764,
  765
];

function mousePressed() {
  playB = !playB;
}

function keyPressed() {
  if (keyCode === 83) {
    save(cnv, "origin breathes", "png");
  }
}