aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/bluebey-studio/src/faceArt.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/bluebey-studio/src/faceArt.js')
-rw-r--r--public/bluebey-studio/src/faceArt.js20
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();