上下の帯は、
絵のあとで描く。

function draw() {
  // 1. 絵。粒子でも映像でも、ここまでが「中身」。
  drawPicture();
  // 2. 端を少し落とす。帯の黒がなじむ。
  drawVignette();
  // 3. 上の塗り → 上の文字。文字は塗りのあと。
  drawTopOverlay();
  // 4. 下の塗り → 下の文字。
  drawBottomOverlay();
  // 5. ガイドは確認用。書き出す前に消す。
  if (showGuides) drawSafeGuides();
}

const DW = 1920;
const DH = 1080;

function setup() {
  createCanvas(960, 540);
  pixelDensity(1);
}

function draw() {
  background(8);
  // scale() しても width / height はキャンバス実寸のまま。
  // 帯の計算は DW / DH で行う。
  const s = min(width / DW, height / DH);
  const ox = (width - DW * s) / 2;
  const oy = (height - DH * s) / 2;
  push();
  translate(ox, oy);
  scale(s);
  drawPicture();
  drawTopOverlay();
  drawBottomOverlay();
  pop();
}

// キャンバスは 1920×1080、pixelDensity(1) を想定。
// このとき width = 1920, height = 1080。
const TOP_H = 112;
const INSET = 96;

function drawTopOverlay() {
  const ctx = drawingContext;
  // 上端は濃く、帯の下端で透明。境界線を作らない。
  const g = ctx.createLinearGradient(0, 0, 0, TOP_H);
  g.addColorStop(0, "rgba(6, 6, 8, 0.75)");
  g.addColorStop(0.55, "rgba(6, 6, 8, 0.34)");
  g.addColorStop(1, "rgba(6, 6, 8, 0)");
  ctx.save();
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, width, TOP_H);
  ctx.restore();

  // 収録ランプ。ビートでは透明度だけを動かす。
  noStroke();
  fill(255, 90, 31);
  circle(INSET, 36, 8);

  textFont("IBM Plex Sans JP");
  textAlign(LEFT, BASELINE);
  textSize(15);
  fill(244, 239, 230, 190);
  ctx.letterSpacing = "0.18em";
  text("MV STUDY  /  01", INSET + 18, 42);
  ctx.letterSpacing = "0px";

  textFont("Shippori Mincho");
  textSize(42);
  fill(246, 242, 234);
  text("夜の枠線", INSET, 84);

  // 右上は「いまどの区間か」とタイムコード。
  textFont("IBM Plex Sans JP");
  textAlign(RIGHT, BASELINE);
  textSize(13);
  fill(244, 239, 230, 170);
  text("Aメロ", width - INSET, 40);

  textFont("IBM Plex Mono");
  textSize(22);
  fill(246, 242, 234);
  text(timecode(t), width - INSET, 70);

  // プログレスは帯の下端。絵の中央には置かない。
  const span = width - INSET * 2;
  noStroke();
  fill(255, 255, 255, 36);
  rect(INSET, TOP_H - 8, span, 3);
  fill(255, 90, 31);
  rect(INSET, TOP_H - 8, span * (t / duration), 3);
}

function timecode(seconds) {
  const fps = 30;
  const frames = Math.floor(seconds * fps);
  const ff = frames % fps;
  const total = Math.floor(frames / fps);
  const mm = Math.floor(total / 60);
  const ss = total % 60;
  const pad = (n) => String(n).padStart(2, "0");
  return pad(mm) + ":" + pad(ss) + ":" + pad(ff);
}

const BOTTOM_H = 176;
const INSET = 96;

function drawBottomOverlay() {
  const y = height - BOTTOM_H;
  const ctx = drawingContext;
  const g = ctx.createLinearGradient(0, y, 0, height);
  g.addColorStop(0, "rgba(6, 6, 8, 0)");
  g.addColorStop(0.42, "rgba(6, 6, 8, 0.38)");
  g.addColorStop(1, "rgba(6, 6, 8, 0.72)");
  ctx.save();
  ctx.fillStyle = g;
  ctx.fillRect(0, y, width, BOTTOM_H);
  ctx.restore();

  // 主行。ベースラインは下端から 86px。帯の高さを変えてもこの値は維持する。
  textFont("Shippori Mincho");
  textAlign(LEFT, BASELINE);
  textSize(46);
  fill(246, 242, 234);
  text(line.text, INSET, height - 86);

  // 行の進み。文字幅に対する割合なので、帯の幅とは独立。
  const w = textWidth(line.text) * line.progress;
  noStroke();
  fill(255, 90, 31);
  rect(INSET, height - 76, w, 2);

  // 次行は同じ x、小さい、薄い。
  textFont("IBM Plex Sans JP");
  textSize(22);
  fill(244, 239, 230, 120);
  text(line.next, INSET, height - 46);

  textSize(13);
  fill(244, 239, 230, 140);
  text("枠線バンド    設計図    1920×1080", INSET, height - 22);
}

