Parquet deformation sketch with hexagonal "bunnies"

bunnySketch.ts

import p5 from "p5";

export function bunnySketch(p: p5) {
  const hexSize = 28;
  const hexWidth = 2 * hexSize;
  const hexHeight = Math.sqrt(3) * hexSize;
  const horizontalSpacing = (hexWidth * 3) / 4;
  const verticalSpcaing = hexHeight / 2;
  let numRows = Math.ceil(p.windowHeight / verticalSpcaing) + 1;
  let numCols = Math.ceil(p.windowWidth / horizontalSpacing) + 1;
  let t = 0;
  let tVelocity = 0.8;

  p.windowResized = function () {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
    numRows = Math.ceil(p.windowHeight / verticalSpcaing) + 1;
    numCols = Math.ceil(p.windowWidth / horizontalSpacing) + 1;
  };

  p.setup = function () {
    p.createCanvas(p.windowWidth, p.windowHeight);
  };

  p.draw = function () {
    p.background(0);
    p.stroke("#222");
    p.strokeWeight(5);
    for (let row = 0; row < numRows; row++) {
      for (let col = row % 2; col < numCols; col += 2) {
        drawCell(horizontalSpacing * col, verticalSpcaing * row);
      }
    }
    t = (t + tVelocity) % p.height;
  };

  const hexPoints = [
    {
      outside: p.createVector(-hexWidth / 4, -hexHeight / 2),
      midpointDeformation: p.createVector(0, 0),
    },
    {
      outside: p.createVector(-hexWidth / 4, hexHeight / 2),
      midpointDeformation: p.createVector(0.6 * hexSize, 0.25 * hexSize),
    },
    {
      outside: p.createVector(hexWidth / 2, 0),
      midpointDeformation: p.createVector(0.4 * hexSize, 0.4 * hexSize),
    },
  ];

  function drawCell(x: number, y: number) {
    const origin = p.createVector(0, 0);
    p.push();
    p.translate(x, y);
    const extent = (Math.cos(p.map(y - t, 0, p.height, 0, p.TWO_PI)) + 1) / 2;
    hexPoints.forEach(({ outside: point, midpointDeformation }) => {
      const mid = midpoint(point, origin).add(midpointDeformation).mult(extent);
      p.line(point.x, point.y, mid.x, mid.y);
      p.line(mid.x, mid.y, origin.x, origin.y);
    });
    p.pop();
  }

  function midpoint(a: p5.Vector, b: p5.Vector) {
    return p5.Vector.add(a, b).mult(0.5);
  }
}