260830

const W = 800;
const H = 800;
const WORD = "Hamburgefonstiv";
const FONT_SIZE = 30;
const FONT_FAMILY = "Commissioner";
const GAP_CYCLE = 30;
const ROW_DELAY = 0.3;
const GAP_WEIGHT_SCALE = 1.8;
const WEIGHT_MIN = 100;
const WEIGHT_MAX = 900;

let palette = [];

async function setup() {
  createCanvas(W, H);
  await document.fonts.load(
    WEIGHT_MIN + " " + FONT_SIZE + 'px "' + FONT_FAMILY + '"',
  );
  palette = colorArray[1].colors;
}

function wave(i, t) {
  return sin((i / GAP_CYCLE) * TWO_PI + t);
}

function gapWeight(i, t) {
  return 0.15 + (wave(i, t) + 1) * GAP_WEIGHT_SCALE;
}

function letterWeight(i, t) {
  return map(-wave(i, t), -1, 1, WEIGHT_MIN, WEIGHT_MAX);
}

function letterSlant(i, t) {
  return map(wave(i, t), -1, 1, 0, -PI / 15);
}

function setFont(weight) {
  drawingContext.font = weight + " " + FONT_SIZE + 'px "' + FONT_FAMILY + '"';
}

function draw() {
  background(palette[3]);
  fill(palette[4]);

  let t = frameCount * 0.035;
  let rowCount = floor(H / FONT_SIZE);

  for (let row = 0; row < rowCount; row++) {
    let rowT = t - row * ROW_DELAY;
    let y = map(row, 0, rowCount - 1, FONT_SIZE, H);

    let charWidths = [];
    let wordW = 0;
    for (let i = 0; i < WORD.length; i++) {
      setFont(letterWeight(i, rowT));
      let chW = drawingContext.measureText(WORD.charAt(i)).width;
      charWidths.push(chW);
      wordW += chW;
    }

    let extraW = W - wordW;
    if (extraW < 0) {
      extraW = 0;
    }

    let gapCount = WORD.length + 1;
    let weightSum = 0;
    for (let i = 0; i < gapCount; i++) {
      weightSum += gapWeight(i, rowT);
    }

    let x = 0;
    for (let i = 0; i < WORD.length; i++) {
      x += (extraW * gapWeight(i, rowT)) / weightSum;
      setFont(letterWeight(i, rowT));
      push();
      translate(x, y);
      shearX(letterSlant(i, rowT));
      drawingContext.fillText(WORD.charAt(i), 0, 0);
      pop();
      x += charWidths[i];
    }
  }
}

const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: [
      "#9dbdba",
      "#f8b042",
      "#e47763",
      "#253276",
      "#dfdad3",
      "#FFFFFF",
      "#000000",
    ],
  },
];