43:["$","title",null,{"children":"Geometric Portrait (Part I) - Live camera | Visnu Pitiyanuvath | Observable"}] 4b:T8e0,function geometry(image, face, emoji = "🦃") { const imw = image.width; const imh = image.height; const ctx = DOM.context2d(imw, imh); ctx.fillStyle = "black"; ctx.fillRect(0, 0, imw, imh); // Head emoji, sized and centered on the face bounding box const xs = face.map((p) => p.x * imw); const ys = face.map((p) => p.y * imh); const [x0, x1] = d3.extent(xs); const [y0, y1] = d3.extent(ys); // Quantize the size to coarse steps so small changes don't make it jitter const step = 1; const size = Math.max(x1 - x0, y1 - y0) * 1.5; ctx.font = `${size}px sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(emoji, (x0 + x1) / 2, (y0 + y1) / 2); const fill = "magenta"; // Irises ctx.fillStyle = ctx.strokeStyle = fill; for (const [centerIndex, connections] of [ [473, FaceLandmarker.FACE_LANDMARKS_LEFT_IRIS], [468, FaceLandmarker.FACE_LANDMARKS_RIGHT_IRIS], ]) { const points = connections.map(({start, end}) => { const a = face[start]; const b = face[end]; return [[a.x * imw, a.y * imh], [b.x * imw, b.y * imh]] }); const center = face[centerIndex]; const cx = center.x * imw; const cy = center.y * imh; let radius = Infinity; for (const [a, b] of points) { const dx = b[0] - a[0]; const dy = b[1] - a[1]; const l2 = dx * dx + dy * dy; let t = 0; if (l2) t = ((cx - a[0]) * dx + (cy - a[1]) * dy) / l2; t = Math.max(0, Math.min(1, t)); const r = Math.hypot(cx - (a[0] + t * dx), cy - (a[1] + t * dy)); radius = Math.min(r, radius); } ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.fill(); } // Nose ctx.fillStyle = fill; ctx.beginPath(); for (const i of [8, 98, 327]) { const point = face[i]; const x = point.x * imw; const y = point.y * imh; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); // Mouth ctx.fillStyle = fill; ctx.beginPath(); for (const i of [57, 287, 17]) { const point = face[i]; const x = point.x * imw; const y = point.y * imh; if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); return ctx.canvas; }4c:T599,async function camera() { const stream = await navigator.mediaDevices.getUserMedia({video: true}); invalidation.then(() => stream.getTracks().forEach((t) => t.stop())); const video = html`