The Seam

// #101 つぎめ / The Seam
// One line of handwriting, written loop by loop across the page.
// The data has two seams that only the writer knows about.
//   Entry: the loops keep their size, only the slant changes by 4 degrees.
//          A few loops later, they become small.
//   Return: after the small loops come seven turning circles, all the same.
//           The writer's return falls between the fourth and the fifth.
//           Nothing visible changes there.
export default function sketch(p) {
  const W = 720, H = 720;
  const LEFT = 64, RIGHT = 656, TOP = 118, ROW = 98;
  const PER_FRAME = 5;
  const HOLD = 420;

  let pts = [];          // {x, y, lift, side} side: 0 now, 1 then
  let shown = 0;
  let startFrame = 0;

  // pen state while building
  let px, row, slant, seed, side;

  const baseY = () => TOP + row * ROW;

  const push = (x, y, lift = false) => {
    const b = baseY();
    const n = (p.noise(seed + x * 0.02, row * 3.1) - 0.5) * 2.2;
    const sx = x - (y - b) * Math.tan(slant);
    pts.push({ x: sx, y: y + n, lift, side });
  };

  const wrapIfNeeded = (need) => {
    if (px + need > RIGHT) {
      row++;
      px = LEFT + p.random(-4, 4);
      return true;
    }
    return false;
  };

  // a cursive loop of height s; advances 2.2*s
  const loop = (s) => {
    const adv = 2.2 * s;
    const lifted = wrapIfNeeded(adv);
    const c = adv / p.TWO_PI;
    const steps = Math.max(18, Math.round(s * 3.2));
    for (let i = 0; i <= steps; i++) {
      const t = (i / steps) * p.TWO_PI;
      push(px + c * t - s * 0.9 * Math.sin(t), baseY() - s * (1 - Math.cos(t)),
        lifted && i === 0);
    }
    px += adv;
  };

  // a turning circle: the pen goes round once in place, then moves on
  const turn = (r) => {
    const adv = 2.6 * r;
    const lifted = wrapIfNeeded(adv);
    const cx = px + r, cy = baseY() - r;
    const steps = 44;
    for (let i = 0; i <= steps; i++) {
      const t = Math.PI / 2 + (i / steps) * p.TWO_PI; // start at the bottom
      push(cx + r * Math.cos(t), cy + r * Math.sin(t), lifted && i === 0);
    }
    // short connecting stroke along the baseline
    for (let i = 1; i <= 6; i++) push(cx + (adv - r) * (i / 6), baseY());
    px += adv;
  };

  const build = () => {
    pts = [];
    row = 0; px = LEFT; slant = 0; seed = 10.0; side = 0;
    const BIG = 13, SMALL = 6.5, R = 8;
    for (let i = 0; i < 41; i++) loop(BIG);
    // the writer's entry: only the slant changes
    side = 1; slant = p.radians(4); seed = 50.0;
    for (let i = 0; i < 6; i++) loop(BIG);
    // the size cue
    for (let i = 0; i < 64; i++) loop(SMALL);
    // seven circles; the writer returns after the fourth
    for (let i = 0; i < 7; i++) {
      if (i === 4) { side = 0; slant = 0; seed = 90.0; }
      turn(R);
    }
    while (row < 6) loop(BIG);
    // drop whatever spilled onto a seventh row
    pts = pts.filter((q) => q.y < TOP + 5.6 * ROW);
  };

  p.setup = () => {
    p.createCanvas(W, H);
    p.randomSeed(101);
    p.noiseSeed(101);
    build();
    startFrame = p.frameCount;
  };

  p.draw = () => {
    p.background(18, 18, 24);
    const age = p.frameCount - startFrame;
    shown = Math.min(pts.length, age * PER_FRAME);
    if (age * PER_FRAME > pts.length + HOLD * PER_FRAME) {
      startFrame = p.frameCount;
      shown = 0;
    }

    p.noFill();
    p.strokeWeight(1.4);
    p.strokeJoin(p.ROUND);
    p.stroke(232, 226, 212, 230);
    p.beginShape();
    for (let i = 0; i < shown; i++) {
      const q = pts[i];
      if (q.lift && i > 0) { p.endShape(); p.beginShape(); }
      p.vertex(q.x, q.y);
    }
    p.endShape();

    if (shown > 0 && shown < pts.length) {
      const q = pts[shown - 1];
      p.noStroke();
      p.fill(255, 236, 200, 220);
      p.circle(q.x, q.y, 4);
    }
  };
}