// BioGlyph — FIL example (generated from bio-glyph sources) function expim(im) { return [Math.cos(im), Math.sin(im)]; } function add([rea, ima], [reb, imb]) { return [rea + reb, ima + imb]; } function mul([rea, ima], [reb, imb]) { return [rea * reb - ima * imb, rea * imb + ima * reb]; } function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } /** Ease-in on [0,1]: slow start, fast finish. exponent 1 is linear. */ function easeInProgress(u, exponent) { const e = Math.max(1, exponent); return e === 1 ? u : Math.pow(u, e); } /** Matches app chrome (`index.css` / `.app-root`). */ const CANVAS_BG = "#f6f6f6"; function bboxFromPoints(pts) { let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for (const [x, y] of pts) { minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); } return { minX, minY, maxX, maxY }; } function cumulativeLengths(path) { const n = path.length; const L = new Float64Array(n); let acc = 0; L[0] = 0; for (let i = 1; i < n; i++) { const dx = path[i][0] - path[i - 1][0]; const dy = path[i][1] - path[i - 1][1]; acc += Math.hypot(dx, dy); L[i] = acc; } return { L, total: acc }; } function sampleAtLength(path, cumL, total, s) { if (path.length === 0) return [0, 0]; if (path.length === 1) return [path[0][0], path[0][1]]; const target = clamp(s, 0, 1) * total; const L = cumL; let lo = 0, hi = L.length - 1; while (lo < hi) { const mid = ((lo + hi) / 2) | 0; if (L[mid] < target) lo = mid + 1; else hi = mid; } const i = Math.max(1, lo); const l0 = L[i - 1]; const l1 = L[i]; const t = l1 === l0 ? 0 : (target - l0) / (l1 - l0); const a = path[i - 1]; const b = path[i]; return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]; } function resamplePathByArcLength(path, N) { const clean = []; for (const p of path) { if (!p || p.length < 2) continue; const x = Number(p[0]); const y = Number(p[1]); if (!Number.isFinite(x) || !Number.isFinite(y)) continue; if (clean.length) { const q = clean[clean.length - 1]; if (Math.abs(q[0] - x) < 1e-9 && Math.abs(q[1] - y) < 1e-9) continue; } clean.push([x, y]); } if (clean.length < 2) return clean; const { L, total } = cumulativeLengths(clean); if (!Number.isFinite(total) || total <= 1e-6) return clean.slice(0, N); const out = new Array(N); for (let i = 0; i < N; i++) { out[i] = sampleAtLength(clean, L, total, i / N); } return out; } function centeredComplexFromPoints(pts) { const b = bboxFromPoints(pts); const cx = (b.minX + b.maxX) * 0.5; const cy = (b.minY + b.maxY) * 0.5; return pts.map(([x, y]) => [x - cx, y - cy]); } function kSequence(M) { const K = new Int16Array(M); for (let i = 0; i < M; i++) { const v = ((1 + i) >> 1) * (i & 1 ? -1 : 1); K[i] = v; } return K; } function computeDFT(P, K) { const N = P.length; const DFT = new Array(K.length); for (let ki = 0; ki < K.length; ki++) { const k = K[ki]; let x = [0, 0]; for (let i = 0; i < N; i++) { const a = (k * i * 2 * -Math.PI) / N; x = add(x, mul(P[i], expim(a))); } DFT[ki] = [x[0] / N, x[1] / N]; } return DFT; } function fitToCanvasTransform(width, height, points, margin = 0.86) { const W = width; const H = height; const b = bboxFromPoints(points); const bw = Math.max(b.maxX - b.minX, 1e-6); const bh = Math.max(b.maxY - b.minY, 1e-6); const scale = Math.min(W / bw, H / bh) * margin; return { scale, cx: (b.minX + b.maxX) * 0.5, cy: (b.minY + b.maxY) * 0.5 }; } function findLargestWrapJumpIndex(pts) { if (pts.length < 3) return 0; let bestI = 0; let bestD = -Infinity; for (let i = 0; i < pts.length; i++) { const a = pts[i]; const b = pts[(i + 1) % pts.length]; const d = Math.hypot(b[0] - a[0], b[1] - a[1]); if (d > bestD) { bestD = d; bestI = i; } } return bestI; } /** * Progressive Fourier-series animation for a single closed-ish polyline. * Term count `m` advances along an ease-in curve by default (`mEaseExponent` 2.35): slightly slow while `m` is low, then faster toward full `M`. * Pass `mEaseExponent: 1` for the previous linear ramp. `coeffsPerSecond` still sets overall sweep duration (~`M / coeffsPerSecond` seconds per 0→M pass). * Call returns a cleanup function that stops animation. * * @param {HTMLCanvasElement} canvas * @param {number[][]} oneLinePath points in image pixel space * @param {{ * samples?: number, * epicycles?: number, * fixedM?: number, * outSamples?: number, * fadeAlpha?: number, * strokeStyle?: string, * lineWidth?: number, * coeffsPerSecond?: number, * mEaseExponent?: number, * loop?: boolean, * closeStroke?: boolean, * seamGapFraction?: number, * autoSeam?: boolean, * onComplete?: () => void, * onM?: (m: number) => void, * devicePixelRatio?: number, * maxDevicePixelRatio?: number, * }} [opts] */ function startFourierOneLineAnimation(canvas, oneLinePath, opts = {}) { const ctx = canvas.getContext("2d"); if (!ctx) return () => {}; let cancelled = false; const maxDpr = clamp(opts.maxDevicePixelRatio ?? 3, 1, 4); const winDpr = typeof window !== "undefined" ? window.devicePixelRatio : 1; const dpr = Math.max(1, Math.min(opts.devicePixelRatio ?? winDpr ?? 1, maxDpr)); let cssW = canvas.clientWidth; let cssH = canvas.clientHeight; if (cssW < 1 || cssH < 1) { const parent = canvas.parentElement; const r = parent?.getBoundingClientRect(); if (r && r.width > 0 && r.height > 0) { cssW = Math.max(1, Math.floor(r.width)); cssH = Math.max(1, Math.floor(r.height)); } else { cssW = Math.max(1, canvas.width); cssH = Math.max(1, canvas.height); } } canvas.width = Math.max(1, Math.floor(cssW * dpr)); canvas.height = Math.max(1, Math.floor(cssH * dpr)); canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const samples = clamp(opts.samples ?? 2048, 256, 8192); const M = clamp(opts.epicycles ?? 300, 16, 800); const fixedM = Number.isFinite(opts.fixedM) ? clamp(Math.floor(opts.fixedM), 0, M) : null; const q = clamp(opts.outSamples ?? 1400, 256, 4000); const fadeAlpha = clamp(opts.fadeAlpha ?? 0.04, 0, 1); const strokeStyle = opts.strokeStyle ?? "#141414"; const lineWidth = opts.lineWidth ?? 2.25; const coeffsPerSecond = clamp(opts.coeffsPerSecond ?? 90, 10, 800); const mEaseExponent = clamp(opts.mEaseExponent ?? 2.35, 1, 6); const loop = opts.loop ?? false; const closeStroke = opts.closeStroke ?? false; const autoSeam = opts.autoSeam ?? true; const seamGapFraction = clamp(opts.seamGapFraction ?? 0.07, 0, 0.5); const P0 = resamplePathByArcLength(oneLinePath, samples); if (P0.length < 4) { ctx.fillStyle = CANVAS_BG; ctx.fillRect(0, 0, cssW, cssH); if (typeof opts.onComplete === "function") opts.onComplete(); return () => {}; } // Center in its own coordinate system for a nicer reconstruction. const P = centeredComplexFromPoints(P0); const K = kSequence(M); const DFT = computeDFT(P, K); const { scale } = fitToCanvasTransform(cssW, cssH, P, 0.88); const seamIdx = autoSeam ? findLargestWrapJumpIndex(P) : 0; const phaseOffset = (-2 * Math.PI * seamIdx) / Math.max(1, P.length); let raf = 0; let startT = 0; ctx.lineCap = "round"; ctx.lineJoin = "round"; const drawFrame = (tMs) => { let m = fixedM; if (m === null) { if (!startT) startT = tMs; const elapsed = (tMs - startT) / 1000; // One full 0→M sweep in M/coeffsPerSecond seconds; ease-in makes low m advance slowly then faster. const sweepSec = M / coeffsPerSecond; let u; if (loop) { const local = sweepSec > 0 ? elapsed % sweepSec : 0; u = clamp(local / sweepSec, 0, 1); } else { u = clamp(elapsed / sweepSec, 0, 1); } const progress = easeInProgress(u, mEaseExponent); m = Math.min(M, Math.floor(M * progress)); } if (typeof opts.onM === "function") opts.onM(m); // Slight trailing effect like the Observable reference. ctx.save(); ctx.fillStyle = `rgba(246, 246, 246, ${fadeAlpha})`; ctx.fillRect(0, 0, cssW, cssH); ctx.translate(cssW / 2, cssH / 2); ctx.scale(scale, scale); ctx.beginPath(); for (let ti = 0; ti < q; ti++) { const u = ti / q; const inGap = seamGapFraction > 0 && (u < seamGapFraction * 0.5 || u > 1 - seamGapFraction * 0.5); const a = (ti * 2 * Math.PI) / q + phaseOffset; let p = [0, 0]; for (let i = 0; i < m; i++) { p = add(p, mul(DFT[i], expim(a * K[i]))); } if (ti === 0 || inGap) ctx.moveTo(p[0], p[1]); else ctx.lineTo(p[0], p[1]); } if (closeStroke) ctx.closePath(); ctx.strokeStyle = strokeStyle; ctx.lineWidth = lineWidth / scale; ctx.stroke(); ctx.restore(); if (fixedM !== null) { raf = 0; if (!cancelled && typeof opts.onComplete === "function") opts.onComplete(); return; } if (loop || m < M) raf = requestAnimationFrame(drawFrame); else { raf = 0; if (!cancelled && typeof opts.onComplete === "function") opts.onComplete(); } }; // Initialize background so the first fade doesn't start from transparent. ctx.fillStyle = CANVAS_BG; ctx.fillRect(0, 0, cssW, cssH); if (fixedM !== null) { drawFrame(0); } else { if (typeof opts.onM === "function") opts.onM(0); raf = requestAnimationFrame(drawFrame); } return () => { cancelled = true; if (raf) cancelAnimationFrame(raf); }; } /** * Fourier reconstruction as one or more open polylines in **image pixel space** (same frame as * `oneLinePath`). With `seamGapFraction > 0`, breaks match the canvas animator (`moveTo` at the * gap); with `0` / omitted, returns a single connected sample chain. * * @param {number[][]} oneLinePath * @param {{ * samples?: number, * epicycles?: number, * m?: number, * outSamples?: number, * seamGapFraction?: number, * autoSeam?: boolean, * }} [opts] * @returns {number[][][]} */ function getFourierReconstructionContours(oneLinePath, opts = {}) { const samples = clamp(opts.samples ?? 2048, 256, 8192); const M = clamp(opts.epicycles ?? 300, 16, 800); const m = clamp(Math.floor(opts.m ?? M), 0, M); const q = clamp(opts.outSamples ?? 1500, 256, 4000); const autoSeam = opts.autoSeam ?? true; const seamGapFraction = clamp(opts.seamGapFraction ?? 0, 0, 0.5); const P0 = resamplePathByArcLength(oneLinePath, samples); if (P0.length < 4) return []; const P = centeredComplexFromPoints(P0); const b = bboxFromPoints(P0); const cx = (b.minX + b.maxX) * 0.5; const cy = (b.minY + b.maxY) * 0.5; const K = kSequence(M); const DFT = computeDFT(P, K); const seamIdx = autoSeam ? findLargestWrapJumpIndex(P) : 0; const phaseOffset = (-2 * Math.PI * seamIdx) / Math.max(1, P.length); const useM = Math.min(m, DFT.length); /** @type {number[][][]} */ const segments = []; /** @type {number[][]} */ let current = []; for (let ti = 0; ti < q; ti++) { const u = ti / q; const inGap = seamGapFraction > 0 && (u < seamGapFraction * 0.5 || u > 1 - seamGapFraction * 0.5); const a = (ti * 2 * Math.PI) / q + phaseOffset; let p = [0, 0]; for (let i = 0; i < useM; i++) { p = add(p, mul(DFT[i], expim(a * K[i]))); } const pt = [cx + p[0], cy + p[1]]; if (ti === 0 || inGap) { if (current.length >= 2) segments.push(current); current = [pt]; } else { current.push(pt); } } if (current.length >= 2) segments.push(current); return segments; } const WASM_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm"; const FACE_MODEL = "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task"; const SEG_MODEL = "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_multiclass_256x256/float32/latest/selfie_multiclass_256x256.tflite"; /** FaceLandmarker returns up to this many faces; paths merge left → right with straight bridges. */ const MAX_DETECTED_FACES = 4; let loadPromise = null; /** * Lazily create Face Landmarker + Image Segmenter once; reuse for every extraction. * Shared promise avoids duplicate work under React StrictMode or parallel calls. */ function ensureMediaPipeModels() { if (!loadPromise) { loadPromise = (async () => { const { FaceLandmarker, FilesetResolver, ImageSegmenter } = globalThis.__MP; const fileset = await FilesetResolver.forVisionTasks(WASM_BASE); const faceLandmarker = await FaceLandmarker.createFromOptions(fileset, { baseOptions: { modelAssetPath: FACE_MODEL, delegate: "CPU" }, runningMode: "IMAGE", numFaces: MAX_DETECTED_FACES, }); const imageSegmenter = await ImageSegmenter.createFromOptions(fileset, { baseOptions: { modelAssetPath: SEG_MODEL, delegate: "CPU" }, runningMode: "IMAGE", outputCategoryMask: true, outputConfidenceMasks: false, }); return { faceLandmarker, imageSegmenter, FaceLandmarker }; })(); } return loadPromise; } /** * @mediapipe/tasks-vision JS omits `FaceLandmarker.FACE_LANDMARKS_NOSE` (it is undefined). * Same edges as Python `FaceLandmarksConnections.FACE_LANDMARKS_NOSE` so nose + lips both draw. */ const FACE_LANDMARKS_NOSE = [ { start: 168, end: 6 }, { start: 6, end: 197 }, { start: 197, end: 195 }, { start: 195, end: 5 }, { start: 5, end: 4 }, { start: 4, end: 1 }, { start: 1, end: 19 }, { start: 19, end: 94 }, { start: 94, end: 2 }, { start: 98, end: 97 }, { start: 97, end: 2 }, { start: 2, end: 326 }, { start: 326, end: 327 }, { start: 327, end: 294 }, { start: 294, end: 278 }, { start: 278, end: 344 }, { start: 344, end: 440 }, { start: 440, end: 275 }, { start: 275, end: 4 }, { start: 4, end: 45 }, { start: 45, end: 220 }, { start: 220, end: 115 }, { start: 115, end: 48 }, { start: 48, end: 64 }, { start: 64, end: 98 }, ]; /** Ordered landmark indices along the face-oval cycle (for fills / inside test). */ function orderedFaceOvalIndices(ovalConns) { const adj = new Map(); for (const e of ovalConns) { if (!adj.has(e.start)) adj.set(e.start, []); if (!adj.has(e.end)) adj.set(e.end, []); adj.get(e.start).push(e.end); adj.get(e.end).push(e.start); } const start = Math.min(...adj.keys()); const out = [start]; let prev = null; let cur = start; for (let guard = 0; guard < 128; guard++) { const nbrs = adj.get(cur).filter((n) => n !== prev); if (!nbrs.length) break; const nxt = nbrs[0]; if (nxt === start && out.length > 1) break; out.push(nxt); prev = cur; cur = nxt; } return out; } /** Vertex indices used by a connection list (sorted, unique). */ function idxFromConnections(conns) { const s = new Set(); for (const e of conns) { s.add(e.start); s.add(e.end); } return [...s].sort((a, b) => a - b); } /** Horizontal extent of an eye contour in segmenter mask x (0…mw). */ function eyeXBoundsMaskSpace(lm, eyeConns, mw) { const ix = idxFromConnections(eyeConns); let minX = Infinity; let maxX = -Infinity; for (const i of ix) { const p = lm[i]; if (!p) continue; const x = p.x * mw; minX = Math.min(minX, x); maxX = Math.max(maxX, x); } if (!(minX <= maxX)) return null; return { minX, maxX }; } function cross2(o, a, b) { return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]); } /** Convex hull (monotone chain); matches Python ConvexHull outline for landmark clouds. */ function convexHull2D(points) { if (points.length < 3) return points.slice(); const pts = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]); const lower = []; for (const p of pts) { while (lower.length >= 2 && cross2(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop(); lower.push(p); } const upper = []; for (let i = pts.length - 1; i >= 0; i--) { const p = pts[i]; while (upper.length >= 2 && cross2(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop(); upper.push(p); } upper.pop(); lower.pop(); return lower.concat(upper); } function landmarkPointsPx(lm, indices, cw, ch) { const pts = []; const seen = new Set(); for (const i of indices) { const p = lm[i]; if (!p) continue; const x = p.x * cw, y = p.y * ch; const k = x.toFixed(5) + "," + y.toFixed(5); if (seen.has(k)) continue; seen.add(k); pts.push([x, y]); } return pts; } /** Convex hull ring in image pixel space (closed). */ function convexHullLandmarksImagePx(lm, indices, iw, ih) { const pts = landmarkPointsPx(lm, indices, iw, ih); const hull = convexHull2D(pts); return hull.length >= 3 ? hull : []; } /** Insert edge midpoints once around a closed ring (no duplicate closing vertex). */ function subdivideClosedRingEdges(pts) { const n = pts.length; if (n < 3) return pts.map((p) => [p[0], p[1]]); const out = []; for (let i = 0; i < n; i++) { const a = pts[i]; const b = pts[(i + 1) % n]; out.push([a[0], a[1]]); out.push([(a[0] + b[0]) * 0.5, (a[1] + b[1]) * 0.5]); } return out; } /** One Chaikin corner-cutting pass on a closed polygon. */ function chaikinClosedOnce(pts) { const n = pts.length; if (n < 3) return pts.map((p) => [p[0], p[1]]); const out = []; for (let i = 0; i < n; i++) { const p = pts[i]; const q = pts[(i + 1) % n]; out.push([0.75 * p[0] + 0.25 * q[0], 0.75 * p[1] + 0.25 * q[1]]); out.push([0.25 * p[0] + 0.75 * q[0], 0.25 * p[1] + 0.75 * q[1]]); } return out; } /** * Soften a closed hull ring: optional midpoint subdivision then Chaikin iterations. * Convex input stays visually smooth and convex. */ function smoothClosedHullRing(pts, edgeSubdivisions, chaikinIterations) { let r = pts.map((p) => [p[0], p[1]]); const es = Math.max(0, edgeSubdivisions | 0); const ci = Math.max(0, chaikinIterations | 0); for (let s = 0; s < es; s++) r = subdivideClosedRingEdges(r); for (let c = 0; c < ci; c++) r = chaikinClosedOnce(r); return r; } /** Nose: convex hull of nose landmarks, then rounded for the one-line path / Fourier input. */ const NOSE_HULL_EDGE_SUBDIVISIONS = 1; const NOSE_HULL_CHAIKIN_ITERATIONS = 2; function noseSmoothedHullImagePx(lm, iw, ih) { const hull = convexHullLandmarksImagePx(lm, idxFromConnections(FACE_LANDMARKS_NOSE), iw, ih); if (hull.length < 3) return []; return smoothClosedHullRing(hull, NOSE_HULL_EDGE_SUBDIVISIONS, NOSE_HULL_CHAIKIN_ITERATIONS); } /** Closed loop along face-oval landmark graph in image pixel space (not a hull). */ function faceOvalRingImagePx(lm, ovalConns, iw, ih) { const idx = orderedFaceOvalIndices(ovalConns); const ring = []; for (const i of idx) { const p = lm[i]; if (!p) continue; ring.push([p.x * iw, p.y * ih]); } return ring.length >= 3 ? ring : []; } function maskRingToImagePixels(ring, mw, mh, iw, ih) { if (!ring.length) return []; const sx = iw / mw; const sy = ih / mh; return ring.map(([x, y]) => [x * sx, y * sy]); } /** * Intrinsic pixel size of an image, video frame, or canvas (for layout + MediaPipe). * @param {HTMLImageElement | HTMLVideoElement | HTMLCanvasElement} el */ function getIntrinsicDimensions(el) { if (el instanceof HTMLImageElement) { return { width: el.naturalWidth, height: el.naturalHeight }; } if (el instanceof HTMLVideoElement) { return { width: el.videoWidth, height: el.videoHeight }; } if (el instanceof HTMLCanvasElement) { return { width: el.width, height: el.height }; } return { width: 0, height: 0 }; } /** * @param {HTMLImageElement | HTMLVideoElement | HTMLCanvasElement} el */ function isFaceSourceReady(el) { const { width, height } = getIntrinsicDimensions(el); if (!width || !height) return false; if (el instanceof HTMLImageElement && !el.complete) return false; return true; } /** @param {HTMLImageElement | HTMLVideoElement | HTMLCanvasElement} sourceEl */ function syncOverlaySize(sourceEl, overlay, stageOutlinesEl) { const { width: nw, height: nh } = getIntrinsicDimensions(sourceEl); if (!nw || !nh) return; overlay.width = nw; overlay.height = nh; if (stageOutlinesEl) stageOutlinesEl.style.aspectRatio = `${nw} / ${nh}`; } /** 4-connected components on 0/1 mask. */ function connectedComponents(bin, mw, mh) { const labels = new Int32Array(mw * mh); const areas = new Map(); const stack = []; let nextLabel = 1; for (let i = 0; i < bin.length; i++) { if (bin[i] !== 1 || labels[i]) continue; const id = nextLabel++; let area = 0; stack.push(i); labels[i] = id; while (stack.length) { const cur = stack.pop(); area++; const x = cur % mw; const y = (cur / mw) | 0; if (x > 0) { const nb = cur - 1; if (bin[nb] === 1 && !labels[nb]) { labels[nb] = id; stack.push(nb); } } if (x + 1 < mw) { const nb = cur + 1; if (bin[nb] === 1 && !labels[nb]) { labels[nb] = id; stack.push(nb); } } if (y > 0) { const nb = cur - mw; if (bin[nb] === 1 && !labels[nb]) { labels[nb] = id; stack.push(nb); } } if (y + 1 < mh) { const nb = cur + mw; if (bin[nb] === 1 && !labels[nb]) { labels[nb] = id; stack.push(nb); } } } areas.set(id, area); } return { labels, areas }; } function maskToBinary(u8, mw, mh, category) { const bin = new Uint8Array(mw * mh); for (let i = 0; i < u8.length; i++) if (u8[i] === category) bin[i] = 1; return bin; } function keepLargestComponent(bin, mw, mh) { const { labels, areas } = connectedComponents(bin, mw, mh); if (areas.size === 0) return bin; let best = 0; let bestA = 0; for (const [id, a] of areas) if (a > bestA) { bestA = a; best = id; } const out = new Uint8Array(mw * mh); for (let i = 0; i < bin.length; i++) if (labels[i] === best) out[i] = 1; return out; } /** 3×3 binary erode (full kernel). */ function erodeBinary(bin, mw, mh) { const out = new Uint8Array(mw * mh); for (let y = 1; y < mh - 1; y++) { for (let x = 1; x < mw - 1; x++) { let ok = 1; for (let dy = -1; dy <= 1 && ok; dy++) { for (let dx = -1; dx <= 1; dx++) { if (!bin[(y + dy) * mw + x + dx]) { ok = 0; break; } } } out[y * mw + x] = ok; } } return out; } /** 3×3 binary dilate (full kernel). */ function dilateBinary(bin, mw, mh) { const out = new Uint8Array(mw * mh); for (let y = 1; y < mh - 1; y++) { for (let x = 1; x < mw - 1; x++) { let ok = 0; for (let dy = -1; dy <= 1 && !ok; dy++) { for (let dx = -1; dx <= 1; dx++) { if (bin[(y + dy) * mw + x + dx]) { ok = 1; break; } } } out[y * mw + x] = ok; } } return out; } /** One morphological closing step (3×3 dilate then erode). */ function closeBinaryOnce(bin, mw, mh) { return erodeBinary(dilateBinary(bin, mw, mh), mw, mh); } /** Notebook: binary_opening(binary_closing(ears_all, disk(2)), disk(1)). */ function morphEarsAllLikePython(bin, mw, mh) { let b = bin; b = closeBinaryOnce(b, mw, mh); b = closeBinaryOnce(b, mw, mh); b = erodeBinary(b, mw, mh); b = dilateBinary(b, mw, mh); return b; } function boxBlurFloatSeparate(f, mw, mh, r) { const tmp = new Float32Array(mw * mh); for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { let s = 0, c = 0; for (let dx = -r; dx <= r; dx++) { const xx = x + dx; if (xx >= 0 && xx < mw) { s += f[y * mw + xx]; c++; } } tmp[y * mw + x] = s / c; } } for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { let s = 0, c = 0; for (let dy = -r; dy <= r; dy++) { const yy = y + dy; if (yy >= 0 && yy < mh) { s += tmp[yy * mw + x]; c++; } } f[y * mw + x] = s / c; } } } /** Separable Gaussian blur on float32 mask (notebook `gaussian_filter`). */ function gaussianBlurFloatSeparable(f, mw, mh, sigma) { if (sigma <= 0) return; const radius = Math.max(1, Math.ceil(sigma * 3)); const kernel = new Float32Array(2 * radius + 1); let sum = 0; const s2 = 2 * sigma * sigma; for (let i = -radius; i <= radius; i++) { const v = Math.exp(-(i * i) / s2); kernel[i + radius] = v; sum += v; } for (let i = 0; i < kernel.length; i++) kernel[i] /= sum; const tmp = new Float32Array(mw * mh); for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { let acc = 0; for (let k = -radius; k <= radius; k++) { const xx = Math.min(mw - 1, Math.max(0, x + k)); acc += f[y * mw + xx] * kernel[k + radius]; } tmp[y * mw + x] = acc; } } for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { let acc = 0; for (let k = -radius; k <= radius; k++) { const yy = Math.min(mh - 1, Math.max(0, y + k)); acc += tmp[yy * mw + x] * kernel[k + radius]; } f[y * mw + x] = acc; } } } function morphCloseNTimes(bin, mw, mh, n) { let b = bin; for (let i = 0; i < n; i++) b = closeBinaryOnce(b, mw, mh); return b; } function morphOpenNTimes(bin, mw, mh, n) { let b = bin; for (let i = 0; i < n; i++) { b = erodeBinary(b, mw, mh); b = dilateBinary(b, mw, mh); } return b; } /** * Notebook `smooth_hair_mask`: Gaussian σ, rethreshold 0.5, binary_closing(disk(close_radius)), * binary_opening(disk(open_radius)). Large disks approximated by repeated 3×3 close/open. */ function smoothHairMask(bin, mw, mh, gaussSigma = 7.0, closeRadius = 12, openRadius = 4) { const f = new Float32Array(mw * mh); for (let i = 0; i < bin.length; i++) f[i] = bin[i]; gaussianBlurFloatSeparable(f, mw, mh, gaussSigma); let m = new Uint8Array(mw * mh); for (let i = 0; i < bin.length; i++) m[i] = f[i] >= 0.5 ? 1 : 0; m = morphCloseNTimes(m, mw, mh, closeRadius); m = morphOpenNTimes(m, mw, mh, openRadius); return m; } /** Notebook smooth_ear_mask: Gaussian-ish blur + threshold + close + open. */ function smoothEarMask(bin, mw, mh) { let any = false; for (let i = 0; i < bin.length; i++) { if (bin[i]) { any = true; break; } } if (!any) return bin; const f = new Float32Array(mw * mh); for (let i = 0; i < bin.length; i++) f[i] = bin[i]; boxBlurFloatSeparate(f, mw, mh, 2); boxBlurFloatSeparate(f, mw, mh, 2); let m = new Uint8Array(mw * mh); for (let i = 0; i < bin.length; i++) m[i] = f[i] >= 0.5 ? 1 : 0; m = closeBinaryOnce(m, mw, mh); m = closeBinaryOnce(m, mw, mh); m = closeBinaryOnce(m, mw, mh); m = erodeBinary(m, mw, mh); m = dilateBinary(m, mw, mh); return m; } /** * Filled oval inside **segmenter mask space** (mw×mh). Matches skimage polygon fill; * avoids Canvas isPointInPath vs grid mismatch that traced the jaw along the face oval. */ function rasterizeOvalInsideMask(lm, ovalConns, mw, mh) { const idx = orderedFaceOvalIndices(ovalConns); const c = document.createElement("canvas"); c.width = mw; c.height = mh; const g = c.getContext("2d"); g.beginPath(); idx.forEach((i, k) => { const p = lm[i]; if (!p) return; const x = p.x * mw; const y = p.y * mh; if (k === 0) g.moveTo(x, y); else g.lineTo(x, y); }); g.closePath(); g.fillStyle = "#fff"; g.fill(); const id = g.getImageData(0, 0, mw, mh).data; const inside = new Uint8Array(mw * mh); for (let i = 0; i < mw * mh; i++) { if (id[i * 4 + 3] > 0) inside[i] = 1; } return inside; } /** * Moore–neighbor outer contour (ordered, single closed chain). Avoids angular-sort scribbles. */ function mooreOuterContour(bin, mw, mh) { const get = (x, y) => x >= 0 && x < mw && y >= 0 && y < mh && bin[y * mw + x]; let sx = -1, sy = -1; for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { if (get(x, y) && !get(x - 1, y)) { sx = x; sy = y; break; } } if (sx >= 0) break; } if (sx < 0) return []; const nbrs = [ [1, 0], [1, -1], [0, -1], [-1, -1], [-1, 0], [-1, 1], [0, 1], [1, 1], ]; const contour = []; let x = sx, y = sy; let bx = sx - 1, by = sy; const cap = mw * mh * 8; for (let iter = 0; iter < cap; iter++) { contour.push([x + 0.5, y + 0.5]); let backDir = nbrs.findIndex(([dx, dy]) => x + dx === bx && y + dy === by); if (backDir < 0) backDir = 0; let found = false; for (let step = 1; step <= 8; step++) { const [dx, dy] = nbrs[(backDir + step) % 8]; const nx = x + dx, ny2 = y + dy; if (get(nx, ny2)) { bx = x; by = y; x = nx; y = ny2; found = true; break; } } if (!found) break; if (x === sx && y === sy && contour.length > 2) break; } return dedupeConsecutive(contour); } function dedupeConsecutive(pts) { if (pts.length < 2) return pts; const out = [pts[0]]; for (let i = 1; i < pts.length; i++) { const a = out[out.length - 1], b = pts[i]; if (Math.abs(a[0] - b[0]) > 1e-6 || Math.abs(a[1] - b[1]) > 1e-6) out.push(b); } return out; } function perpDist(p, a, b) { const dx = b[0] - a[0], dy = b[1] - a[1]; if (dx === 0 && dy === 0) return Math.hypot(p[0] - a[0], p[1] - a[1]); const t = ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / (dx * dx + dy * dy); const px = a[0] + t * dx, py = a[1] + t * dy; return Math.hypot(p[0] - px, p[1] - py); } /** Ramer–Douglas–Peucker (open polyline). */ function rdpOpen(pts, eps) { if (pts.length < 3) return pts.slice(); let idx = 0, dmax = 0; const a = pts[0], b = pts[pts.length - 1]; for (let i = 1; i < pts.length - 1; i++) { const d = perpDist(pts[i], a, b); if (d > dmax) { dmax = d; idx = i; } } if (dmax > eps) { const L = rdpOpen(pts.slice(0, idx + 1), eps); const R = rdpOpen(pts.slice(idx), eps); return L.slice(0, -1).concat(R); } return [a, b]; } function simplifyClosedContour(pts, eps) { if (pts.length < 4) return pts; const open = pts.concat([pts[0]]); let s = rdpOpen(open, eps); if (s.length > 1 && s[s.length - 1][0] === s[0][0] && s[s.length - 1][1] === s[0][1]) s = s.slice(0, -1); return s; } function contourFromMask(bin, mw, mh, rdpEps) { const chain = mooreOuterContour(bin, mw, mh); if (chain.length < 3) return []; return simplifyClosedContour(chain, rdpEps); } /** * Ears = face_skin & ~inside_oval on mask grid; morph; split by eye geometry: * - If anatomical left eye is on the image-left (mirrored webcam): left ear = mask x left of left eye; * right ear = mask x right of right eye. * - If anatomical left eye is on the image-right (standard photo): left ear = x past temporal side of * left eye; right ear = x past nasal side of right eye. * Fallback: nose-tip x split if eye bounds are missing. * @returns {{ left: number[][], right: number[][] }} rings in mask grid coordinates */ function earOutlineRingsMaskSpace(u8, mw, mh, lm, ovalConns, FL) { const inside = rasterizeOvalInsideMask(lm, ovalConns, mw, mh); const faceSkin = maskToBinary(u8, mw, mh, 3); let earsAll = new Uint8Array(mw * mh); for (let i = 0; i < earsAll.length; i++) { if (faceSkin[i] && !inside[i]) earsAll[i] = 1; } earsAll = morphEarsAllLikePython(earsAll, mw, mh); const leftEye = eyeXBoundsMaskSpace(lm, FL.FACE_LANDMARKS_LEFT_EYE, mw); const rightEye = eyeXBoundsMaskSpace(lm, FL.FACE_LANDMARKS_RIGHT_EYE, mw); const noseX = lm[1]?.x != null ? lm[1].x * mw : mw * 0.5; const earL = new Uint8Array(mw * mh); const earR = new Uint8Array(mw * mh); for (let i = 0; i < earsAll.length; i++) { if (!earsAll[i]) continue; const mx = i % mw; let goL; let goR; if (leftEye && rightEye) { const leftCx = (leftEye.minX + leftEye.maxX) * 0.5; const rightCx = (rightEye.minX + rightEye.maxX) * 0.5; const leftEyeOnImageLeft = leftCx < rightCx; if (leftEyeOnImageLeft) { goL = mx < leftEye.minX; goR = mx > rightEye.maxX; } else { goL = mx > leftEye.maxX; goR = mx < rightEye.minX; } } else { goL = mx < noseX; goR = mx >= noseX; } if (goL) earL[i] = 1; else if (goR) earR[i] = 1; } let eL = keepLargestComponent(earL, mw, mh); let eR = keepLargestComponent(earR, mw, mh); eL = keepLargestComponent(smoothEarMask(eL, mw, mh), mw, mh); eR = keepLargestComponent(smoothEarMask(eR, mw, mh), mw, mh); return { left: contourFromMask(eL, mw, mh, 0.75), right: contourFromMask(eR, mw, mh, 0.75), }; } /** Hair contour in mask grid coordinates (Moore + RDP). */ function hairOutlineRingMaskSpace(u8, mw, mh) { let hair = maskToBinary(u8, mw, mh, 1); hair = keepLargestComponent(hair, mw, mh); hair = smoothHairMask(hair, mw, mh, 7.0, 12, 4); hair = keepLargestComponent(hair, mw, mh); return contourFromMask(hair, mw, mh, 1.15); } /** * Axis-aligned ROI in segmenter mask pixels around the primary face (hair above, ears sideways). * @returns {{ x0: number, x1: number, y0: number, y1: number } | null} */ function primaryFaceRoiMaskBounds(lm, ovalConns, mw, mh) { const idx = orderedFaceOvalIndices(ovalConns); let minX = mw, maxX = 0, minY = mh, maxY = 0; for (const i of idx) { const p = lm[i]; if (!p) continue; const x = p.x * mw; const y = p.y * mh; minX = Math.min(minX, x); maxX = Math.max(maxX, x); minY = Math.min(minY, y); maxY = Math.max(maxY, y); } if (!(maxX > minX && maxY > minY)) return null; const w = maxX - minX; const h = maxY - minY; const padX = Math.max(8, w * 0.45); const padTop = Math.max(8, h * 0.95); const padBot = Math.max(8, h * 0.35); return { x0: Math.max(0, Math.floor(minX - padX)), x1: Math.min(mw - 1, Math.ceil(maxX + padX)), y0: Math.max(0, Math.floor(minY - padTop)), y1: Math.min(mh - 1, Math.ceil(maxY + padBot)), }; } /** Zero multiclass labels outside ROI so hair/ears follow the same face as FaceLandmarker (category 0 = background). */ function restrictSegmentationMaskToRoi(u8, mw, mh, bounds) { if (!bounds) return u8; const out = new Uint8Array(u8.length); out.set(u8); const { x0, x1, y0, y1 } = bounds; for (let y = 0; y < mh; y++) { for (let x = 0; x < mw; x++) { if (x < x0 || x > x1 || y < y0 || y > y1) out[y * mw + x] = 0; } } return out; } /** @typedef {{ id: string, points: number[][], closed: boolean }} FaceFeature */ /** Mean x (image px) along the face oval — stable left-to-right sort for multi-face merging. */ function faceLandmarkSortKeyX(lm, FL, iw) { const idx = orderedFaceOvalIndices(FL.FACE_LANDMARKS_FACE_OVAL); let sx = 0, n = 0; for (const i of idx) { const p = lm[i]; if (!p) continue; sx += p.x * iw; n++; } return n ? sx / n : 0; } /** * One subject’s feature outlines from landmarks + optional segmentation (mask already ROI-restricted). * @param {unknown} lm * @param {typeof FaceLandmarker} FL * @param {Uint8Array | null} segU8 */ function buildFaceFeaturesForLandmarks(lm, FL, segU8, segMw, segMh, iw, ih) { /** @type {FaceFeature[]} */ const features = []; if (segU8) { const hairRing = hairOutlineRingMaskSpace(segU8, segMw, segMh); const hairPx = maskRingToImagePixels(hairRing, segMw, segMh, iw, ih); if (hairPx.length >= 3) { features.push({ id: "hair", points: hairPx, closed: true, }); } } const oval = faceOvalRingImagePx(lm, FL.FACE_LANDMARKS_FACE_OVAL, iw, ih); /** @type {number[][] | null} */ let leftEarPx = null; /** @type {number[][] | null} */ let rightEarPx = null; if (segU8) { const { left: ringL, right: ringR } = earOutlineRingsMaskSpace( segU8, segMw, segMh, lm, FL.FACE_LANDMARKS_FACE_OVAL, FL, ); const leftPx = maskRingToImagePixels(ringL, segMw, segMh, iw, ih); const rightPx = maskRingToImagePixels(ringR, segMw, segMh, iw, ih); if (leftPx.length >= 3) leftEarPx = leftPx; if (rightPx.length >= 3) rightEarPx = rightPx; } const pushHull = (id, indices) => { const ring = convexHullLandmarksImagePx(lm, indices, iw, ih); if (ring.length >= 3) features.push({ id, points: ring, closed: true }); }; pushHull("lips", idxFromConnections(FL.FACE_LANDMARKS_LIPS)); const nosePts = noseSmoothedHullImagePx(lm, iw, ih); if (nosePts.length >= 3) { features.push({ id: "nose", points: nosePts, closed: true }); } pushHull("leftEye", idxFromConnections(FL.FACE_LANDMARKS_LEFT_EYE)); pushHull("leftEyebrow", idxFromConnections(FL.FACE_LANDMARKS_LEFT_EYEBROW)); pushHull("rightEyebrow", idxFromConnections(FL.FACE_LANDMARKS_RIGHT_EYEBROW)); pushHull("rightEye", idxFromConnections(FL.FACE_LANDMARKS_RIGHT_EYE)); const hasHair = features.some((f) => f.id === "hair" && f.points.length >= 3); if (oval.length >= 3) { let shellPts = oval.map((p) => [p[0], p[1]]); let shellClosed = true; if (hasHair) { const { bottom } = splitFaceShellIntoTopBottom(oval, leftEarPx, rightEarPx); if (bottom.length >= 2) { shellPts = orientBottomArcRightEarToLeftEar(bottom, rightEarPx, leftEarPx); shellClosed = false; } } features.push({ id: "faceShell", points: shellPts, closed: shellClosed, }); } if (hasHair && rightEarPx && rightEarPx.length >= 3) { features.push({ id: "earRight", points: rightEarPx.map((p) => [p[0], p[1]]), closed: true, }); } if (hasHair && leftEarPx && leftEarPx.length >= 3) { features.push({ id: "earLeft", points: leftEarPx.map((p) => [p[0], p[1]]), closed: true, }); } return features; } /** * Loads MediaPipe models on first call (then caches), runs face + segmenter, returns feature outlines * in **source pixel space** (image natural size, video frame, or canvas bitmap). * Up to {@link MAX_DETECTED_FACES} faces; each uses segmentation restricted to that face’s ROI, then * one-line paths are concatenated in **left-to-right** order (implicit straight bridges between faces). * * @param {HTMLImageElement | HTMLVideoElement | HTMLCanvasElement} sourceEl * @returns {Promise<{ ok: true, mergedPath: number[][], features: FaceFeature[], faceCount: number, imageWidth: number, imageHeight: number } | { ok: false, message: string }>} */ async function extractFaceFeaturesFromImage(sourceEl) { if (!isFaceSourceReady(sourceEl)) return { ok: false, message: "Image not ready." }; let faceLandmarker, imageSegmenter, FaceLandmarkerClass; try { ({ faceLandmarker, imageSegmenter, FaceLandmarker: FaceLandmarkerClass } = await ensureMediaPipeModels()); } catch (e) { const msg = e && typeof e === "object" && "message" in e ? String(e.message) : String(e); return { ok: false, message: "Failed to load models: " + msg }; } const { width: iw, height: ih } = getIntrinsicDimensions(sourceEl); const faceRes = faceLandmarker.detect(sourceEl); const segRes = imageSegmenter.segment(sourceEl); const landmarks = faceRes.faceLandmarks ?? []; if (landmarks.length === 0) { return { ok: false, message: "No face detected." }; } const FL = FaceLandmarkerClass; let segU8Full = null, segMw = 0, segMh = 0; if (segRes.categoryMask) { const cm = segRes.categoryMask; segMw = cm.width; segMh = cm.height; segU8Full = new Uint8Array(cm.getAsUint8Array()); } const faces = landmarks.map((lm) => { let segU8 = null; if (segU8Full) { segU8 = new Uint8Array(segU8Full); const roi = primaryFaceRoiMaskBounds(lm, FL.FACE_LANDMARKS_FACE_OVAL, segMw, segMh); segU8 = restrictSegmentationMaskToRoi(segU8, segMw, segMh, roi); } const features = buildFaceFeaturesForLandmarks(lm, FL, segU8, segMw, segMh, iw, ih); return { lm, features }; }); faces.sort((a, b) => faceLandmarkSortKeyX(a.lm, FL, iw) - faceLandmarkSortKeyX(b.lm, FL, iw)); const perFacePaths = faces.map((f) => buildOneLinePath(f.features)); const mergedPath = mergeOneLinePaths(perFacePaths); return { ok: true, mergedPath, features: faces[0].features, faceCount: faces.length, imageWidth: iw, imageHeight: ih, }; } /** No hair: full landmark face oval only (no ears in stroke). */ const ONE_LINE_ORDER_NO_HAIR = ["lips", "nose", "leftEye", "leftEyebrow", "rightEyebrow", "rightEye", "faceShell"]; /** With hair: lips/nose → left → hair → right side → right ear → jaw arc → left ear. */ const ONE_LINE_ORDER_WITH_HAIR = [ "lips", "nose", "leftEye", "leftEyebrow", "hair", "rightEyebrow", "rightEye", "earRight", "faceShell", "earLeft", ]; function oneLineOrderForFeatures(features) { const hasHair = features.some((f) => f.id === "hair" && f.points.length >= 2); return hasHair ? ONE_LINE_ORDER_WITH_HAIR : ONE_LINE_ORDER_NO_HAIR; } function dist2Pt(a, b) { const dx = a[0] - b[0]; const dy = a[1] - b[1]; return dx * dx + dy * dy; } function findClosestPointIndex(points, p) { let bestI = 0; let best = Infinity; for (let i = 0; i < points.length; i++) { const d = dist2Pt(points[i], p); if (d < best) { best = d; bestI = i; } } return bestI; } function polyCentroid2D(pts) { if (!pts.length) return [0, 0]; let sx = 0, sy = 0; for (const p of pts) { sx += p[0]; sy += p[1]; } return [sx / pts.length, sy / pts.length]; } function walkRingForward(pts, iStart, iEnd) { const n = pts.length; const out = [[pts[iStart][0], pts[iStart][1]]]; if (iStart === iEnd) return out; let i = iStart; for (let k = 0; k < n; k++) { i = (i + 1) % n; out.push([pts[i][0], pts[i][1]]); if (i === iEnd) break; } return out; } function meanYArc(arc) { if (!arc.length) return 0; let s = 0; for (const p of arc) s += p[1]; return s / arc.length; } /** Split closed shell into upper (smaller mean y) and lower (jaw/cheeks) arcs. */ function splitFaceShellIntoTopBottom(shellRing, leftEarPx, rightEarPx) { if (shellRing.length < 4) return { top: [], bottom: [] }; const pts = shellRing.map((p) => [p[0], p[1]]); const n = pts.length; let iL, iR; if (leftEarPx?.length >= 2 && rightEarPx?.length >= 2) { iL = findClosestPointIndex(pts, polyCentroid2D(leftEarPx)); iR = findClosestPointIndex(pts, polyCentroid2D(rightEarPx)); } else { let minX = Infinity, maxX = -Infinity; let iMin = 0, iMax = 0; for (let i = 0; i < n; i++) { const x = pts[i][0]; if (x < minX) { minX = x; iMin = i; } if (x > maxX) { maxX = x; iMax = i; } } iL = iMin; iR = iMax; } const arcLR = walkRingForward(pts, iL, iR); const arcRL = walkRingForward(pts, iR, iL); if (meanYArc(arcLR) <= meanYArc(arcRL)) { return { top: arcLR, bottom: arcRL }; } return { top: arcRL, bottom: arcLR }; } /** * Order bottom jaw arc so traversal runs from the oval point near the right ear to the point near * the left ear (short bridges: right ear → first point, last point → left ear). */ function orientBottomArcRightEarToLeftEar(arc, rightEarPx, leftEarPx) { if (arc.length < 2) return arc.map((p) => [p[0], p[1]]); const copy = arc.map((p) => [p[0], p[1]]); const a = copy[0]; const b = copy[copy.length - 1]; const reverse = rightEarPx?.length >= 2 && leftEarPx?.length >= 2 ? dist2Pt(a, polyCentroid2D(rightEarPx)) > dist2Pt(a, polyCentroid2D(leftEarPx)) : a[0] < b[0]; if (reverse) copy.reverse(); return copy; } /** Closed polygon as one open traversal starting at startIdx (no repeated closing vertex). */ function rotateClosedRing(points, startIdx) { const n = points.length; if (n < 2) return points.map((p) => p.slice()); const out = []; for (let k = 0; k < n; k++) { const p = points[(startIdx + k) % n]; out.push([p[0], p[1]]); } return out; } /** * Merge feature rings into one polyline: each closed loop is rotated to meet the previous endpoint, * so the pen never lifts (straight “bridges” between regions when needed). * @param {Array<{ id: string, points: number[][], closed: boolean }>} features * @param {string[]} [orderedIds] * @returns {number[][]} */ function chainFeaturesToOnePath(features, orderedIds = oneLineOrderForFeatures(features)) { const byId = new Map(features.map((f) => [f.id, f])); const faceShellFeat = byId.get("faceShell"); let jawRightPt = null; if (faceShellFeat && faceShellFeat.closed === false && faceShellFeat.points.length >= 2) { const jp = faceShellFeat.points; jawRightPt = [jp[0][0], jp[0][1]]; } /** @type {number[][]} */ const out = []; const eps2 = 0.15 * 0.15; const pushPt = (p) => { if (out.length && dist2Pt(out[out.length - 1], p) <= eps2) return; out.push([p[0], p[1]]); }; for (const id of orderedIds) { const f = byId.get(id); if (!f || f.points.length < 2) continue; let pts = f.points.map((p) => [p[0], p[1]]); if (f.closed && pts.length >= 3) { const anchor = out.length ? out[out.length - 1] : pts[0]; if (id === "earRight" && jawRightPt) { let bestS = 0; let bestOutD = Infinity; let bestInD = Infinity; const n = pts.length; for (let s = 0; s < n; s++) { const rot = rotateClosedRing(pts, s); const dOut = dist2Pt(rot[rot.length - 1], jawRightPt); const dIn = dist2Pt(rot[0], anchor); if (dOut < bestOutD - 1e-12 || (Math.abs(dOut - bestOutD) <= 1e-12 && dIn < bestInD)) { bestOutD = dOut; bestInD = dIn; bestS = s; } } pts = rotateClosedRing(pts, bestS); } else { const i0 = findClosestPointIndex(pts, anchor); pts = rotateClosedRing(pts, i0); } } for (const p of pts) pushPt(p); } return out; } /** * Exported for rendering/animation (e.g. Fourier progressive reconstruction) without forcing * a static canvas stroke. * @param {FaceFeature[]} features * @param {string[]} [order] * @returns {number[][]} */ function buildOneLinePath(features, order) { return chainFeaturesToOnePath(features, order ?? oneLineOrderForFeatures(features)); } /** * Concatenate per-face polylines in order; dedupe vertices at joins (implicit straight bridges). * @param {number[][][]} paths * @returns {number[][]} */ function mergeOneLinePaths(paths) { const eps2 = 0.15 * 0.15; /** @type {number[][]} */ const out = []; for (const path of paths) { if (!path || path.length < 2) continue; for (const p of path) { if (out.length && dist2Pt(out[out.length - 1], p) <= eps2) continue; out.push([p[0], p[1]]); } } return out; } function strokePathSmooth(ctx, path) { if (path.length < 2) return; if (path.length === 2) { ctx.moveTo(path[0][0], path[0][1]); ctx.lineTo(path[1][0], path[1][1]); return; } ctx.moveTo(path[0][0], path[0][1]); for (let i = 1; i < path.length - 1; i++) { const xc = (path[i][0] + path[i + 1][0]) * 0.5; const yc = (path[i][1] + path[i + 1][1]) * 0.5; ctx.quadraticCurveTo(path[i][0], path[i][1], xc, yc); } const last = path[path.length - 1]; ctx.lineTo(last[0], last[1]); } /** Axis-aligned bbox of polyline vertices (path is [x,y][]). */ function bboxFromPathPoints(path) { let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; for (const p of path) { minX = Math.min(minX, p[0]); maxX = Math.max(maxX, p[0]); minY = Math.min(minY, p[1]); maxY = Math.max(maxY, p[1]); } return { minX, minY, maxX, maxY }; } /** * Stroke one polyline in image space (white background, optional fit/center). * @param {HTMLCanvasElement} canvas * @param {number[][]} path * @param {{ lineWidth?: number, strokeStyle?: string, smooth?: boolean, fitAndCenter?: boolean, fitMargin?: number }} [options] */ function drawOneLinePathToCanvas(canvas, path, options = {}) { const lineWidth = options.lineWidth ?? 2.25; const strokeStyle = options.strokeStyle ?? "#141414"; const smooth = options.smooth !== false; const fitAndCenter = options.fitAndCenter !== false; const fitMargin = options.fitMargin ?? 0.92; const ctx = canvas.getContext("2d"); if (!ctx) return; const W = canvas.width; const H = canvas.height; ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, W, H); if (path.length < 2) return; ctx.save(); if (fitAndCenter) { const b = bboxFromPathPoints(path); let { minX, minY, maxX, maxY } = b; const spanX = maxX - minX; const spanY = maxY - minY; const inflate = Math.max(lineWidth * 3, Math.max(spanX, spanY, 1) * 0.04, Math.min(W, H) * 0.01); minX -= inflate; maxX += inflate; minY -= inflate; maxY += inflate; const bw = Math.max(maxX - minX, 1e-6); const bh = Math.max(maxY - minY, 1e-6); const cx = (minX + maxX) * 0.5; const cy = (minY + maxY) * 0.5; const scale = Math.min(W / bw, H / bh) * fitMargin; ctx.translate(W * 0.5, H * 0.5); ctx.scale(scale, scale); ctx.translate(-cx, -cy); ctx.lineWidth = lineWidth / scale; } else { ctx.lineWidth = lineWidth; } ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.strokeStyle = strokeStyle; ctx.beginPath(); if (smooth) strokePathSmooth(ctx, path); else { ctx.moveTo(path[0][0], path[0][1]); for (let i = 1; i < path.length; i++) ctx.lineTo(path[i][0], path[i][1]); } ctx.stroke(); ctx.restore(); } /** * Single continuous “one line” portrait (white background, one stroke). * By default fits the stroke’s bounding box into the canvas and centers it (uniform scale). * @param {HTMLCanvasElement} canvas * @param {FaceFeature[]} features * @param {{ lineWidth?: number, strokeStyle?: string, order?: string[], smooth?: boolean, fitAndCenter?: boolean, fitMargin?: number }} [options] */ function drawOneLineFaceToCanvas(canvas, features, options = {}) { const order = options.order ?? oneLineOrderForFeatures(features); const path = chainFeaturesToOnePath(features, order); drawOneLinePathToCanvas(canvas, path, options); } // --- App state --- const RESULT_EPICYCLES = 320; const RESULT_LINE_CSS_PX = 2.25; const VIDEO_CONSTRAINTS = { video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false }; const DEMO_PATH = [[635.5893325805664,449.4931697845459],[638.8982772827148,447.37744331359863],[643.0173492431641,445.0820732116699],[649.0255737304688,442.1224594116211],[658.2895660400391,439.1785526275635],[680.5644989013672,438.89578342437744],[691.0308074951172,441.9793367385864],[698.2093048095703,444.92281436920166],[703.2039642333984,447.3310947418213],[706.8532562255859,449.44862365722656],[703.0228424072266,452.5896406173706],[697.8153228759766,455.7373094558716],[690.2389526367188,459.67363357543945],[680.5863189697266,462.54926204681396],[669.6151733398438,463.4328031539917],[659.1983795166016,462.21619606018066],[650.3811645507812,459.12384510040283],[639.5757293701172,452.43844985961914],[645.9419345855713,412.8091576695442],[644.3178462982178,412.5595352053642],[642.9791080951691,412.182088047266],[641.9257199764252,411.67681619524956],[641.1576819419861,411.0437196493149],[640.6749939918518,410.282798409462],[640.1923060417175,409.52187716960907],[639.7096180915833,408.76095592975616],[639.226930141449,408.00003468990326],[638.7442421913147,407.23911345005035],[638.3645522594452,406.52242451906204],[638.0878603458405,405.8499678969383],[637.9141664505005,405.2217435836792],[637.8434705734253,404.63775157928467],[637.7727746963501,404.05375957489014],[637.7020788192749,403.4697675704956],[637.6313829421997,402.8857755661011],[637.5606870651245,402.30178356170654],[638.407210111618,399.6049578487873],[640.1709520816803,394.79529842734337],[642.8519129753113,387.8728052973747],[646.450092792511,378.8374784588814],[650.0482726097107,369.80215162038803],[653.6464524269104,360.7668247818947],[657.2446322441101,351.73149794340134],[660.8428120613098,342.696171104908],[664.5356619358063,338.14866945147514],[668.3231818675995,338.0889929831028],[672.2053718566895,342.51714169979095],[676.1822319030762,351.4331156015396],[680.1590919494629,360.34908950328827],[684.1359519958496,369.2650634050369],[688.1128120422363,378.1810373067856],[692.089672088623,387.09701120853424],[695.0865387916565,393.93550157546997],[697.1034121513367,398.6965084075928],[698.1402921676636,401.38003170490265],[698.1971788406372,401.9860714673996],[698.2540655136108,402.59211122989655],[698.3109521865845,403.1981509923935],[698.3678388595581,403.80419075489044],[698.4247255325317,404.4102305173874],[698.3620262145996,405.06383791565895],[698.1797409057617,405.7650129497051],[697.8778696060181,406.5137556195259],[697.4564123153687,407.3100659251213],[697.0349550247192,408.1063762307167],[696.6134977340698,408.9026865363121],[696.1920404434204,409.6989968419075],[695.770583152771,410.4953071475029],[694.9955749511719,411.1550608277321],[693.867015838623,411.67825788259506],[692.3849058151245,412.0648983120918],[690.5492448806763,412.3149821162224],[688.713583946228,412.56506592035294],[686.8779230117798,412.8151497244835],[685.0422620773315,413.06523352861404],[683.2066011428833,413.3153173327446],[681.4202189445496,413.5220177471638],[679.6831154823303,413.68533477187157],[677.9952907562256,413.805268406868],[676.3567447662354,413.881818652153],[674.7181987762451,413.95836889743805],[673.0796527862549,414.0349191427231],[671.4411067962646,414.1114693880081],[669.8025608062744,414.18801963329315],[668.1839537620544,414.241658449173],[666.5852856636047,414.2723858356476],[665.0065565109253,414.280201792717],[663.4477663040161,414.26510632038116],[661.8889760971069,414.25001084804535],[660.3301858901978,414.23491537570953],[658.7713956832886,414.2198199033737],[657.2126054763794,414.2047244310379],[655.6374907493591,414.13099721074104],[654.0460515022278,413.99863824248314],[652.4382877349854,413.8076475262642],[650.8141994476318,413.5580250620842],[649.1901111602783,413.3084025979042],[647.5660228729248,413.0587801337242],[700.8583831787109,335.75008392333984],[703.8680267333984,332.70116329193115],[709.9646759033203,328.65190744400024],[718.5097503662109,325.6079864501953],[727.4261474609375,324.79774475097656],[735.8509063720703,326.07743740081787],[741.5592193603516,328.53848218917847],[744.6501159667969,330.63775062561035],[746.9277954101562,332.3770236968994],[742.9824829101562,335.63225984573364],[738.6378479003906,337.5053644180298],[732.6361083984375,338.7378716468811],[724.4331359863281,338.99141550064087],[716.1132049560547,338.10746669769287],[703.6574554443359,336.25298738479614],[690.1012420654297,309.33019638061523],[693.0072784423828,295.61333656311035],[718.9591217041016,290.8620071411133],[740.6631469726562,289.4307804107666],[756.7912292480469,294.43432331085205],[767.0613098144531,304.45988416671753],[761.4427947998047,308.9048194885254],[783.5,294.5],[788.5,304.5],[790.5,314.5],[795.5,321.5],[804.5,321.5],[813.5,317.5],[817.5,313.5],[821.5,301.5],[835.5,277.5],[838.5,260.5],[830.5,235.5],[809.5,200.5],[780.5,170.5],[757.5,153.5],[737.5,143.5],[701.5,130.5],[646.5,128.5],[628.5,135.5],[585.5,162.5],[541.5,203.5],[525.5,225.5],[519.5,238.5],[516.5,250.5],[517.5,282.5],[522.5,303.5],[525.5,307.5],[540.5,317.5],[544.5,330.5],[549.5,335.5],[554.5,334.5],[557.5,327.5],[559.5,307.5],[565.5,293.5],[573.5,286.5],[588.5,279.5],[598.5,270.5],[601.5,265.5],[609.5,238.5],[618.5,221.5],[634.5,203.5],[644.5,198.5],[652.5,198.5],[656.5,200.5],[663.5,208.5],[671.5,230.5],[673.5,250.5],[676.5,261.5],[685.5,273.5],[699.5,278.5],[719.5,276.5],[739.5,283.5],[766.5,281.5],[774.5,285.5],[641.8405151367188,309.8618745803833],[574.5270538330078,312.7939796447754],[569.7048187255859,308.8158345222473],[577.6482772827148,297.6969623565674],[592.0012664794922,291.85554027557373],[612.7814483642578,292.38277673721313],[638.309211730957,296.11677646636963],[625.6816482543945,330.899019241333],[632.0671081542969,334.8098087310791],[635.0641632080078,337.53358125686646],[632.4980926513672,338.390793800354],[619.7641372680664,340.983567237854],[611.7068481445312,342.4439334869385],[603.3706665039062,342.6263666152954],[597.6042938232422,341.47005558013916],[593.6283874511719,339.6331715583801],[589.8764801025391,336.55375957489014],[591.7444610595703,334.38870191574097],[594.5231246948242,331.979455947876],[599.7540283203125,329.18184757232666],[608.3315277099609,327.54441261291504],[617.0569610595703,328.1622004508972],[556.5,359.5],[556.5,351.5],[555.5,349.5],[550.5,349.5],[549.5,350.5],[549.5,359.5],[550.5,360.5],[549.5,372.5],[548.5,375.5],[541.5,381.5],[541.5,386.5],[543.5,388.5],[553.5,390.5],[563.5,397.5],[565.5,397.5],[562.5,373.5],[561.5,372.5],[561.5,368.5],[561.9613265991211,367.46259212493896],[565.4836654663086,389.90315437316895],[570.9883880615234,413.88678073883057],[579.0420532226562,439.46239471435547],[588.4122848510742,460.0974655151367],[598.1267166137695,475.4767370223999],[610.5352783203125,489.36607360839844],[621.5452575683594,499.27539825439453],[633.9847183227539,508.3054304122925],[649.69970703125,515.1566505432129],[670.9638214111328,517.0900726318359],[692.6220703125,514.8914337158203],[709.3287658691406,507.9548978805542],[723.1668853759766,498.57656478881836],[735.5898284912109,487.920298576355],[749.3849945068359,472.9499673843384],[760.6014251708984,456.5340328216553],[771.0710144042969,435.0264072418213],[778.8774108886719,408.804874420166],[783.4095001220703,383.85887145996094],[784.5,384.5],[783.5,385.5],[780.5,406.5],[772.5,431.5],[772.5,434.5],[760.5,458.5],[758.5,460.5],[758.5,463.5],[762.5,462.5],[765.5,455.5],[778.5,436.5],[778.5,429.5],[779.5,428.5],[779.5,423.5],[780.5,422.5],[780.5,417.5],[782.5,409.5],[796.5,394.5],[799.5,393.5],[802.5,390.5],[807.5,380.5],[810.5,371.5],[809.5,350.5],[819.5,330.5],[819.5,324.5],[817.5,320.5],[812.5,319.5],[805.5,321.5],[798.5,325.5],[795.5,330.5],[788.5,337.5],[785.5,376.5],[784.5,377.5]]; /** @type {"idle" | "preview" | "generating" | "result"} */ let phase = "idle"; let cameraError = null; let extractError = null; let resultPath = null; let resultAnimPlaying = false; let resultReplayKey = 0; let resultFixedM = null; let resultDisplayM = RESULT_EPICYCLES; let previewSession = 0; let generatingFrameUrl = null; let streamRef = null; let stopIdleAnim = null; let stopResultAnim = null; const idleCanvas = document.getElementById("idle-canvas"); const videoEl = document.getElementById("camera-video"); const captureCanvas = document.getElementById("capture-canvas"); const resultCanvas = document.getElementById("result-canvas"); const freezeImg = document.getElementById("freeze-img"); const detailSlider = document.getElementById("detail-slider"); const detailValue = document.getElementById("detail-value"); const btnPlay = document.getElementById("btn-play"); const panelIdle = document.getElementById("panel-idle"); const panelPreview = document.getElementById("panel-preview"); const panelGenerating = document.getElementById("panel-generating"); const panelResult = document.getElementById("panel-result"); const errorEl = document.getElementById("error"); const viewports = document.querySelectorAll(".viewport"); const resultControls = document.querySelector(".result-controls"); const LAYOUT_PAD_X = 40; const LAYOUT_PAD_TOP = 48; const LAYOUT_PAD_BOTTOM = 40; const FACE_BUTTON_GAP = 48; const BUTTON_HEIGHT = 44; function layoutReserveBelowFace(currentPhase) { if (currentPhase === "preview") return FACE_BUTTON_GAP + 28 + BUTTON_HEIGHT; if (currentPhase === "result") return FACE_BUTTON_GAP + 40 + 16 + BUTTON_HEIGHT; return FACE_BUTTON_GAP + BUTTON_HEIGHT; } function computeFaceSize(currentPhase = phase) { const w = window.innerWidth; const h = window.innerHeight; const maxW = w - LAYOUT_PAD_X; const maxH = h - LAYOUT_PAD_TOP - LAYOUT_PAD_BOTTOM - layoutReserveBelowFace(currentPhase); return Math.max(120, Math.min(maxW, maxH)); } function updateLayout() { const size = computeFaceSize(); const px = size + "px"; viewports.forEach((el) => { el.style.width = px; el.style.height = px; }); if (resultControls) resultControls.style.maxWidth = px; if (phase === "idle") { stopIdleAnimation(); startIdleAnimation(); } else if (phase === "result") { startResultAnimation(); } } function setPhase(next) { phase = next; panelIdle.hidden = next !== "idle"; panelPreview.hidden = next !== "preview"; panelGenerating.hidden = next !== "generating"; panelResult.hidden = next !== "result"; errorEl.hidden = !(cameraError || extractError); errorEl.textContent = cameraError || extractError || ""; updateLayout(); if (next !== "idle") stopIdleAnimation(); if (next !== "result") stopResultAnimation(); } function stopIdleAnimation() { if (stopIdleAnim) { stopIdleAnim(); stopIdleAnim = null; } } function startIdleAnimation() { stopIdleAnimation(); if (!idleCanvas || !DEMO_PATH || DEMO_PATH.length < 2) return; stopIdleAnim = startFourierOneLineAnimation(idleCanvas, DEMO_PATH, { samples: 2048, epicycles: RESULT_EPICYCLES, outSamples: 1500, fadeAlpha: 0.04, strokeStyle: "#141414", lineWidth: RESULT_LINE_CSS_PX, coeffsPerSecond: 65, loop: true, autoSeam: true, seamGapFraction: 0.02, }); } function stopResultAnimation() { if (stopResultAnim) { stopResultAnim(); stopResultAnim = null; } } function updatePlayButton() { if (btnPlay) btnPlay.disabled = resultAnimPlaying; } function replayResultAnimation() { const mAtClick = resultFixedM ?? resultDisplayM; resultDisplayM = mAtClick; resultFixedM = null; resultAnimPlaying = true; resultReplayKey++; updatePlayButton(); startResultAnimation(); } function startResultAnimation() { stopResultAnimation(); if (!resultCanvas || !resultPath || resultPath.length < 2) return; resultAnimPlaying = resultFixedM === null; updatePlayButton(); stopResultAnim = startFourierOneLineAnimation(resultCanvas, resultPath, { samples: 2048, epicycles: RESULT_EPICYCLES, fixedM: resultFixedM, outSamples: 1500, fadeAlpha: 0.04, strokeStyle: "#141414", lineWidth: RESULT_LINE_CSS_PX, coeffsPerSecond: 65, loop: false, autoSeam: true, seamGapFraction: 0.02, onM: (m) => { resultDisplayM = m; if (detailSlider) detailSlider.value = String(m); if (detailValue) detailValue.textContent = "Detail: " + m; }, onComplete: () => { resultAnimPlaying = false; updatePlayButton(); }, }); } function stopStream() { if (streamRef) { streamRef.getTracks().forEach((t) => t.stop()); streamRef = null; } if (videoEl) videoEl.srcObject = null; } async function startCamera() { cameraError = null; extractError = null; try { const stream = await navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS); streamRef = stream; previewSession++; setPhase("preview"); attachVideo(); } catch (e) { cameraError = e instanceof Error ? e.message : String(e); setPhase("idle"); } } function attachVideo() { if (phase !== "preview" || !videoEl || !streamRef) return; videoEl.srcObject = streamRef; void videoEl.play(); } async function capture() { if (!videoEl || !captureCanvas) return; const vw = videoEl.videoWidth; const vh = videoEl.videoHeight; if (!vw || !vh) return; captureCanvas.width = vw; captureCanvas.height = vh; const ctx = captureCanvas.getContext("2d"); if (!ctx) return; ctx.save(); ctx.scale(-1, 1); ctx.drawImage(videoEl, -vw, 0, vw, vh); ctx.restore(); try { generatingFrameUrl = captureCanvas.toDataURL("image/jpeg", 0.88); if (freezeImg) freezeImg.src = generatingFrameUrl; } catch { generatingFrameUrl = null; } stopStream(); setPhase("generating"); const extracted = await extractFaceFeaturesFromImage(captureCanvas); if (extracted.ok) { resultPath = extracted.mergedPath; extractError = null; resultFixedM = null; resultDisplayM = RESULT_EPICYCLES; resultReplayKey++; generatingFrameUrl = null; if (freezeImg) freezeImg.removeAttribute("src"); if (detailSlider) detailSlider.value = String(RESULT_EPICYCLES); if (detailValue) detailValue.textContent = "Detail: " + RESULT_EPICYCLES; setPhase("result"); } else { extractError = extracted.message; generatingFrameUrl = null; await startCamera(); } } function downloadResultPng() { if (!resultCanvas || resultCanvas.width < 1) return; resultCanvas.toBlob((blob) => { if (!blob) return; const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "bioglyph-" + Date.now() + ".png"; a.click(); URL.revokeObjectURL(url); }, "image/png"); } function goBack() { stopStream(); resultPath = null; resultAnimPlaying = false; resultReplayKey = 0; resultFixedM = null; resultDisplayM = RESULT_EPICYCLES; generatingFrameUrl = null; extractError = null; cameraError = null; if (freezeImg) freezeImg.removeAttribute("src"); if (detailSlider) detailSlider.value = String(RESULT_EPICYCLES); if (detailValue) detailValue.textContent = "Detail: " + RESULT_EPICYCLES; updatePlayButton(); void startCamera(); } document.getElementById("btn-start").addEventListener("click", () => { extractError = null; void startCamera(); }); document.getElementById("btn-capture").addEventListener("click", () => void capture()); document.getElementById("btn-download").addEventListener("click", downloadResultPng); document.getElementById("btn-back").addEventListener("click", goBack); btnPlay.addEventListener("click", replayResultAnimation); detailSlider.addEventListener("input", (e) => { const next = Number(e.target.value); resultAnimPlaying = false; resultFixedM = next; resultDisplayM = next; resultReplayKey++; detailValue.textContent = "Detail: " + next; updatePlayButton(); startResultAnimation(); }); function boot() { setPhase("idle"); window.addEventListener("resize", updateLayout); } if (globalThis.__MP) boot(); else globalThis.addEventListener("mp-ready", boot, { once: true });