// ローワーサードは全面の帯ではない。
// 下から三分の一に、幅 40–55% のカードを置く。
function drawLowerThird() {
  const cardW = 980;
  const cardH = 156;
  const x = 96;
  const y = height - 48 - cardH;

  noStroke();
  fill(8, 8, 10, 210);
  rect(x, y, cardW, cardH);
  fill(255, 90, 31);
  rect(x, y, 4, cardH);

  textFont("IBM Plex Sans JP");
  textAlign(LEFT, BASELINE);
  textSize(13);
  fill(255, 90, 31);
  drawingContext.letterSpacing = "0.16em";
  text("Aメロ", x + 28, y + 32);
  drawingContext.letterSpacing = "0px";

  textFont("Shippori Mincho");
  textSize(36);
  fill(246, 242, 234);
  text(line.text, x + 28, y + cardH * 0.62);

  textFont("IBM Plex Sans JP");
  textSize(16);
  fill(244, 239, 230, 140);
  text(line.next, x + 28, y + cardH * 0.84);
}

const INSET = 96;

// since = 行が始まってからの秒。0.45秒で着地。
const e = easeOutCubic(min(1, since / 0.45));

textFont("Shippori Mincho");
textAlign(LEFT, BASELINE);
textSize(46);

// 出ていく行は上へ、消える。
if (prev && e < 1) {
  fill(246, 242, 234, 255 * (1 - e));
  text(prev, INSET, (height - 86) - 26 * e);
}
// 入ってくる行は 18px 下から、ベースラインへ。
fill(246, 242, 234, 255 * e);
text(current, INSET, (height - 86) + (1 - e) * 18);

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

let t = 0;
const duration = 36;
const lines = [
  { t: 0, section: "Aメロ", text: "画面の上で、名前が灯る" },
  { t: 4, section: "Aメロ", text: "下のほうで、言葉が息をする" },
  { t: 8, section: "Aメロ", text: "真ん中は、月のために空けて" },
  { t: 12, section: "Bメロ", text: "帯は、絵が終わってから" },
];

function setup() {
  const c = createCanvas(1920, 1080);
  pixelDensity(1);
  c.elt.style.width = "100%";
  c.elt.style.height = "auto";
  textFont("serif");
}

function draw() {
  t += deltaTime / 1000;
  if (t > duration) t = 0;
  drawPicture(t);
  drawTop(t);
  drawBottom(t);
}

function drawPicture(time) {
  background(18, 22, 38);
  noStroke();
  fill(244, 236, 224);
  circle(1400, 280, 140);
  fill(255, 90, 31, 40);
  rect(0, 790, width, 4);
}

function drawTop(time) {
  const h = 112;
  const ctx = drawingContext;
  const g = ctx.createLinearGradient(0, 0, 0, h);
  g.addColorStop(0, "rgba(6,6,8,0.75)");
  g.addColorStop(1, "rgba(6,6,8,0)");
  ctx.save();
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, width, h);
  ctx.restore();

  const line = lineAt(time);
  fill(246, 242, 234);
  textAlign(LEFT, BASELINE);
  textSize(40);
  text("夜の枠線", 96, 84);
  textAlign(RIGHT, BASELINE);
  textSize(22);
  text(line.section, width - 96, 70);

  noStroke();
  fill(255, 90, 31);
  rect(96, h - 8, (width - 192) * (time / duration), 3);
}

function drawBottom(time) {
  const h = 176;
  const y = height - h;
  const ctx = drawingContext;
  const g = ctx.createLinearGradient(0, y, 0, height);
  g.addColorStop(0, "rgba(6,6,8,0)");
  g.addColorStop(1, "rgba(6,6,8,0.72)");
  ctx.save();
  ctx.fillStyle = g;
  ctx.fillRect(0, y, width, h);
  ctx.restore();

  const line = lineAt(time);
  fill(246, 242, 234);
  textAlign(LEFT, BASELINE);
  textSize(46);
  text(line.text, 96, height - 86);
  fill(244, 239, 230, 120);
  textSize(22);
  text(line.next, 96, height - 46);
}

function lineAt(time) {
  let i = 0;
  for (let k = 0; k < lines.length; k++) {
    if (lines[k].t <= time) i = k;
  }
  const next = lines[i + 1] ? lines[i + 1].text : lines[0].text;
  return { text: lines[i].text, next, section: lines[i].section };
}