diff --git a/package.json b/package.json index cb763fd..479f74e 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "holidays:sync": "tsx scripts/sync-holidays.ts", "translate:test": "tsx scripts/test-translation.ts", "e2e:ui": "playwright test --ui", - "screen:fonts": "tsx scripts/typography-preview.ts" + "screen:fonts": "tsx scripts/typography-preview.ts", + "brand:variants": "tsx scripts/logo-variants.ts" }, "dependencies": { "@fontsource-variable/inter": "^5.3.0", diff --git a/public/brand/logo-eink.png b/public/brand/logo-eink.png index 7f56643..a129479 100644 Binary files a/public/brand/logo-eink.png and b/public/brand/logo-eink.png differ diff --git a/scripts/brand.ts b/scripts/brand.ts index 733f899..65aa15d 100644 --- a/scripts/brand.ts +++ b/scripts/brand.ts @@ -29,6 +29,21 @@ const LOGO_URL = /** Wide enough to read from the pavement, short enough for a 76px header. */ const EINK_WIDTH = 260; +/** + * Where grey becomes ink. + * + * The wordmark is a Didone: its hairlines are a fraction of its stems, and at + * 260px they land below one pixel. Downscaling averages them into grey, and + * the panel's default mid-grey cut then threw them away — the diagonal of the + * A vanished entirely, leaving a detached serif and something closer to a + * lambda. Letting more grey count as ink keeps the thin strokes whole. + * + * 165 was still not enough: the diagonal came back dotted. 195 holds it solid + * without thickening the stems into mud. Re-check with `npm run brand:variants` + * if the logo is ever replaced — this number belongs to this drawing. + */ +const EINK_THRESHOLD = 195; + async function main(): Promise { const directory = path.join(process.cwd(), 'public', 'brand'); await mkdir(directory, { recursive: true }); @@ -52,7 +67,9 @@ async function main(): Promise { // Reuse the panel's own encoder, so the logo is thresholded by exactly the // rule the rest of the screen is. A line drawing gets no dithering: it would // only fuzz the serifs. - const bitmap = toBitmap(cropped.data, cropped.info.width, cropped.info.height); + const bitmap = toBitmap(cropped.data, cropped.info.width, cropped.info.height, { + threshold: EINK_THRESHOLD, + }); await writeFile(path.join(directory, 'logo-eink.png'), encodePng(bitmap)); console.log(`logo.png ${original.length} bytes (original)`); diff --git a/scripts/logo-variants.ts b/scripts/logo-variants.ts new file mode 100644 index 0000000..a45d8b8 --- /dev/null +++ b/scripts/logo-variants.ts @@ -0,0 +1,91 @@ +/** + * Renders the wordmark at several widths and thresholds. + * + * npm run brand:variants + * + * The shop logo is a Didone: its thin strokes are a fraction of the thick + * ones. Downscaling averages a hairline into grey, and a threshold then has to + * decide whether that grey is ink. Too strict and the diagonal of the A + * disappears; too loose and the whole wordmark turns to mud. The only way to + * choose is to look at the result thresholded, magnified. + */ + +import { mkdir, readFile, writeFile } from 'node:fs/promises'; +import path from 'node:path'; + +import sharp from 'sharp'; + +import { encodePng, toBitmap } from '../lib/screen/encode'; + +const WIDTHS = [260, 320, 400]; +const THRESHOLDS = [127, 165, 195]; + +async function main(): Promise { + const out = path.join(process.cwd(), '.preview', 'logo'); + await mkdir(out, { recursive: true }); + + const source = await readFile(path.join(process.cwd(), 'public', 'brand', 'logo.png')); + const band = await findWordmarkBand(source); + + const rows: string[] = []; + + for (const width of WIDTHS) { + for (const threshold of THRESHOLDS) { + const raw = await sharp(source) + .extract(band) + .resize({ width }) + .flatten({ background: '#ffffff' }) + .ensureAlpha() + .raw() + .toBuffer({ resolveWithObject: true }); + + const bitmap = toBitmap(raw.data, raw.info.width, raw.info.height, { threshold }); + const name = `w${width}-s${threshold}`; + await writeFile(path.join(out, `${name}.png`), encodePng(bitmap)); + + // Magnified to the same apparent size, so the variants compare fairly. + await sharp(path.join(out, `${name}.png`)) + .resize({ width: 1040, kernel: 'nearest' }) + .toFile(path.join(out, `${name}-zoom.png`)); + + rows.push(`${name} ${raw.info.width}x${raw.info.height}`); + } + } + + console.log(rows.join('\n')); +} + +async function findWordmarkBand(source: Buffer) { + const { data, info } = await sharp(source) + .flatten({ background: '#ffffff' }) + .greyscale() + .raw() + .toBuffer({ resolveWithObject: true }); + + let top: number | null = null; + let bottom = 0; + for (let y = 0; y < info.height; y += 1) { + let ink = 0; + for (let x = 0; x < info.width; x += 1) { + if ((data[y * info.width + x] ?? 255) < 128) { + ink += 1; + } + } + if (ink > 0) { + if (top === null) { + top = y; + } + bottom = y; + } else if (top !== null) { + break; + } + } + + const start = Math.max(0, (top ?? 0) - 2); + return { left: 0, top: start, width: info.width, height: bottom + 2 - start + 1 }; +} + +main().catch((error: unknown) => { + console.error(error); + process.exitCode = 1; +});