@audiofool/moondog 0.1.0 → 0.2.0-beta.3

package/src/surfaces/cli/terminal-art.mjs

@@ -3,7 +3,15 @@ export const LOGO_MOTION_INTERVAL_MS = 125;
 
 const turn = Math.PI * 2;
 
-const dog = [
+/** Record layers from faintest to strongest, matching the logo's fine grooves and solid dog. */
+export const RECORD_LAYERS = Object.freeze({ groove: 1, surface: 2, figure: 3 });
+
+// The dog's eye, in the record's unit coordinates; layouts line the title up with it.
+const eye = [0.22, -0.13];
+
+// The dog's outline runs through these points as one smooth curve (smoothOutline, below), so it
+// keeps its shape without the facets of straight segments between them.
+const dogPoints = [
   [-0.62, 0.48], [-0.55, 0.29], [-0.47, 0.08], [-0.42, -0.16],
   [-0.4, -0.34], [-0.32, -0.47], [-0.18, -0.61], [-0.17, -0.44],
   [-0.12, -0.43], [-0.1, -0.32], [0.02, -0.27], [0.16, -0.24],
@@ -13,6 +21,26 @@ const dog = [
   [0.07, 0.77], [-0.13, 0.75], [-0.3, 0.7], [-0.48, 0.62],
 ];
 
+// A closed centripetal Catmull-Rom curve through `points`: it passes through every point, and unlike
+// the uniform kind it never loops or overshoots at the sharp turns of the ear and the nose.
+function smoothOutline(points, steps = 10) {
+  const outline = [];
+  const count = points.length;
+  for (let index = 0; index < count; index += 1) {
+    const p = [-1, 0, 1, 2].map((offset) => points[(index + offset + count) % count]);
+    const t = [0];
+    for (let at = 1; at < 4; at += 1) t.push(t[at - 1] + Math.hypot(p[at][0] - p[at - 1][0], p[at][1] - p[at - 1][1]) ** 0.5);
+    for (let step = 0; step < steps; step += 1) {
+      const u = t[1] + (t[2] - t[1]) * step / steps;
+      const mix = (a, b, from, to) => a.map((value, axis) => ((to - u) * value + (u - from) * b[axis]) / (to - from));
+      const [a1, a2, a3] = [mix(p[0], p[1], t[0], t[1]), mix(p[1], p[2], t[1], t[2]), mix(p[2], p[3], t[2], t[3])];
+      outline.push(mix(mix(a1, a2, t[0], t[2]), mix(a2, a3, t[1], t[3]), t[1], t[2]));
+    }
+  }
+  return outline;
+}
+const dog = smoothOutline(dogPoints);
+
 const smallAscii = [
   "                  /",
   "      .-======-. /",
@@ -94,21 +122,25 @@ function bezier(start, first, second, end) {
   });
 }
 
-function drawing(columns, rows) {
+function drawing(columns, rows, cellAspect) {
   const width = columns * 2;
   const height = rows * 4;
+  // Each dot remembers which layer inked it, so callers can tone the record like the logo.
   const dots = new Uint8Array(width * height);
-  const radius = Math.min((width - 4) / 2.35, (height - 4) / 2.24);
+  let layer = RECORD_LAYERS.figure;
+  // A Braille dot is as tall as a quarter cell and as wide as half of one.
+  const stretch = cellAspect / 2;
+  const radius = Math.min((width - 4) / 2.35, (height - 4) * stretch / 2.24);
   const centerX = (width - 1) / 2 - radius * 0.09;
-  const centerY = (height - 1) / 2 + radius * 0.045;
+  const centerY = (height - 1) / 2 + radius * 0.045 / stretch;
   const pixel = 1 / radius;
 
   function scan(left, top, right, bottom, predicate, ink) {
-    for (let y = Math.max(0, Math.floor(centerY + top * radius)); y <= Math.min(height - 1, Math.ceil(centerY + bottom * radius)); y += 1) {
+    for (let y = Math.max(0, Math.floor(centerY + top * radius / stretch)); y <= Math.min(height - 1, Math.ceil(centerY + bottom * radius / stretch)); y += 1) {
       for (let x = Math.max(0, Math.floor(centerX + left * radius)); x <= Math.min(width - 1, Math.ceil(centerX + right * radius)); x += 1) {
         const nx = (x - centerX) / radius;
-        const ny = (y - centerY) / radius;
-        if (predicate(nx, ny, x, y)) dots[y * width + x] = ink ? 1 : 0;
+        const ny = (y - centerY) * stretch / radius;
+        if (predicate(nx, ny, x, y)) dots[y * width + x] = ink ? layer : 0;
       }
     }
   }
@@ -142,21 +174,43 @@ function drawing(columns, rows) {
     const ys = points.map(([, y]) => y);
     scan(Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys),
       (x, y, dx, dy) => insidePolygon(x, y, points)
-        && (!hatch || (dy % 4 < 2 && dx % 9 !== 0)), ink);
+        // The hatch runs diagonally, two dots on and two off, like an engraving's.
+        && (!hatch || (dx + dy) % 4 < 2), ink);
   }
 
-  return { dots, width, height, radius, pixel, circle, disc, line, polygon };
+  const paintLayer = (value) => { layer = value; };
+  return { dots, width, height, radius, centerX, centerY, pixel, circle, disc, line, polygon, paintLayer };
 }
 
-function braille(columns, rows, phase) {
-  const art = drawing(columns, rows);
-  const { radius, pixel, circle, disc, line, polygon } = art;
+// The portrait and the tonearm in the record's unit coordinates: the disc has radius 1 around 0,0.
+const shapes = {
+  headband: bezier([-0.42, -0.03], [-0.47, -0.31], [-0.27, -0.58], [-0.18, -0.59]),
+  ear: [-0.365, -0.005],
+  nose: [0.53, 0.045],
+  arm: [[1.17, -1.095], [0.91, -0.8]],
+  cartridge: [[0.92, -0.845], [0.998, -0.777], [0.808, -0.567], [0.73, -0.635]],
+  // Two short highlights ride fixed grooves as the record turns: the groove's place from the rim, its angle, its length.
+  highlights: [[1, -0.91, 0.12], [3, 2.44, 0.09]],
+};
+
+/** The shapes the record is drawn from, for surfaces that draw it as vectors, such as the window's small mark. */
+export function lunarRecordShapes() {
+  return structuredClone({ dog, eye, ...shapes, earRadius: 0.17, grooves: [1, 0.91, 0.8, 0.66] });
+}
+
+// The record as a field of dots, two across and four down per terminal cell, each marked with its layer.
+function paint(columns, rows, phase, cellAspect) {
+  const art = drawing(columns, rows, cellAspect);
+  const { radius, pixel, circle, disc, line, polygon, paintLayer } = art;
   const detail = radius >= 39 ? 2 : radius >= 27 ? 1 : 0;
   const grooves = detail === 2
     ? [1, 0.975, 0.935, 0.895, 0.85, 0.8, 0.74, 0.67, 0.59, 0.51]
     : detail === 1 ? [1, 0.955, 0.89, 0.82, 0.74, 0.64, 0.53]
       : [1, 0.91, 0.8, 0.66];
-  for (const groove of grooves) circle(0, 0, groove, pixel * 0.95);
+  paintLayer(RECORD_LAYERS.groove);
+  // A full dot keeps each ring continuous through its diagonals without merging neighbours.
+  for (const groove of grooves) circle(0, 0, groove, pixel);
+  paintLayer(RECORD_LAYERS.surface);
 
   const rotation = phase / LOGO_MOTION_FRAMES * turn;
   const cosine = Math.cos(rotation);
@@ -176,7 +230,8 @@ function braille(columns, rows, phase) {
 
   // These short highlights follow fixed grooves; the record geometry never deforms.
   // Painting the portrait afterward keeps the moving surface behind the dog and headphones.
-  for (const [groove, offset, length] of [[grooves[1], -0.91, 0.12], [grooves[3], 2.44, 0.09]]) {
+  for (const [index, offset, length] of shapes.highlights) {
+    const groove = grooves[index];
     const angle = rotation + offset;
     const points = Array.from({ length: 13 }, (_, index) => {
       const position = angle - length + index / 12 * length;
@@ -186,15 +241,18 @@ function braille(columns, rows, phase) {
     disc(Math.cos(angle) * groove, Math.sin(angle) * groove, pixel * 1.1);
   }
 
+  paintLayer(RECORD_LAYERS.figure);
+  // Like the logo, a clear halo separates the dog from the grooves around it.
+  const { headband, ear, nose, arm, cartridge } = shapes;
+  line([...dog, dog[0]], pixel * 4.5, false);
+  line(headband, Math.max(pixel * 7, 0.11), false);
   polygon(dog, false);
   polygon(dog, true, true);
   line([...dog, dog[0]], pixel * 0.8);
 
-  const headband = bezier([-0.42, -0.03], [-0.47, -0.31], [-0.27, -0.58], [-0.18, -0.59]);
   line(headband, Math.max(pixel * 3.5, 0.065));
   line(headband, Math.max(pixel * 1.2, 0.025), false);
-  const earX = -0.365;
-  const earY = -0.005;
+  const [earX, earY] = ear;
   const earRadius = detail > 0 ? 0.157 : 0.17;
   disc(earX, earY, earRadius + pixel * 1.6, false);
   circle(earX, earY, earRadius, pixel * 1.1);
@@ -202,11 +260,10 @@ function braille(columns, rows, phase) {
   if (detail > 0) circle(earX, earY, earRadius * 0.35, pixel);
   else disc(earX, earY, pixel * 0.9);
   // A small eye and nose keep the dog readable before the hatch pattern resolves.
-  disc(0.22, -0.13, pixel * 1.05, false);
-  disc(0.53, 0.045, pixel * 0.85);
+  disc(eye[0], eye[1], pixel * 1.05, false);
+  disc(nose[0], nose[1], pixel * 0.85);
 
-  line([[1.17, -1.095], [0.91, -0.8]], Math.max(pixel * 1.8, 0.03));
-  const cartridge = [[0.92, -0.845], [0.998, -0.777], [0.808, -0.567], [0.73, -0.635]];
+  line(arm, Math.max(pixel * 1.8, 0.03));
   polygon(cartridge, true);
   line([...cartridge, cartridge[0]], pixel);
   disc(0.914, -0.764, Math.max(pixel * 0.7, 0.021), false);
@@ -216,16 +273,36 @@ function braille(columns, rows, phase) {
   const contact = [Math.cos(angle) * 0.928, Math.sin(angle) * 0.928];
   disc(contact[0], contact[1], pixel * (0.95 + pulse * 0.15));
 
+  return art;
+}
+
+function braille(columns, rows, phase, cellAspect) {
+  const art = paint(columns, rows, phase, cellAspect);
+  const { radius } = art;
   const bit = [[1, 8], [2, 16], [4, 32], [64, 128]];
-  return Array.from({ length: rows }, (_, row) => Array.from({ length: columns }, (_, column) => {
-    let mask = 0;
-    for (let y = 0; y < 4; y += 1) {
-      for (let x = 0; x < 2; x += 1) {
-        if (art.dots[(row * 4 + y) * art.width + column * 2 + x]) mask |= bit[y][x];
+  const tones = [];
+  const lines = Array.from({ length: rows }, (_, row) => {
+    const rowTones = [];
+    const line = Array.from({ length: columns }, (_, column) => {
+      let mask = 0;
+      let tone = 0;
+      for (let y = 0; y < 4; y += 1) {
+        for (let x = 0; x < 2; x += 1) {
+          const value = art.dots[(row * 4 + y) * art.width + column * 2 + x];
+          if (value) mask |= bit[y][x];
+          tone = Math.max(tone, value);
+        }
       }
-    }
-    return mask ? String.fromCodePoint(0x2800 + mask) : " ";
-  }).join(""));
+      rowTones.push(tone);
+      return mask ? String.fromCodePoint(0x2800 + mask) : " ";
+    }).join("");
+    tones.push(rowTones);
+    return line;
+  });
+  // The disc's own center in cells; the tonearm reaches past it, so layouts align on this.
+  const stretch = cellAspect / 2;
+  const cell = (x, y) => [(art.centerX + x * radius + 0.5) / 2, (art.centerY + y * radius / stretch + 0.5) / 4];
+  return { lines, tones, center: cell(0, 0), eye: cell(...eye), radius: [radius / 2, radius / stretch / 4] };
 }
 
 function ascii(columns, rows, phase) {
@@ -252,27 +329,55 @@ function ascii(columns, rows, phase) {
       if (animated[y]?.[x] !== undefined) animated[y][x] = mark;
     }
   }
-  return Array.from({ length: rows }, (_, row) => {
+  const lines = Array.from({ length: rows }, (_, row) => {
     const content = animated[row - top]?.join("") ?? "";
     return (" ".repeat(left) + content).slice(0, columns).padEnd(columns);
   });
+  const [centerX, centerY, radiusX, radiusY] = selected?.orbit ?? [width / 2, template.length / 2, width / 2, template.length / 2];
+  return {
+    lines,
+    center: [left + centerX + 0.5, top + centerY + 0.5],
+    eye: [left + centerX + eye[0] * radiusX + 0.5, top + centerY + eye[1] * radiusY + 0.5],
+    radius: [radiusX, radiusY],
+  };
 }
 
 /**
  * Original terminal drawing, composed from geometry and hand-lettered ASCII.
- * Braille uses a 2-by-4 dot grid with square dots for a typical 1:2 terminal cell.
+ * Braille uses a 2-by-4 dot grid; cellAspect (cell height over width) keeps the record round,
+ * and the default 2 suits a typical 1:2 terminal cell.
  * phase advances the moon surface and groove highlights through an eight-second loop.
  * The portrait and cartridge stay fixed; scheduling and motion preferences belong to the caller.
+ * Every cell also gets a RECORD_LAYERS tone, so each layer can take its own ink.
  */
-export function renderLunarRecord({ columns = 56, rows = 24, style = "braille", phase = 0 } = {}) {
+export function renderLunarRecordLayers({ columns = 56, rows = 24, style = "braille", phase = 0, cellAspect = 2 } = {}) {
   const width = Number.isFinite(columns) ? Math.max(0, Math.floor(columns)) : 56;
   const height = Number.isFinite(rows) ? Math.max(0, Math.floor(rows)) : 24;
-  if (!width || !height) return Array.from({ length: height }, () => "");
+  if (!width || !height) {
+    const center = [width / 2, height / 2];
+    return { lines: Array.from({ length: height }, () => ""), tones: Array.from({ length: height }, () => []), center, eye: center, radius: center };
+  }
   const frame = Number.isFinite(phase)
     ? ((Math.floor(phase) % LOGO_MOTION_FRAMES) + LOGO_MOTION_FRAMES) % LOGO_MOTION_FRAMES
     : 0;
-  if (style === "ascii" || width < 20 || height < 9) return ascii(width, height, frame);
-  return braille(width, height, frame);
+  if (style === "ascii" || width < 20 || height < 9) {
+    // Hand-lettered ASCII has no separable layers; it keeps one ink.
+    const { lines, ...geometry } = ascii(width, height, frame);
+    return { lines, ...geometry, tones: lines.map((line) => Array.from(line, (character) => character === " " ? 0 : RECORD_LAYERS.figure)) };
+  }
+  const aspect = Number.isFinite(cellAspect) ? Math.min(3, Math.max(1.5, cellAspect)) : 2;
+  return braille(width, height, frame, aspect);
+}
+
+/**
+ * The same record as dots rather than Braille characters, for surfaces that draw their own dots,
+ * such as the desktop window's canvas. Dots sit on a square grid of width x height, row by row;
+ * each holds 0 or the RECORD_LAYERS value that inked it.
+ */
+export function renderLunarRecordDots({ columns = 56, rows = 28, phase = 0 } = {}) {
+  const frame = Number.isFinite(phase) ? ((Math.floor(phase) % LOGO_MOTION_FRAMES) + LOGO_MOTION_FRAMES) % LOGO_MOTION_FRAMES : 0;
+  const { dots, width, height } = paint(Math.max(10, Math.floor(columns)), Math.max(5, Math.floor(rows)), frame, 2);
+  return { dots, width, height };
 }
 
 /** Five-pixel letterforms, packed into three terminal rows without color or escapes. */