[{"_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/eyes.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},"701e7726-e538-11f0-82f4-42dde27851f2","eyes.ts","fileId","e9d1dc76-e4e7-11f0-a463-42dde27851f2","parentId","21e1a1a6-e4e7-11f0-aad0-42dde27851f2","branchId","branchVersion",67,"latest",true,["D",1767069101037],4,"fileType","script","content","/** @facelab/renderers/eyes.ts */\n\nimport type { EyeConfig, Percentage, Vec2 } from \"../core/types.ts\";\nimport { LANDMARK } from \"../core/constants.ts\";\nimport {\n centroid,\n createRadialGradient,\n distance,\n drawPath,\n} from \"../engine/primitives.ts\";\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TYPES\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype Side = \"left\" | \"right\";\n\ninterface EyeGeometry {\n readonly center: Vec2;\n readonly width: number;\n readonly contour: readonly Vec2[];\n readonly outerCorner: Vec2;\n readonly innerCorner: Vec2;\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// GEOMETRY EXTRACTION\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction extractEyeGeometry(\n points: ReadonlyMap,\n side: Side,\n): EyeGeometry | null {\n const loopIndices = side === \"left\"\n ? LANDMARK.LEFT_EYE_LOOP\n : LANDMARK.RIGHT_EYE_LOOP;\n\n const outerIdx = side === \"left\"\n ? LANDMARK.LEFT_EYE_OUTER\n : LANDMARK.RIGHT_EYE_OUTER;\n\n const innerIdx = side === \"left\"\n ? LANDMARK.LEFT_EYE_INNER\n : LANDMARK.RIGHT_EYE_INNER;\n\n const contour: Vec2[] = [];\n for (const idx of loopIndices) {\n const point = points.get(idx);\n if (point) contour.push(point);\n }\n\n if (contour.length < 3) return null;\n\n const outerCorner = points.get(outerIdx);\n const innerCorner = points.get(innerIdx);\n\n if (!outerCorner || !innerCorner) return null;\n\n const center = centroid(contour);\n if (!center) return null;\n\n const width = distance(outerCorner, innerCorner);\n if (width < 1 || !isFinite(width)) return null;\n\n return { center, width, contour, outerCorner, innerCorner };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// CARTOON EYE RENDERER\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderCartoonEye(\n ctx: CanvasRenderingContext2D,\n geometry: EyeGeometry,\n config: EyeConfig,\n scale: number,\n): void {\n const { center, width, contour } = geometry;\n\n const irisRadius = (width * 0.35) * config.size;\n if (irisRadius < 1 || !isFinite(irisRadius)) return;\n\n ctx.save();\n\n // Clip to eye contour\n ctx.beginPath();\n ctx.moveTo(contour[0].x, contour[0].y);\n for (let i = 1; i < contour.length; i++) {\n ctx.lineTo(contour[i].x, contour[i].y);\n }\n ctx.closePath();\n ctx.clip();\n\n // Sclera (white of eye)\n ctx.fillStyle = \"#ffffff\";\n ctx.fill();\n\n // Subtle shadow\n ctx.lineWidth = 3 * scale;\n ctx.strokeStyle = \"rgba(0, 0, 0, 0.1)\";\n ctx.stroke();\n\n // Iris gradient\n const irisGradient = createRadialGradient(\n ctx,\n center,\n irisRadius * 0.1,\n irisRadius,\n [\n [0, \"#ffffff\"],\n [0.2, config.irisColor],\n [0.8, config.irisColor],\n [1, \"#0a0a0a\"],\n ],\n );\n\n ctx.fillStyle = irisGradient;\n ctx.beginPath();\n ctx.arc(center.x, center.y, irisRadius, 0, Math.PI * 2);\n ctx.fill();\n\n // Pupil\n ctx.fillStyle = \"#000000\";\n ctx.beginPath();\n ctx.arc(center.x, center.y, irisRadius * config.pupilSize, 0, Math.PI * 2);\n ctx.fill();\n\n // Highlight\n ctx.fillStyle = \"rgba(255, 255, 255, 0.9)\";\n ctx.beginPath();\n ctx.arc(\n center.x + irisRadius * 0.3,\n center.y - irisRadius * 0.3,\n irisRadius * 0.18,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n\n ctx.restore();\n\n // Eye outline (outside clip region)\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(contour[0].x, contour[0].y);\n for (let i = 1; i < contour.length; i++) {\n ctx.lineTo(contour[i].x, contour[i].y);\n }\n ctx.closePath();\n ctx.strokeStyle = \"#000000\";\n ctx.lineWidth = 2 * scale;\n ctx.lineJoin = \"round\";\n ctx.stroke();\n ctx.restore();\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// NATURAL EYE RENDERER\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderNaturalEye(\n ctx: CanvasRenderingContext2D,\n geometry: EyeGeometry,\n _config: EyeConfig,\n _scale: number,\n): void {\n const { contour } = geometry;\n\n drawPath(ctx, contour, true, {\n fill: \"rgba(255, 255, 255, 0.15)\",\n blend: \"overlay\",\n });\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// EYELASH & EYEBROW RENDERERS\n// ═══════════════════════════════════════════════════════════════════════════\n\nfunction renderEyelashes(\n ctx: CanvasRenderingContext2D,\n points: ReadonlyMap,\n side: Side,\n opacity: Percentage,\n scale: number,\n): void {\n const lidIndices = side === \"left\" ? LANDMARK.LEFT_LID : LANDMARK.RIGHT_LID;\n\n const lidPoints: Vec2[] = [];\n for (const idx of lidIndices) {\n const point = points.get(idx);\n if (point) lidPoints.push(point);\n }\n\n if (lidPoints.length < 2) return;\n\n drawPath(ctx, lidPoints, false, {\n stroke: `rgba(20, 10, 10, ${opacity})`,\n lineWidth: 5 * scale,\n blur: 1,\n });\n}\n\nfunction renderEyebrow(\n ctx: CanvasRenderingContext2D,\n points: ReadonlyMap,\n side: Side,\n opacity: Percentage,\n scale: number,\n): void {\n const browIndices = side === \"left\"\n ? LANDMARK.LEFT_BROW\n : LANDMARK.RIGHT_BROW;\n\n const browPoints: Vec2[] = [];\n for (const idx of browIndices) {\n const point = points.get(idx);\n if (point) browPoints.push(point);\n }\n\n if (browPoints.length < 2) return;\n\n drawPath(ctx, browPoints, false, {\n stroke: `rgba(30, 20, 20, ${opacity})`,\n lineWidth: 12 * scale,\n blur: 6,\n blend: \"multiply\",\n });\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// PUBLIC API\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface EyeRendererContext {\n readonly ctx: CanvasRenderingContext2D;\n readonly points: ReadonlyMap;\n readonly config: EyeConfig;\n readonly scale: number;\n}\n\nexport function renderEyes(context: EyeRendererContext): void {\n const { ctx, points, config, scale } = context;\n\n for (const side of [\"left\", \"right\"] as const) {\n const geometry = extractEyeGeometry(points, side);\n\n if (!geometry) continue;\n\n // Main eye\n if (config.style === \"cartoon\" || config.style === \"anime\") {\n renderCartoonEye(ctx, geometry, config, scale);\n } else {\n renderNaturalEye(ctx, geometry, config, scale);\n }\n\n // Eyelashes\n if (config.eyelashOpacity > 0) {\n renderEyelashes(ctx, points, side, config.eyelashOpacity, scale);\n }\n\n // Eyebrows\n if (config.eyebrowOpacity > 0) {\n renderEyebrow(ctx, points, side, config.eyebrowOpacity, scale);\n }\n }\n}","deleted","label",[170,151],"renderers","permalink","https://www.val.town/x/banks/facelab/code/renderers/eyes.ts","extension","actionData","errors"]