diff options
Diffstat (limited to 'public/bluebey-studio/src/faceArt.js')
| -rw-r--r-- | public/bluebey-studio/src/faceArt.js | 20 |
1 files changed, 15 insertions, 5 deletions
diff --git a/public/bluebey-studio/src/faceArt.js b/public/bluebey-studio/src/faceArt.js index adecbb9..829defc 100644 --- a/public/bluebey-studio/src/faceArt.js +++ b/public/bluebey-studio/src/faceArt.js @@ -1562,9 +1562,15 @@ export function drawEyes(ctx, p) { // the eyeball, so they are drawn after the lid block and are not clipped. if (spec.lashes ?? style.lashes) { // The lashes ride the upper lid: they drop as the lid lowers (2r per unit of - // open) and tilt with まぶたの傾き, so they stay on the lid edge. + // open) and tilt with まぶたの傾き, so they stay on the lid edge. まつげの位置 + // slides them along the lid, まつげの角度 tilts the strokes themselves. const outDir = -eye.towardNose; const lidDrop = 2 * eye.r * (1 - open); + const lashPos = clamp(spec.lashPos ?? style.lashPos ?? 0, -80, 80); + const lashAngle = clamp(spec.lashAngle ?? style.lashAngle ?? 0, -80, 80) * outDir; + const a = (lashAngle * Math.PI) / 180; + const ca = Math.cos(a); + const sa = Math.sin(a); ctx.save(); if (eyeTilt) { ctx.translate(eye.cx, eye.cy); @@ -1572,14 +1578,18 @@ export function drawEyes(ctx, p) { ctx.translate(-eye.cx, -eye.cy); } for (const deg of EYE_LAYOUT.lash.angles) { - const t = (deg * Math.PI) / 180; + const t = ((deg + lashPos) * Math.PI) / 180; const ux = outDir * Math.cos(t); const uy = -Math.sin(t); + // The stroke points along the radial direction, tilted by まつげの角度. + const dx = ux * ca - uy * sa; + const dy = ux * sa + uy * ca; const r0 = eye.r * 0.96; - const r1 = r0 + EYE_LAYOUT.lash.length; + const bx = eye.cx + ux * r0; + const by = eye.cy + uy * r0 + lidDrop; strokePolyline(ctx, [ - { x: eye.cx + ux * r0, y: eye.cy + uy * r0 + lidDrop }, - { x: eye.cx + ux * r1, y: eye.cy + uy * r1 + lidDrop }, + { x: bx, y: by }, + { x: bx + dx * EYE_LAYOUT.lash.length, y: by + dy * EYE_LAYOUT.lash.length }, ], { color: lineColor, width: EYE_LAYOUT.lash.width }); } ctx.restore(); |
