[{"_1":2,"_174":-5,"_175":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","96591c8dbfc078fdbadefbda462961392fdd9880","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_148":149,"_171":172,"_173":-5},"handle","banks","name","facelab","path","renderers/teeth.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","ff28b2e4-e4e6-11f0-8e11-42dde27851f2","createdAt",["D",1767034122291],"deletedAt","legacyEnvVars","privacy","unlisted","description","imageUrl","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019b43e2-aa14-727d-9d22-4c67294d95f4","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","org",{"_94":95,"_133":130,"_12":112},"avatar","branch",{"_136":137,"_96":44,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":97,"_146":95},"version",70,"ff28fbd2-e4e6-11f0-8e11-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":150,"_96":151,"_152":153,"_154":155,"_156":138,"_157":158,"_159":160,"_104":161,"_136":162,"_163":164,"_165":166,"_167":20,"_168":-5,"_98":169},"87b1febc-e538-11f0-af8f-42dde27851f2","teeth.ts","fileId","f9a2eb18-e4e7-11f0-95ad-42dde27851f2","parentId","21e1a1a6-e4e7-11f0-aad0-42dde27851f2","branchId","branchVersion",68,"latest",true,["D",1767069140591],3,"fileType","script","content","/** @facelab/renderers/teeth.ts */\n\nimport type { Vec2, TeethConfig, MouthConfig } from '../core/types.ts';\nimport { LANDMARK, TEETH_SVG_DATA } from '../core/constants.ts';\nimport { distance, angle } from '../engine/primitives.ts';\n\n// ═══════════════════════════════════════════════════════════════════════════\n// SVG TEETH ASSET LOADER\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface TeethAssets {\n readonly top: HTMLImageElement;\n readonly bottom: HTMLImageElement;\n}\n\nlet teethAssets: TeethAssets | null = null;\nlet loadPromise: Promise | null = null;\n\nexport async function loadTeethAssets(): Promise {\n if (teethAssets) return teethAssets;\n if (loadPromise) return loadPromise;\n\n loadPromise = new Promise((resolve, reject) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(TEETH_SVG_DATA, 'image/svg+xml');\n const paths = doc.querySelectorAll('path');\n\n const topPaths: string[] = [];\n const bottomPaths: string[] = [];\n\n paths.forEach(path => {\n const d = path.getAttribute('d');\n if (!d) return;\n \n const match = d.match(/M\\s*([\\d.]+)\\s+([\\d.]+)/);\n if (!match) return;\n \n const y = parseFloat(match[2]);\n if (y < 1000) {\n topPaths.push(path.outerHTML);\n } else {\n bottomPaths.push(path.outerHTML);\n }\n });\n\n const createSvgImage = (\n paths: string[], \n viewBox: string\n ): Promise => {\n return new Promise((res, rej) => {\n const svg = ``;\n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const img = new Image();\n \n img.onload = () => {\n URL.revokeObjectURL(img.src);\n res(img);\n };\n img.onerror = rej;\n img.src = URL.createObjectURL(blob);\n });\n };\n\n Promise.all([\n createSvgImage(topPaths, '1400 80 1800 900'),\n createSvgImage(bottomPaths, '1400 1100 1800 800'),\n ])\n .then(([top, bottom]) => {\n teethAssets = { top, bottom };\n resolve(teethAssets);\n })\n .catch(reject);\n });\n\n return loadPromise;\n}\n\nexport function getTeethAssets(): TeethAssets | null {\n return teethAssets;\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// MOUTH GEOMETRY\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface MouthGeometry {\n readonly center: Vec2;\n readonly width: number;\n readonly openness: number;\n readonly angle: number;\n readonly unit: { readonly x: number; readonly y: number };\n readonly perp: { readonly x: number; readonly y: number };\n readonly topLocalY: number;\n readonly bottomLocalY: number;\n}\n\nfunction extractMouthGeometry(\n points: ReadonlyMap\n): MouthGeometry | null {\n const left = points.get(LANDMARK.MOUTH_LEFT);\n const right = points.get(LANDMARK.MOUTH_RIGHT);\n const top = points.get(LANDMARK.MOUTH_TOP);\n const bottom = points.get(LANDMARK.MOUTH_BOTTOM);\n const lCheek = points.get(LANDMARK.LEFT_CHEEK);\n const rCheek = points.get(LANDMARK.RIGHT_CHEEK);\n\n if (!left || !right || !top || !bottom || !lCheek || !rCheek) {\n return null;\n }\n\n const faceWidth = distance(lCheek, rCheek);\n const width = distance(left, right);\n \n if (width < 1) return null;\n\n const center: Vec2 = {\n x: (left.x + right.x) / 2,\n y: (left.y + right.y) / 2,\n };\n\n // Unit vectors for mouth coordinate system\n const unit = {\n x: (right.x - left.x) / width,\n y: (right.y - left.y) / width,\n };\n \n const perp = {\n x: unit.y,\n y: -unit.x,\n };\n\n // Project top/bottom to local coordinates\n const projectLocalY = (p: Vec2) => \n (p.x - center.x) * perp.x + (p.y - center.y) * perp.y;\n\n const topLocalY = projectLocalY(top);\n const bottomLocalY = projectLocalY(bottom);\n const openness = topLocalY - bottomLocalY;\n\n // Skip if mouth nearly closed\n if (openness < faceWidth * 0.02) return null;\n\n return {\n center,\n width,\n openness,\n angle: angle(left, right),\n unit,\n perp,\n topLocalY,\n bottomLocalY,\n };\n}\n\nfunction toScreenCoords(\n geometry: MouthGeometry,\n localX: number,\n localY: number\n): Vec2 {\n return {\n x: geometry.center.x + localX * geometry.unit.x + localY * geometry.perp.x,\n y: geometry.center.y + localX * geometry.unit.y + localY * geometry.perp.y,\n };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TONGUE RENDERER\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderTongue(\n ctx: CanvasRenderingContext2D,\n geometry: MouthGeometry,\n config: MouthConfig\n): void {\n if (!config.tongue.visible) return;\n\n const tongueLocalY = geometry.bottomLocalY * (1 - config.tongue.depth);\n const pos = toScreenCoords(geometry, 0, tongueLocalY);\n const width = geometry.width * 0.5;\n const height = geometry.openness * 0.4;\n\n ctx.save();\n ctx.translate(pos.x, pos.y);\n ctx.rotate(geometry.angle);\n\n const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, width);\n gradient.addColorStop(0, config.tongue.color);\n gradient.addColorStop(0.7, '#a02020');\n gradient.addColorStop(1, '#601010');\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.ellipse(0, height * 0.2, width, height, 0, 0, Math.PI);\n ctx.fill();\n\n // Center line\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(0, -height * 0.5);\n ctx.lineTo(0, height * 0.3);\n ctx.stroke();\n\n ctx.restore();\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TEETH RENDERER\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderTeethRow(\n ctx: CanvasRenderingContext2D,\n image: HTMLImageElement,\n geometry: MouthGeometry,\n row: 'top' | 'bottom',\n config: TeethConfig\n): void {\n const rowConfig = row === 'top' ? config.top : config.bottom;\n \n if (!rowConfig.visible) return;\n\n const baseLocalY = row === 'top'\n ? geometry.topLocalY * (1 - rowConfig.depth)\n : geometry.bottomLocalY * (1 - rowConfig.depth);\n\n const localX = rowConfig.offset.x * geometry.width;\n const localY = baseLocalY - rowConfig.offset.y * geometry.openness;\n const pos = toScreenCoords(geometry, localX, localY);\n\n const width = geometry.width * 1.1 * config.scale * rowConfig.width;\n const height = width * 0.5 * rowConfig.height;\n\n ctx.save();\n ctx.translate(pos.x, pos.y);\n ctx.rotate(geometry.angle);\n \n const yOffset = row === 'top' ? -height * 0.1 : -height * 0.7;\n ctx.drawImage(image, -width / 2, yOffset, width, height);\n \n ctx.restore();\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// THROAT BACKGROUND\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderThroat(\n ctx: CanvasRenderingContext2D,\n geometry: MouthGeometry,\n canvasWidth: number,\n canvasHeight: number\n): void {\n const gradient = ctx.createRadialGradient(\n geometry.center.x, geometry.center.y, 0,\n geometry.center.x, geometry.center.y, geometry.width\n );\n \n gradient.addColorStop(0, '#0a0202');\n gradient.addColorStop(0.5, '#1a0508');\n gradient.addColorStop(1, '#2a0a10');\n \n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// PUBLIC API\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TeethRendererContext {\n readonly ctx: CanvasRenderingContext2D;\n readonly points: ReadonlyMap;\n readonly teethConfig: TeethConfig;\n readonly mouthConfig: MouthConfig;\n readonly canvasWidth: number;\n readonly canvasHeight: number;\n}\n\nexport function renderMouthInterior(context: TeethRendererContext): void {\n const { \n ctx, \n points, \n teethConfig, \n mouthConfig, \n canvasWidth, \n canvasHeight \n } = context;\n\n const assets = getTeethAssets();\n const geometry = extractMouthGeometry(points);\n \n if (!geometry) return;\n\n // Get inner lip contour for clipping\n const innerLipPoints: Vec2[] = [];\n for (const idx of LANDMARK.LIPS_INNER) {\n const point = points.get(idx);\n if (point) innerLipPoints.push(point);\n }\n \n if (innerLipPoints.length < 3) return;\n\n ctx.save();\n\n // Clip to inner lips\n ctx.beginPath();\n ctx.moveTo(innerLipPoints[0].x, innerLipPoints[0].y);\n for (let i = 1; i < innerLipPoints.length; i++) {\n ctx.lineTo(innerLipPoints[i].x, innerLipPoints[i].y);\n }\n ctx.closePath();\n ctx.clip();\n\n // Render layers (back to front)\n renderThroat(ctx, geometry, canvasWidth, canvasHeight);\n renderTongue(ctx, geometry, mouthConfig);\n \n if (assets) {\n renderTeethRow(ctx, assets.top, geometry, 'top', teethConfig);\n renderTeethRow(ctx, assets.bottom, geometry, 'bottom', teethConfig);\n }\n\n ctx.restore();\n}","deleted","label",[170,151],"renderers","permalink","https://www.val.town/x/banks/facelab/code/renderers/teeth.ts","extension","actionData","errors"]