diff options
Diffstat (limited to 'public/bluebey-studio/src/faceArt.js')
| -rw-r--r-- | public/bluebey-studio/src/faceArt.js | 1415 |
1 files changed, 1415 insertions, 0 deletions
diff --git a/public/bluebey-studio/src/faceArt.js b/public/bluebey-studio/src/faceArt.js new file mode 100644 index 0000000..65205fa --- /dev/null +++ b/public/bluebey-studio/src/faceArt.js @@ -0,0 +1,1415 @@ +/** + * The face artwork: everything that used to be a hand-drawn PNG in GIMP is now + * drawn from parameters onto a canvas, which is then used as the texture of the + * two overlay planes that already exist on the model. + * + * The plates have a linear UV mapping fitted to the original artwork, so drawing + * in "texture pixels" lands exactly where the original artwork did. Every constant + * below was measured from the original textures (see README for the numbers), so + * the defaults reproduce the 2022 artwork while every part of it stays editable. + * + * Texture space: the artwork WINDOW, 1024 x 380, origin at the top-left, y grows + * downwards. `canvasLayout` then says where that window sits on the bigger canvas + * a face plate actually needs (see below), and `Face` hands the bounds back as + * `limits`, so the drawing can clamp against the real edge instead of assuming + * the window is all there is. + * + * glTF stores v downwards too, and the textures are uploaded with flipY = false, + * so no flipping is needed anywhere. + */ + +const TAU = Math.PI * 2; +const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v)); +const HUGE = 4000; + +/** + * The artwork window: the rectangle the 2022 hand-drawn textures occupied. Every + * constant below is written in this space. + */ +export const ART_WINDOW = { width: 1024, height: 380 }; + +/** Keep this much clear at the canvas border, so filtering has room to breathe. */ +const EDGE_MARGIN = 8; + +/** What a drawing falls back to when no plate bounds are supplied. */ +const WINDOW_LIMITS = { + top: 0, bottom: ART_WINDOW.height, left: 0, right: ART_WINDOW.width, +}; + +/** + * The canvas a face plate's drawing needs, and where the artwork window sits on it. + * + * WHY: the plates are the *whole* front half of the body, so their UVs run far + * outside the 0..1 the artwork was drawn in (measured on the shipped model: the + * eye plate covers v -1.02..1.93, and 9 of 10 of its vertices sit within a + * twentieth of the border). Everything outside 0..1 used to clamp to the canvas + * edge row, so the moment a drawing reached the border - a tear dropped low, a + * brow lifted, a thick mouth pushed down - that edge row was copied across the + * rest of the plate and the mark stretched into a long smear. + * + * `Face` rewrites each plate's UVs so this range maps onto 0..1 instead, which + * removes the clamp altogether. The map is affine, so the artwork keeps its exact + * pixel size and position and merely shifts by `offset`; the canvas grows by the + * same factor, and those extra rows are the room a moved tear, brow or mouth + * needs (`limits` says where the real edge now is, in window coordinates). + * + * @param {{u0:number,u1:number,v0:number,v1:number}} range the plate's UV range + * @param {{width:number,height:number}} [window] the artwork window + */ +export function canvasLayout(range, window = ART_WINDOW) { + const u0 = Number.isFinite(range?.u0) ? range.u0 : 0; + const u1 = Number.isFinite(range?.u1) ? range.u1 : 1; + const v0 = Number.isFinite(range?.v0) ? range.v0 : 0; + const v1 = Number.isFinite(range?.v1) ? range.v1 : 1; + const du = Math.max(1e-6, u1 - u0); + const dv = Math.max(1e-6, v1 - v0); + const width = Math.max(1, Math.round(window.width * du)); + const height = Math.max(1, Math.round(window.height * dv)); + // `+ 0` turns a `-0` into a plain `0`, so the offsets compare cleanly. + const offsetX = Math.round(-u0 * window.width) + 0; + const offsetY = Math.round(-v0 * window.height) + 0; + return { + width, + height, + offsetX, + offsetY, + window, + // The canvas edges in the artwork's own coordinates. `top` is negative when + // the plate reaches above the window: that is the extra room. + limits: { + top: -offsetY + 0, + bottom: height - offsetY, + left: -offsetX + 0, + right: width - offsetX, + }, + }; +} + +/** Fixed layout of the eye plane, measured from the original `eyes-open.png`. */ +export const EYE_LAYOUT = { + radius: 84, + irisRadius: 62.5, + highlightRadius: 28, + highlightOffset: { x: 29.5, y: -18 }, + // The model's left eye (its own left, +x) sits in the u > 0.5 half. + eyes: [ + { key: 'right', cx: 267.5, cy: 240, towardNose: 1 }, + { key: 'left', cx: 755.5, cy: 240, towardNose: -1 }, + ], + lidRadiusFactor: 1.35, + lidStroke: 14, + // Eyebrows are painted into the same texture as the eyes. The eye plane is a + // flat-ish patch on a round head, so only its lower part is really outside + // the head: a brow high on the forehead would be swallowed by it. The brow + // therefore sits just above the eyeball (row 156) and the eyeball is drawn + // over its lower edge afterwards. + // The brow sits just above the eyeball, and the eyeball is drawn over its + // lower edge. `lift` is that resting height, so `height: 0` is the brow's + // natural place and a POSITIVE height raises it (a negative one sinks it + // towards the eye, where the eyeball will cover it). + brow: { lift: 114, length: 134, thickness: 15, curve: 0.14, offsetX: 6 }, + // A teardrop hangs well below the eye. The plate keeps the whole canvas, so + // the drop can sit low without being clipped (measured with a ruler grid). + tear: { size: 34, offsetX: 66, offsetY: 88 }, + closedLine: { + // The single shut line is the *long* form of the eyelid, the same reach as + // the arms of the "ぎゅっ" below, so switching between 1 and 3 lines does not + // change how wide the eye reads. + length: 205, + offsetX: 6, + offsetY: -10, + slantDeg: 3.9, + bow: 3, + // 2- and 3-line shut eyes, copied from the original `eyes-close-tight` + // artwork: three strokes sharing one vertex that points at the nose, opening + // to a wide bird's foot / arrow shape. `spread` is half the height the arms + // open to at the far end. + armSpan: 205, + spread: 62, + vertex: 87.5, + armX: 104, + }, + arch: { edgesUp: 8, apexUp: 44 }, +}; + +/** + * ほっぺ (a manga blush) and 頭の模様 (a mark on the head), both drawn into the eye + * plate next to the eyes and brows. + * + * They are deliberately *generic* manga devices, not a copy of any one character: + * a pink patch crossed by short diagonal strokes is a stock convention, and the + * head mark is one of a few simple shapes (a hook, a spiral, three strokes, a dot + * row) that starts off. Both stay editable through the panel. The cheek positions + * are tied to `EYE_LAYOUT` so they sit beside the eyes; the head mark sits up in + * the plate's upper area, i.e. on the forehead above the brows. + */ +export const CHEEK_LAYOUT = { + drop: 64, // how far below the eye centre the patch sits (artwork px) + outward: 66, // how far outwards, away from the midline, it sits + radius: 50, // half-width of the patch + squash: 0.62, // half-height, as a fraction of the half-width + lines: 4, // hatch strokes across the patch + lineWidth: 5, + slant: 58, // hatching angle, degrees +}; + +export const HEAD_MARK_LAYOUT = { + cx: (EYE_LAYOUT.eyes[0].cx + EYE_LAYOUT.eyes[1].cx) / 2, // the face midline + cy: 92, // up on the forehead, above the brows + size: 46, // nominal radius of a shape + lineWidth: 9, +}; + +/** + * 眼鏡 / サングラス, drawn into the same texture as the eyes and brows. + * + * Not measured off any artwork - the character has no glasses - but the numbers + * are tied to the eyeball so a lens is always a little wider than the eye it + * covers. The lens centre sits *below* the eye centre because the brow is drawn + * first, just above the eyeball (see `EYE_LAYOUT.brow`): a lens wide enough to + * read as glasses would otherwise cut straight through it. + * + * The two kinds get separate shapes on purpose. They used to share one ellipse + * and differ only in how dark the lens was filled, which made them hard to tell + * apart; the round 眼鏡 below and the wide, angular サングラス in + * `SUNGLASSES_LAYOUT` now read as different objects at a glance. + */ +const GLASSES_LAYOUT = { + widthFactor: 1.08, // lens half-width, as a multiple of the eyeball radius + heightFactor: 1.0, // a circle, so the round 眼鏡 stays round (a flatter + // ellipse used to drift towards the shades below) + drop: 20, // the lens centre hangs this far below the eye centre (artwork px) + bridgeRise: 8, // how much the bridge arcs up over the nose + bridgeWidth: 0.75, // bridge thickness, as a fraction of the frame stroke + templeLength: 1.5, // temple stub length, as a multiple of the eyeball radius + templeRise: 30, // how far the temple climbs towards the side of the head +}; + +/** + * サングラス: a long, pointed cat-eye rather than the round 眼鏡 lens. Each side is a + * slim wedge whose *outer end starts low*, rises to a *high, pointed outer corner* + * set further out (`tipX`), and whose top edge then sweeps back down towards the + * nose - the "外側が長くとがって上に上がる" shape the reference shows. The inner end is + * short, so the lens tapers inwards. The eye is allowed to poke out above and + * below it, so the lens no longer has to cover the whole eyeball. A level bar + * joins the two inner ends, so the pair still reads as one dark visor. The ratios + * are of the eyeball radius, exactly like `GLASSES_LAYOUT`, so `scale` means the + * same thing for both kinds. + */ +const SUNGLASSES_LAYOUT = { + widthFactor: 1.6, // a long lens: the outer end reaches well past the eyeball + heightFactor: 0.58, // slim, so the eye is free to show above and below it + drop: 8, // sits a little lower than the round pair + corner: 0.05, // corner rounding, as a fraction of the half-height; kept + // tiny so the outer corner stays pointed + topSkew: 1.0, // the pointed corner rises this far above the lens top (x half-height) + innerTop: 0.42, // the inner top is low, which is what makes the top edge climb + innerBottom: 0.34, // the inner bottom is pinched up towards the nose (x half-height) + outerEndX: 0.75, // the low outer end sits this far out (x half-width) + outerBottom: 0.82, // ...and this deep (x half-height) + tipX: 1.22, // the pointed corner juts this far out (x half-width) + bridgeWidth: 1.15, // a short, thick bar - thicker than the frame stroke + bridgeLift: 0.25, // the bar sits this far above the lens centre (x half-height) + templeLength: 1.15, // a short stub, like the round pair's but a little shorter + templeRise: 24, + frameFactor: 0.6, // a thin rim, slimmer than the round pair's stroke + highlightWidth: 0.12, // glass highlight thickness, as a fraction of the half-width +}; + +/** The mouth artwork is drawn on the `mouth-plate` shell, which covers the whole + * 1024 x 380 canvas (see tools/build-face-plates.py), so the drawing no longer + * has to be squeezed into a band. The only limit left is the canvas itself. */ +export const MOUTH_LAYOUT = { + centreX: 511.5, + chordY: 88, + halfChord: 420.5, + sag: 177, + // With the ends and the depth both fixed - which is what the slider promises - + // the only thing left to choose about the curve is *where* it bends. 1/3 is a + // quadratic Bézier (a parabola): it is flattest at the apex and falls away + // fastest near the ends. Pulling the cubic's control points in towards the ends + // makes the middle of the smile straighter still and lets the fall happen near + // the corners, which is what reads as a *gentler* curve at the same depth. + sagBend: 0.2, + thickness: 21, + // Kept for reference: the 2022 plane only showed these rows. + bandTop: 46, + bandBottom: 332, + // Only used to cap the *size* of the round "O" mouth, so the surprise face + // stays a mouth and not a hole. The mouth's travel no longer stops here: the + // drawing is given the plate's real edges through `limits`. + safeBottom: 372, + // The nose is a separate mesh that pokes out in front of the plate. The plate + // is depth tested, so the nose hides whatever is drawn behind it - but a frown + // arcs *up* into that hiding place, so slide the mouth down until the middle + // of the arc clears the nose. Only the middle is checked: a smile curves away + // from the nose, and checking its ends instead is what used to pin the whole + // mouth in place and make the height slider do nothing. + noseClear: 132, + // The original hand-drawn mouth is a *shallow* arc with tall corner strokes + // flicking up at the ends (measured from the artwork: the arc's own sag is + // ~0.13 of its chord, while the corners reach ~90px above it). Keeping that + // split is what makes `smile: 1` read as the original; making the arc itself + // deep instead looked too steep. + // + // The tongue rises from the lip line to a rounded top just above the corner + // strokes. Measured off the original: its crown is a *super-ellipse* - + // `rise = height * (1 - |dx/half|^2.5)` - so it is steep-sided with a smooth, + // almost flat top. It is convex upwards, but it is **not** a point. + tongue: { pos: 0.84, width: 126, height: 115, crown: 2.5 }, + // The tongue *lolling out* of the mouth (舌を出す). The same super-ellipse as + // the tongue above, but the crown hangs below its foot instead of rising over + // it, so the tip droops past the lip. `pos` is its own, because the in-mouth + // tongue sits off to one side and a lolling tongue reads better centred. + tongueOut: { pos: 0.5, width: 104, height: 118, crown: 2.2 }, + corner: { fromX: 26, fromY: 3, toX: 32, toY: 42, width: 11, curve: 26 }, + openRise: 64, + // Was 0.25: opening the mouth used to flatten the smile to stay inside the + // texture band. There is no band to stay inside now. + openFlatten: 0, +}; + +/* ------------------------------------------------------------------ helpers */ + +function circlePath(ctx, cx, cy, r) { + ctx.beginPath(); + ctx.arc(cx, cy, r, 0, TAU); + ctx.closePath(); +} + +function fillCircle(ctx, cx, cy, r, color) { + circlePath(ctx, cx, cy, r); + ctx.fillStyle = color; + ctx.fill(); +} + +/** + * A heart, used for the "love" eyes. The path is wider than it is tall, which + * is what makes it read as a heart rather than a blob at small sizes. + */ +function heartPath(ctx, cx, cy, r) { + ctx.beginPath(); + ctx.moveTo(cx, cy + r * 0.80); + ctx.bezierCurveTo(cx - r * 1.24, cy - r * 0.34, cx - r * 0.50, cy - r * 1.18, cx, cy - r * 0.40); + ctx.bezierCurveTo(cx + r * 0.50, cy - r * 1.18, cx + r * 1.24, cy - r * 0.34, cx, cy + r * 0.80); + ctx.closePath(); +} + +function fillHeart(ctx, cx, cy, r, color) { + heartPath(ctx, cx, cy, r); + ctx.fillStyle = color; + ctx.fill(); +} + +/** A teardrop, used by the crying expression. */ +function dropPath(ctx, cx, cy, size) { + ctx.beginPath(); + ctx.moveTo(cx, cy - size * 1.32); + ctx.bezierCurveTo(cx + size * 0.95, cy - size * 0.34, cx + size * 0.95, cy + size * 0.78, cx, cy + size * 0.78); + ctx.bezierCurveTo(cx - size * 0.95, cy + size * 0.78, cx - size * 0.95, cy - size * 0.34, cx, cy - size * 1.32); + ctx.closePath(); +} + +function strokeCircle(ctx, cx, cy, r, color, width) { + circlePath(ctx, cx, cy, r); + ctx.strokeStyle = color; + ctx.lineWidth = width; + ctx.stroke(); +} + +function tracePolyline(ctx, points, closed) { + if (!points.length) return; + ctx.beginPath(); + ctx.moveTo(points[0].x, points[0].y); + for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y); + if (closed) ctx.closePath(); +} + +function strokePolyline(ctx, points, { color, width, closed = false }) { + if (points.length < 2) return; + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = width; + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + tracePolyline(ctx, points, closed); + ctx.stroke(); + ctx.restore(); +} + +function fillPolygon(ctx, points, color) { + if (points.length < 3) return; + ctx.save(); + ctx.fillStyle = color; + tracePolyline(ctx, points, true); + ctx.fill(); + ctx.restore(); +} + +/** + * Trace a closed polygon with rounded corners. Used for the squarish + * サングラス lens: an ellipse cannot be angular, and a plain polygon has cusps. + * Each corner is cut back by `radius` (clamped so short edges cannot overlap) + * and joined with a quadratic through the original vertex. + */ +function traceRoundedPolygon(ctx, points, radius) { + const n = points.length; + ctx.beginPath(); + for (let i = 0; i < n; i++) { + const prev = points[(i + n - 1) % n]; + const cur = points[i]; + const next = points[(i + 1) % n]; + const inLen = Math.hypot(cur.x - prev.x, cur.y - prev.y) || 1; + const outLen = Math.hypot(next.x - cur.x, next.y - cur.y) || 1; + const cut = Math.min(radius, inLen / 2, outLen / 2); + const from = { x: cur.x + ((prev.x - cur.x) / inLen) * cut, y: cur.y + ((prev.y - cur.y) / inLen) * cut }; + const to = { x: cur.x + ((next.x - cur.x) / outLen) * cut, y: cur.y + ((next.y - cur.y) / outLen) * cut }; + if (i === 0) ctx.moveTo(from.x, from.y); + else ctx.lineTo(from.x, from.y); + ctx.quadraticCurveTo(cur.x, cur.y, to.x, to.y); + } + ctx.closePath(); +} + +/** Points along a quadratic Bézier, `steps` segments (steps + 1 points). */ +function quadraticPoints(p0, p1, p2, steps) { + const out = []; + for (let i = 0; i <= steps; i++) { + const t = i / steps; + const u = 1 - t; + out.push({ + x: u * u * p0.x + 2 * u * t * p1.x + t * t * p2.x, + y: u * u * p0.y + 2 * u * t * p1.y + t * t * p2.y, + }); + } + return out; +} + +/** A point on a cubic Bézier. */ +function cubicPoint(p0, p1, p2, p3, t) { + const u = 1 - t; + const a = u * u * u; + const b = 3 * u * u * t; + const c = 3 * u * t * t; + const d = t * t * t; + return { + x: a * p0.x + b * p1.x + c * p2.x + d * p3.x, + y: a * p0.y + b * p1.y + c * p2.y + d * p3.y, + }; +} + +/** Points along a cubic Bézier, `steps` segments (steps + 1 points). */ +function cubicPoints(p0, p1, p2, p3, steps) { + const out = []; + for (let i = 0; i <= steps; i++) out.push(cubicPoint(p0, p1, p2, p3, i / steps)); + return out; +} + +/** + * The four control points of the mouth's centreline: the same two ends, the same + * depth, but `bend` decides where the curve actually bends (see `sagBend`). + */ +function mouthControls(left, right, sag, bend) { + const width = right.x - left.x; + const y = left.y + (4 / 3) * sag; + return { + p0: left, + p1: { x: left.x + width * bend, y }, + p2: { x: right.x - width * bend, y }, + p3: right, + }; +} + +function rotate(points, pivot, degrees) { + if (!degrees) return points; + const a = (degrees * Math.PI) / 180; + const cos = Math.cos(a); + const sin = Math.sin(a); + return points.map((p) => { + const dx = p.x - pivot.x; + const dy = p.y - pivot.y; + return { x: pivot.x + dx * cos - dy * sin, y: pivot.y + dx * sin + dy * cos }; + }); +} + +/* --------------------------------------------------------------------- eyes */ + +/** + * Intersect the canvas clip with the eyeball disc and the (possibly closed) + * lids. Because the overlay plane is transparent and sits in front of the face, + * clipping is all that is needed: whatever is clipped away shows the real + * shaded face behind it. That is what makes the eyelid blend perfectly without + * baking a face-coloured background into the texture. + */ +function clipEye(ctx, eye, open, lower) { + circlePath(ctx, eye.cx, eye.cy, eye.r); + ctx.clip(); + + const upper = 1 - clamp(open, 0, 1); + if (upper > 0.0005) { + const rl = eye.r * EYE_LAYOUT.lidRadiusFactor; + const lowest = eye.cy - eye.r + 2 * eye.r * upper; + const cy = lowest - rl; + ctx.beginPath(); + ctx.moveTo(eye.cx - HUGE, cy); + ctx.lineTo(eye.cx - rl, cy); + ctx.arc(eye.cx, cy, rl, Math.PI, 0, true); // lower semicircle: bulges down + ctx.lineTo(eye.cx + HUGE, cy); + ctx.lineTo(eye.cx + HUGE, cy + HUGE); + ctx.lineTo(eye.cx - HUGE, cy + HUGE); + ctx.closePath(); + ctx.clip(); + } + + const bottom = clamp(lower, 0, 1); + if (bottom > 0.0005) { + const rl = eye.r * EYE_LAYOUT.lidRadiusFactor; + const highest = eye.cy + eye.r - 2 * eye.r * bottom; + const cy = highest + rl; + ctx.beginPath(); + ctx.moveTo(eye.cx - HUGE, cy); + ctx.lineTo(eye.cx - rl, cy); + ctx.arc(eye.cx, cy, rl, Math.PI, 0, false); // upper semicircle: bulges up + ctx.lineTo(eye.cx + HUGE, cy); + ctx.lineTo(eye.cx + HUGE, cy - HUGE); + ctx.lineTo(eye.cx - HUGE, cy - HUGE); + ctx.closePath(); + ctx.clip(); + } +} + +function lidPath(ctx, eye, amount, lower) { + const rl = eye.r * EYE_LAYOUT.lidRadiusFactor; + if (!lower) { + const lowest = eye.cy - eye.r + 2 * eye.r * (1 - amount); + ctx.beginPath(); + ctx.arc(eye.cx, lowest - rl, rl, Math.PI, 0, true); + } else { + const highest = eye.cy + eye.r - 2 * eye.r * amount; + ctx.beginPath(); + ctx.arc(eye.cx, highest + rl, rl, Math.PI, 0, false); + } +} + +/** The "eyes shut" artwork: a line, a chevron or a happy arch. */ +function drawShutEye(ctx, eye, spec, style) { + const layout = EYE_LAYOUT.closedLine; + const { line, width } = style; + + if (spec.closed === 'chevron') { + // The chevron points *at* the nose, matching the original artwork. + const vertex = { x: eye.cx + eye.towardNose * layout.vertex, y: eye.cy + layout.offsetY - 8 }; + const armX = eye.cx - eye.towardNose * layout.armX; + const spread = layout.spread * (spec.spread ?? 1); + strokePolyline(ctx, [vertex, { x: armX, y: vertex.y - spread }], { color: line, width }); + strokePolyline(ctx, [vertex, { x: armX, y: vertex.y + spread }], { color: line, width }); + return; + } + + if (spec.closed === 'three') { + // A real "3": an upper bowl and a lower bowl that meet at a single pinch on + // the nose side. Stacking two C's instead made the two lobes sit on top of + // each other; joining them at a point is what makes it read as the digit. + // `length` scales the whole shape. + const r = 34 * (spec.length ?? 1); + // Which way the digit faces. It used to follow the nose side, which made the + // pair a mirror image; each eye can now be set either way, because a pair of + // mirrored 3s does not always read the way you want. + const dir = (spec.threeFlip ? -1 : 1) * eye.towardNose; + const sx = eye.cx; + const cy = eye.cy + layout.offsetY; + const at = (x, y) => ({ x: sx + dir * r * x, y: cy + r * y }); + const pinch = at(0.72, 0); + const upper = quadraticPoints(at(0.02, -1.62), at(2.05, -1.40), pinch, 26); + const lower = quadraticPoints(pinch, at(2.05, 1.46), at(0.02, 1.78), 26); + strokePolyline(ctx, upper, { color: line, width }); + strokePolyline(ctx, lower, { color: line, width }); + return; + } + + if (spec.closed === 'arch') { + const edges = { x: eye.r, y: EYE_LAYOUT.arch.edgesUp }; + const points = quadraticPoints( + { x: eye.cx - edges.x, y: eye.cy + edges.y }, + { x: eye.cx, y: eye.cy + edges.y - EYE_LAYOUT.arch.apexUp * 2 }, + { x: eye.cx + edges.x, y: eye.cy + edges.y }, + 24, + ); + strokePolyline(ctx, points, { color: line, width }); + return; + } + + // Default: the gently slanted line of the original artwork, mirrored so it + // always slopes down towards the nose. With `closedLines` set to 2 or 3 the + // strokes share one endpoint instead - a ">" or bird's-foot shape, which is + // how manga draws a happily squeezed-shut eye. + const count = clamp(Math.round(spec.closedLines ?? 1), 1, 3); + if (count >= 2) { + const vertex = { x: eye.cx + eye.towardNose * layout.vertex, y: eye.cy + layout.offsetY - 8 }; + // Reach as far as the single line does, not just a short stub: the arms are + // the *long* form of the same eyelid the one-line version covers. + const outX = -eye.towardNose * layout.armSpan; + const arms = count === 2 + ? [{ x: outX, y: -layout.spread }, { x: outX, y: layout.spread }] + : [ + { x: outX, y: -layout.spread }, + { x: -eye.towardNose * Math.hypot(layout.armSpan, layout.spread), y: 0 }, + { x: outX, y: layout.spread }, + ]; + for (const arm of arms) { + strokePolyline(ctx, [vertex, { x: vertex.x + arm.x, y: vertex.y + arm.y }], { color: line, width }); + } + return; + } + + const half = (layout.length / 2) * (spec.length ?? 1); + const midX = eye.cx - eye.towardNose * layout.offsetX; + const midY = eye.cy + layout.offsetY; + const angle = ((layout.slantDeg * (spec.slant ?? 1) * eye.towardNose) * Math.PI) / 180; + const bow = (layout.bow ?? 0) * (spec.slant ?? 1); + const from = { x: midX - Math.cos(angle) * half, y: midY - Math.sin(angle) * half }; + const to = { x: midX + Math.cos(angle) * half, y: midY + Math.sin(angle) * half }; + const points = quadraticPoints(from, { x: midX, y: midY + bow * 2 }, to, 20); + strokePolyline(ctx, points, { color: line, width }); +} + +/** + * A stroke whose width runs from `w0` at the first point to `w1` at the last. + * + * Used for a ゴルゴ13-style brow: a filled wedge that comes to a point at one end + * reads as a heavy eyebrow, where a constant-width stroke reads as a soft arc. + */ +function taperedStroke(ctx, points, w0, w1, color) { + const count = points.length; + if (count < 2) return; + const side = [[], []]; + for (let i = 0; i < count; i++) { + const t = i / (count - 1); + const w = (w0 + (w1 - w0) * t) / 2; + const before = points[Math.max(0, i - 1)]; + const after = points[Math.min(count - 1, i + 1)]; + const dx = after.x - before.x; + const dy = after.y - before.y; + const len = Math.hypot(dx, dy) || 1; + const nx = -dy / len; + const ny = dx / len; + side[0].push({ x: points[i].x + nx * w, y: points[i].y + ny * w }); + side[1].push({ x: points[i].x - nx * w, y: points[i].y - ny * w }); + } + ctx.save(); + tracePolyline(ctx, [...side[0], ...side[1].reverse()], true); + ctx.fillStyle = color; + ctx.fill(); + ctx.restore(); +} + +/** An eyebrow: a short arc above the eye, mirrored between the two eyes so a + * positive `angle` always means "inner end down" (an angry brow). */ +function drawBrow(ctx, eye, spec, style, limits = WINDOW_LIMITS) { + const brow = style.brow; + if (!brow?.enabled) return; + const layout = EYE_LAYOUT.brow; + // 0 is allowed: a zero-length stroke with round caps is a dot, which is what a + // length of 0 is asking for. + const length = Math.max(0, (brow.length ?? 1) * layout.length); + const thickness = Math.max(1, (brow.thickness ?? 1) * layout.thickness); + const cy = eye.cy - layout.lift - (brow.height ?? 0) - (spec.browHeight ?? 0); + // `spacing` widens the gap between the two brows: a positive value moves each + // one away from the nose. `layout.offsetX` is the resting inset from the + // artwork (which the old code read off the wrong object, so it never applied). + const cx = eye.cx + eye.towardNose * (layout.offsetX - (brow.spacing ?? 0)); + const angle = (((brow.angle ?? 0) + (spec.browAngle ?? 0)) * eye.towardNose * Math.PI) / 180; + const half = length / 2; + const from = { x: cx - Math.cos(angle) * half, y: cy - Math.sin(angle) * half }; + const to = { x: cx + Math.cos(angle) * half, y: cy + Math.sin(angle) * half }; + const bow = (brow.curve ?? layout.curve) * length; + const points = quadraticPoints(from, { x: cx, y: cy - bow }, to, 16); + // A brow raised with the height slider used to run off the top of the canvas, + // where the clamped edge row was copied across the whole plate and the brow + // smeared upwards. Keep the whole stroke inside the artwork instead. + const top = limits.top + EDGE_MARGIN; + const highest = Math.min(...points.map((q) => q.y)) - thickness / 2; + if (highest < top) for (const q of points) q.y += top - highest; + // `taper` is how wide the *inner* (nose-side) end is: 1 = a plain stroke, and + // lower values turn the brow into a wedge that comes to a point at the nose. + const taper = clamp(brow.taper ?? 1, 0, 1); + const color = brow.color ?? style.line ?? '#55386e'; + // A tapered wedge has no shape at zero length, so a dot always takes the plain + // round-capped stroke. + if (taper >= 0.999 || length < 2) { + strokePolyline(ctx, points, { color, width: thickness }); + return; + } + const innerIsTo = eye.towardNose > 0; + taperedStroke( + ctx, + points, + thickness * (innerIsTo ? 1 : taper), + thickness * (innerIsTo ? taper : 1), + color, + ); +} + +/* ------------------------------------------------------- ほっぺ / 頭の模様 */ + +/** + * ほっぺ: a soft pink patch crossed by short diagonal hatch strokes, the classic + * manga blush. Drawn once per cheek; the caller draws these before the eyes. + */ +function drawCheek(ctx, cx, cy, spec) { + const size = clamp(spec.size ?? 1, 0.2, 3); + const r = CHEEK_LAYOUT.radius * size; + const ry = r * CHEEK_LAYOUT.squash; + + ctx.save(); + ctx.beginPath(); + ctx.ellipse(cx, cy, r, ry, 0, 0, TAU); + ctx.fillStyle = spec.color ?? '#f6a6b8'; + ctx.fill(); + // Clip the hatching to the patch, so the strokes keep a clean edge. + ctx.clip(); + + const lines = Math.max(0, Math.round(spec.lines ?? CHEEK_LAYOUT.lines)); + if (lines > 0) { + const angle = (CHEEK_LAYOUT.slant * Math.PI) / 180; + const dx = Math.cos(angle); + const dy = -Math.sin(angle); + const reach = r * 1.3; + ctx.strokeStyle = spec.hatchColor ?? '#e0708f'; + ctx.lineWidth = Math.max(1, CHEEK_LAYOUT.lineWidth * size); + ctx.lineCap = 'round'; + for (let i = 0; i < lines; i += 1) { + // Spread the strokes evenly across the patch. + const t = lines === 1 ? 0 : i / (lines - 1) - 0.5; + const px = cx + t * r * 1.2; + ctx.beginPath(); + ctx.moveTo(px - dx * reach, cy - dy * reach); + ctx.lineTo(px + dx * reach, cy + dy * reach); + ctx.stroke(); + } + } + ctx.restore(); +} + +/** The pair of cheeks: symmetric about the face's midline (see `EYE_LAYOUT`). */ +function drawCheeks(ctx, spec) { + if (!spec?.enabled) return; + const drop = CHEEK_LAYOUT.drop + clamp(spec.offsetY ?? 0, -400, 400); + const outward = CHEEK_LAYOUT.outward + clamp(spec.spacing ?? 0, -400, 400); + for (const layout of EYE_LAYOUT.eyes) { + // Outwards is away from the midline, i.e. the opposite of `towardNose`. + const cx = layout.cx - layout.towardNose * outward; + drawCheek(ctx, cx, layout.cy + drop, spec); + } +} + +/** + * 頭の模様: one of a few simple marks drawn on the forehead. Kept to a handful of + * shapes on purpose - the point is a generic manga device, not a particular + * character's artwork - and it starts off. + */ +function drawHeadMark(ctx, spec) { + const shape = spec.shape ?? 'off'; + if (shape === 'off' || shape === 'none') return; + const size = clamp(spec.size ?? 1, 0.2, 3); + const s = HEAD_MARK_LAYOUT.size * size; + const cx = HEAD_MARK_LAYOUT.cx + clamp(spec.offsetX ?? 0, -400, 400); + const cy = HEAD_MARK_LAYOUT.cy + clamp(spec.offsetY ?? 0, -400, 400); + + ctx.save(); + ctx.strokeStyle = spec.color ?? '#8a4fe0'; + ctx.fillStyle = spec.color ?? '#8a4fe0'; + ctx.lineWidth = Math.max(1, HEAD_MARK_LAYOUT.lineWidth * size); + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + if (shape === 'hook') { + // A short curved hook, like a comma. + ctx.beginPath(); + ctx.moveTo(cx - s * 1.05, cy + s * 0.45); + ctx.quadraticCurveTo(cx - s * 0.15, cy - s * 1.05, cx + s * 0.85, cy + s * 0.15); + ctx.stroke(); + } else if (shape === 'spiral') { + const steps = 60; + ctx.beginPath(); + for (let i = 0; i <= steps; i += 1) { + const t = i / steps; + const angle = t * TAU * 2.2; + const radius = s * (0.14 + 0.86 * t); + const x = cx + Math.cos(angle) * radius; + const y = cy + Math.sin(angle) * radius; + if (i === 0) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + } else if (shape === 'strokes') { + // Three short strokes standing side by side. + for (let i = -1; i <= 1; i += 1) { + ctx.beginPath(); + ctx.moveTo(cx + i * s * 0.62, cy - s * 0.6); + ctx.lineTo(cx + i * s * 0.62, cy + s * 0.6); + ctx.stroke(); + } + } else if (shape === 'dots') { + const radius = Math.max(1.5, ctx.lineWidth * 0.8); + for (let i = -1; i <= 1; i += 1) { + ctx.beginPath(); + ctx.arc(cx + i * s * 0.62, cy, radius, 0, TAU); + ctx.fill(); + } + } + ctx.restore(); +} + +/** + * The shared extras (ほっぺ and 頭の模様) are drawn once per face, before the eyes, + * so the eyes, brows and glasses win any overlap and the cheeks are not doubled. + */ +function drawFaceExtras(ctx, style) { + drawCheeks(ctx, style.cheeks); + drawHeadMark(ctx, style.headMark); +} + +/** + * One lens of a pair of 眼鏡 / サングラス, plus this eye's half of the bridge and its + * temple. + * + * Called once per eye from `drawEyes`, after the eyeball (or the shut-eye artwork) + * so the lens sits in front of the eye, and before that eye's tear so a teardrop + * falls past the lens. Nothing about a pair of glasses is per-eye, so the two + * halves are mirrored from `eye.towardNose` and meet at the face's midline. The + * kind picks the shape: a round 眼鏡 lens, or a wide angular サングラス one. + * + * `style.glasses` is the shared spec. In a line drawing the lens is left empty, so + * the paper behind shows through exactly as the eyeball's white does (see the note + * in `drawEyes`); the frames are then stroked in the line colour. + * + * @param {CanvasRenderingContext2D} ctx + * @param {{cx:number,cy:number,r:number,towardNose:number}} eye + * @param {boolean} line true in 線画 mode + * @param {object} style the bag `drawEyes` received + * @param {{top:number,bottom:number,left:number,right:number}} limits + */ +function drawGlasses(ctx, eye, line, style, limits) { + const spec = style.glasses; + if (!spec?.enabled) return; + + const r = eye.r; + const scale = clamp(spec.scale ?? 1, 0.2, 3); + // The two kinds share everything about *where* they sit but not their shape: + // 眼鏡 is a round lens, サングラス a wide angular one (see the layouts above). + const shades = spec.kind === 'sunglasses'; + const L = shades ? SUNGLASSES_LAYOUT : GLASSES_LAYOUT; + const rx = r * L.widthFactor * scale; + const ry = rx * L.heightFactor; + const frame = Math.max( + 1, + (spec.frameWidth ?? 1) * EYE_LAYOUT.lidStroke * (shades ? L.frameFactor : 1), + ); + const colour = line ? (style.line ?? '#55386e') : (spec.frameColor ?? '#2a1e33'); + // The outward direction (towards the temple) for this eye. The angular lens is + // built in a local frame whose u runs outwards, so the two sides mirror exactly. + const out = -eye.towardNose; + // The pointed outer corner makes the shades taller on that side; clamp against + // the full height so even that point cannot reach the canvas border. + const halfV = shades ? ry * Math.max(L.innerTop + L.topSkew, L.outerBottom) : ry; + + // Keep the lens (and so everything that hangs off it) inside the artwork. The + // rest of the file clamps against `limits` for the same reason: a mark that + // reaches the canvas border gets the edge row copied across the whole plate. + const lensCx = clamp(eye.cx, limits.left + EDGE_MARGIN + rx, limits.right - EDGE_MARGIN - rx); + const lensCy = clamp( + eye.cy + L.drop + (spec.offsetY ?? 0), + limits.top + EDGE_MARGIN + halfV, + limits.bottom - EDGE_MARGIN - halfV, + ); + // The face's midline: the two eyes are symmetric about it, so it is where the + // two halves of the bridge meet and what `tilt` turns the pair about. + const midX = (EYE_LAYOUT.eyes[0].cx + EYE_LAYOUT.eyes[1].cx) / 2; + // Local (u, v) -> canvas, with u outwards and v downwards. + const at = (u, v) => ({ x: lensCx + out * u, y: lensCy + v }); + + ctx.save(); + // `tilt` leans the whole pair at once. Rotating about the midline keeps the + // bridge centred between the lenses instead of swinging it off to one side. + if (spec.tilt) { + ctx.translate(midX, lensCy); + ctx.rotate((clamp(spec.tilt, -90, 90) * Math.PI) / 180); + ctx.translate(-midX, -lensCy); + } + + // --- lens ------------------------------------------------------------ + // The one path is filled and then stroked, so the fill and the frame can never + // drift apart. + if (shades) { + // A long cat-eye, not an ellipse: the outer end starts low, rises to a + // pointed, lifted outer corner set further out, and the top edge sweeps back + // towards the nose. The inner end is short, so the lens tapers inwards. + const lens = [ + at(-rx, -ry * L.innerTop), // inner top (near the nose) + at(rx * L.tipX, -ry * (L.innerTop + L.topSkew)), // pointed, lifted outer corner + at(rx * L.outerEndX, ry * L.outerBottom), // low outer end + at(-rx, ry * L.innerBottom), // inner bottom (pinched towards the nose) + ]; + traceRoundedPolygon(ctx, lens, ry * L.corner); + if (!line) { + ctx.globalAlpha = clamp(spec.lensOpacity ?? 0, 0, 1); + ctx.fillStyle = spec.lensColor ?? '#2b2433'; + ctx.fill(); + ctx.globalAlpha = 1; + } + ctx.strokeStyle = colour; + ctx.lineWidth = frame; + ctx.stroke(); + // A light streak inside the glass, clipped to the lens so it can never spill + // over the frame. Shaded drawings only: 線画's lens is empty paper. + if (!line) { + ctx.save(); + traceRoundedPolygon(ctx, lens, ry * L.corner); + ctx.clip(); + strokePolyline(ctx, [at(-rx * 0.6, ry * 0.15), at(rx * 0.4, -ry * 0.85)], { + color: 'rgba(255, 255, 255, 0.5)', + width: Math.max(2, rx * L.highlightWidth), + }); + ctx.restore(); + } + } else { + ctx.beginPath(); + ctx.ellipse(lensCx, lensCy, rx, ry, 0, 0, TAU); + ctx.closePath(); + if (!line) { + ctx.globalAlpha = clamp(spec.lensOpacity ?? 0, 0, 1); + ctx.fillStyle = spec.lensColor ?? '#2b2433'; + ctx.fill(); + ctx.globalAlpha = 1; + } + ctx.strokeStyle = colour; + ctx.lineWidth = frame; + ctx.stroke(); + } + + // --- bridge ---------------------------------------------------------- + // Each eye draws the half of the bridge from its own lens to the midline. + const innerX = eye.towardNose > 0 + ? Math.min(lensCx + rx, midX) + : Math.max(lensCx - rx, midX); + if (shades) { + // A short, thick, level bar high on the lenses: with the two lenses it reads + // as one continuous visor across the eyes. + const barY = lensCy - ry * L.bridgeLift; + strokePolyline(ctx, [{ x: innerX, y: barY }, { x: midX, y: barY }], { + color: colour, + width: frame * L.bridgeWidth, + }); + } else { + // The two halves meet at the midline with a horizontal tangent, so the join is smooth. + const noseX = lensCy - L.bridgeRise; + strokePolyline(ctx, quadraticPoints( + { x: innerX, y: lensCy }, + { x: (innerX + midX) / 2, y: noseX }, + { x: midX, y: noseX }, + 12, + ), { color: colour, width: frame * L.bridgeWidth }); + } + + // --- temple ---------------------------------------------------------- + // A stub outwards from the outer edge of the lens. It stays short on purpose: + // the plate only reaches so far, and a temple that ran off it would smear. The + // round pair's outer edge is a vertical line at the lens centre height; the + // shades' outer end sits low, so their stub starts down there instead of + // floating below the lens. + const outerX = shades + ? lensCx - eye.towardNose * rx * L.outerEndX + : lensCx - eye.towardNose * rx; + const outerY = shades ? lensCy + ry * L.outerBottom * 0.7 : lensCy; + const reach = clamp( + outerX - eye.towardNose * r * L.templeLength, + limits.left + EDGE_MARGIN, + limits.right - EDGE_MARGIN, + ); + strokePolyline(ctx, [ + { x: outerX, y: outerY }, + { + x: eye.towardNose > 0 ? Math.min(reach, outerX) : Math.max(reach, outerX), + y: clamp(outerY - L.templeRise, limits.top + EDGE_MARGIN, limits.bottom - EDGE_MARGIN), + }, + ], { color: colour, width: frame }); + + ctx.restore(); +} + +/** + * Draw the pair of eyes into a 1024 x 380 canvas. + * + * @param {CanvasRenderingContext2D} ctx + * @param {object} p + * @param {'paint'|'line'} [p.mode] paint = filled cartoon eyes, line = outline only + * @param {object} p.eyes `{ left, right }`, each `{ open, lookX, lookY, closed }` + * @param {object} [p.style] colours and shared shaping parameters + */ +export function drawEyes(ctx, p) { + const mode = p.mode ?? 'paint'; + const line = mode === 'line'; + const style = p.style ?? {}; + const limits = style.limits ?? WINDOW_LIMITS; + const white = style.white ?? '#ffffff'; + const irisColor = style.iris ?? '#150e1b'; + const lineColor = style.line ?? '#55386e'; + const lidWidth = style.lidWidth ?? EYE_LAYOUT.lidStroke; + const irisScale = style.irisScale ?? 1; + const lookMax = style.lookMax ?? 1; + const highlightOn = style.highlight !== false; + const heartScale = style.heartScale ?? 0.85; + const heartColor = style.heartColor ?? '#e0344f'; + const irisRadius = EYE_LAYOUT.irisRadius * irisScale; + const travel = Math.max(0, EYE_LAYOUT.radius - irisRadius); + const heartTravel = EYE_LAYOUT.radius * 0.9; + const lowerLid = clamp(style.lowerLid ?? 0, 0, 1); + + // ほっぺ and 頭の模様 belong to the whole face, so they are drawn once here + // rather than inside the per-eye loop below. + drawFaceExtras(ctx, style); + + for (const layout of EYE_LAYOUT.eyes) { + const spec = (p.eyes ?? {})[layout.key] ?? {}; + const open = clamp(spec.open ?? 1, 0, 1); + const eye = { + // `eyeX` slides this eye - and its lid, brow and tear - sideways on its own. + cx: layout.cx + clamp(spec.eyeX ?? 0, -400, 400), + cy: layout.cy, + r: EYE_LAYOUT.radius, + towardNose: layout.towardNose, + }; + const lineStyle = { line: lineColor, width: lidWidth }; + const isHeart = (spec.irisShape ?? 'circle') === 'heart'; + + drawBrow(ctx, eye, spec, style, limits); + + // --- tear ---------------------------------------------------------- + // A teardrop hangs below the eye, so it is drawn on top of everything else + // (the opaque eyeball would otherwise cover it) and for a shut eye too. The + // amount, the height and the tilt are all *per eye*, because one eye crying + // while the other does not is a real expression. + const drawTear = () => { + const amount = clamp(spec.tear ?? 0, 0, 1.6); + if (amount <= 0.01) return; + const size = EYE_LAYOUT.tear.size * amount; + const tearX = eye.cx + clamp(spec.tearX ?? 0, -400, 400) - layout.towardNose * EYE_LAYOUT.tear.offsetX; + let tearY = eye.cy + EYE_LAYOUT.tear.offsetY + (spec.tearY ?? 0); + // The drop hangs from `cy - 1.32r` to `cy + 0.78r`. Keep its lower tip + // inside the artwork: a drop that reached the canvas border used to be + // smeared down the chin by the clamp. + const tearBottom = limits.bottom - EDGE_MARGIN; + if (tearY + size * 0.78 > tearBottom) tearY = tearBottom - size * 0.78; + ctx.save(); + if (spec.tearTilt) { + ctx.translate(tearX, tearY); + ctx.rotate((spec.tearTilt * Math.PI) / 180); + ctx.translate(-tearX, -tearY); + } + dropPath(ctx, tearX, tearY, size); + if (!line) { + ctx.fillStyle = style.tearColor ?? '#8fd8ff'; + ctx.fill(); + } + ctx.strokeStyle = lineColor; + ctx.lineWidth = lidWidth * 0.55; + ctx.stroke(); + ctx.restore(); + }; + + if (open <= 0.02) { + drawShutEye(ctx, eye, spec, lineStyle); + // The glasses sit over the shut-eye artwork too, but under the tear below. + drawGlasses(ctx, eye, line, style, limits); + drawTear(); + continue; + } + + // --- eyeball ------------------------------------------------------- + ctx.save(); + // A heart is not an eyeball, so once the eye is fully open it is not clipped + // to the eyeball circle - that is what lets a heart be much larger than the + // iris. While the lid is partly closed the clip is still needed. + if (!isHeart || open < 0.999) clipEye(ctx, eye, open, lowerLid * (1 - open)); + + const eyeTravel = isHeart ? heartTravel * lookMax : travel * lookMax; + let dx = clamp(spec.lookX ?? 0, -1, 1) * eyeTravel; + let dy = -clamp(spec.lookY ?? 0, -1, 1) * eyeTravel; + const dist = Math.hypot(dx, dy); + if (dist > eyeTravel && dist > 0) { + dx = (dx / dist) * eyeTravel; + dy = (dy / dist) * eyeTravel; + } + + // The eyeball's white is only painted in the shaded styles: in line art the + // paper behind shows through, which is what a line drawing wants. (The SVG + // export traces the alpha mask, so a white fill would close the eye up + // completely.) + if (!line && !(isHeart && style.heartHideWhite)) fillCircle(ctx, eye.cx, eye.cy, eye.r, white); + const irisX = eye.cx + dx; + const irisY = eye.cy + dy; + if (isHeart) { + // A heart is wider than a circle, so cap it at the plane rather than the + // eyeball; a red heart has no pupil highlight (it would sit on top of it). + // A heart is not an eyeball, so it may grow well past the eye: the plate + // keeps the whole canvas, and the eyes plate is drawn over the mouth, so a + // big heart has room. The cap only stops it from running off the canvas. + const heartRadius = Math.min(irisRadius * heartScale, EYE_LAYOUT.radius * 2.1); + fillHeart(ctx, irisX, irisY, heartRadius, line ? lineColor : heartColor); + } else { + fillCircle(ctx, irisX, irisY, irisRadius, line ? lineColor : irisColor); + } + if (highlightOn && !isHeart) { + const hx = irisX + layout.towardNose * EYE_LAYOUT.highlightOffset.x * irisScale; + const hy = irisY + EYE_LAYOUT.highlightOffset.y * irisScale; + const hr = EYE_LAYOUT.highlightRadius * irisScale; + if (line) { + // Punch the sparkle out of the iris rather than painting it white. On + // screen the paper behind shows through, and in the SVG export (which + // only sees alpha) it stays a hole in the pupil - both of which read as + // the white glint of the original artwork. + ctx.save(); + ctx.globalCompositeOperation = 'destination-out'; + fillCircle(ctx, hx, hy, hr, '#000000'); + ctx.restore(); + } else { + fillCircle(ctx, hx, hy, hr, white); + } + } + ctx.restore(); + + // Between the eyeball and the tear: the lens covers the eye, and a tear still + // falls in front of it. + drawGlasses(ctx, eye, line, style, limits); + + drawTear(); + + // --- lid strokes --------------------------------------------------- + // Faded in as the lid starts to cover the eye, so opening the eye all the + // way leaves the clean original artwork with no extra line. + const lidFade = clamp((0.95 - open) / 0.1, 0, 1); + if (lidFade > 0.01 || lowerLid > 0.01) { + ctx.save(); + circlePath(ctx, eye.cx, eye.cy, eye.r); + ctx.clip(); + ctx.globalAlpha = line ? 1 : lidFade; + ctx.strokeStyle = lineColor; + ctx.lineWidth = lidWidth; + if (lidFade > 0.01) { + lidPath(ctx, eye, open, false); + ctx.stroke(); + } + if (lowerLid > 0.01) { + ctx.globalAlpha = line ? 1 : lowerLid; + lidPath(ctx, eye, lowerLid, true); + ctx.stroke(); + } + ctx.restore(); + } + + // --- outline (line-art mode only) --------------------------------- + if (line) strokeCircle(ctx, eye.cx, eye.cy, eye.r, lineColor, lidWidth * 0.75); + } +} + +/* -------------------------------------------------------------------- mouth */ + +/** + * Draw the mouth into a 1024 x 380 canvas. + * + * @param {CanvasRenderingContext2D} ctx + * @param {object} p + * @param {'paint'|'line'} [p.mode] + */ +export function drawMouth(ctx, p) { + const mode = p.mode ?? 'paint'; + const line = mode === 'line'; + const L = MOUTH_LAYOUT; + const limits = p.limits ?? WINDOW_LIMITS; + // The artwork's real edges, in the artwork's own coordinates, with a margin + // kept clear. `top` is negative when the plate reaches above the window, which + // is the room a moved mouth has to work with. + const edgeLeft = limits.left + EDGE_MARGIN; + const edgeRight = limits.right - EDGE_MARGIN; + const edgeTop = limits.top + EDGE_MARGIN; + const edgeBottom = limits.bottom - EDGE_MARGIN; + + const openAmount = clamp(p.open ?? 0, 0, 1); + const thickness = L.thickness * clamp(p.thickness ?? 1, 0.2, 3); + const cornerAmount = clamp(p.corners ?? 1, 0, 1.6); + // The corner strokes flick out past the ends of the chord, so the ends cannot + // use the whole canvas: a very wide mouth used to smear sideways off the plate. + const cornerReach = L.corner.toX * cornerAmount; + const halfChord = Math.min( + L.halfChord * clamp(p.width ?? 1, 0.2, 1.6), + Math.min(L.centreX - (edgeLeft + cornerReach), (edgeRight - cornerReach) - L.centreX), + ); + + // A negative smile bulges the line upwards, which reads as a frown. + const sagRaw = L.sag * clamp(p.smile ?? 1, -0.55, 1.4); + // A frown's middle is the highest point of the mouth, and that is exactly + // where the nose is in the way, so slide the whole mouth down until the curve + // is in the open. The push is worked out from the *base* position and the + // height slider is added afterwards: adding it first made the push cancel the + // slider exactly, which is why dragging ‟口の高さ” did nothing at all on a + // frowning mouth like むっと. + const base = L.chordY + Math.max(0, L.noseClear - (L.chordY + sagRaw)); + let y0 = base + (p.offsetY ?? 0); + // The smile flattens slightly as the mouth opens, so the whole mouth keeps + // fitting inside the band the mouth plane actually shows. + let sag = sagRaw * (1 - L.openFlatten * openAmount); + // Keep the whole mark on the canvas. The corner strokes sit *above* the ends of + // the chord, so the allowance is not symmetric - padding the bottom by the + // corner's depth used to cost most of the height slider's travel. + const cornerRise = L.corner.toY * cornerAmount + thickness; + const bottomEdge = y0 + Math.max(0, sag) + thickness; + if (bottomEdge > edgeBottom) y0 -= bottomEdge - edgeBottom; + const topEdge = y0 + Math.min(0, sag) - cornerRise; + if (topEdge < edgeTop) y0 += edgeTop - topEdge; + const pivot = { x: L.centreX, y: y0 + sag * 0.5 }; + const tilt = p.tilt ?? 0; + + const strokeColor = line ? (p.line ?? '#3a2a4a') : (p.color ?? '#ff1a44'); + const innerColor = p.innerColor ?? '#4a0f1e'; + const tongueColor = line ? (p.line ?? '#3a2a4a') : (p.tongueColor ?? '#ff2d2d'); + + const left = { x: L.centreX - halfChord, y: y0 }; + const right = { x: L.centreX + halfChord, y: y0 }; + const lip = mouthControls(left, right, sag, L.sagBend); + const arc = cubicPoints(lip.p0, lip.p1, lip.p2, lip.p3, 96); + + const tongueAmount = clamp(p.tongue ?? 1, 0, 1.6); + // How far the tongue hangs *out* of the mouth (below the lip). Separate from + // `tongue`, which is the one that pokes up over the lip of a closed mouth. + const tongueOutAmount = clamp(p.tongueOut ?? 0, 0, 1); + + // --- a round "O" mouth (surprised, singing) --------------------------- + const roundAmount = clamp(p.round ?? 0, 0, 1); + if (roundAmount > 0.004) { + let ry = L.sag * 0.42 * roundAmount * clamp(p.thickness ?? 1, 0.5, 2); + // The nose hides the middle of the upper face, so keep the whole oval below + // it and inside the plate. (`L.safeBottom` is only the round mouth's own size + // limit; it no longer has to stay clear of the canvas edge.) + ry = Math.min(ry, (L.safeBottom - thickness / 2 - L.noseClear) / 2.1); + const rx = Math.min(ry * 1.15 * clamp(p.width ?? 1, 0.2, 1.6), L.halfChord * 0.8); + const centreY = clamp(y0 + sag * 0.5, L.noseClear + ry * 1.02, edgeBottom - thickness / 2 - ry * 1.02); + if (ry > 5) { + ctx.save(); + ctx.translate(pivot.x, pivot.y); + ctx.rotate((tilt * Math.PI) / 180); + ctx.translate(-pivot.x, -pivot.y); + ctx.beginPath(); + ctx.ellipse(L.centreX, centreY, rx, ry, 0, 0, TAU); + if (!line) { + ctx.fillStyle = innerColor; + ctx.fill(); + if (tongueAmount > 0.01) { + ctx.beginPath(); + ctx.ellipse(L.centreX, centreY + ry * 0.46, rx * 0.52, ry * 0.4, 0, 0, TAU); + ctx.fillStyle = tongueColor; + ctx.fill(); + } + if (tongueOutAmount > 0.01) { + // A tongue hanging out below the round mouth. Its foot is a flat line + // inside the lower lip; the tip is clamped to the plate's lower edge. + const drop = Math.min(L.tongueOut.height * tongueOutAmount, Math.max(0, edgeBottom - (centreY + ry * 0.5))); + if (drop > 4) { + const half = (L.tongueOut.width * tongueOutAmount) / 2; + const footY = centreY + ry * 0.5; + ctx.beginPath(); + ctx.moveTo(L.centreX - half, footY); + for (let i = 0; i <= 26; i++) { + const dx = 1 - 2 * (i / 26); + ctx.lineTo(L.centreX + dx * half, footY + drop * (1 - Math.pow(Math.abs(dx), L.tongueOut.crown))); + } + ctx.closePath(); + ctx.fillStyle = tongueColor; + ctx.fill(); + } + } + } + ctx.strokeStyle = strokeColor; + ctx.lineWidth = line ? thickness * 0.8 : thickness; + ctx.stroke(); + ctx.restore(); + } + return; + } + + // The smile line is the upper lip. Opening the mouth drops the lower jaw + // below it, and the room for that is limited by the texture band the mouth + // plane shows - otherwise the jaw is silently clipped away. + // Everything has to fit in the part of the plane that faces the camera. + let rise = L.openRise * openAmount; + const budget = edgeBottom - thickness / 2 - y0; + if (sag + rise > budget) { + rise = Math.max(0, budget - Math.min(sag, budget)); + if (sag + rise > budget) sag = Math.max(-80, budget - rise); + } + const jawCubic = mouthControls(left, right, sag + rise, L.sagBend); + const jaw = cubicPoints(jawCubic.p0, jawCubic.p1, jawCubic.p2, jawCubic.p3, 96); + const jawAt = (t) => cubicPoint(jawCubic.p0, jawCubic.p1, jawCubic.p2, jawCubic.p3, t); + const lipAt = (t) => cubicPoint(lip.p0, lip.p1, lip.p2, lip.p3, t); + const openShape = rotate([...arc, ...jaw.slice(1, -1).reverse()], pivot, tilt); + + const tonguePos = clamp(p.tonguePos ?? L.tongue.pos, 0.05, 0.95); + const tongueWidth = L.tongue.width * tongueAmount; + const tongueHeight = L.tongue.height * tongueAmount; + + /** + * The tongue, rising from `curve` to `height` above its middle. + * + * `pointAt(t)` is that same curve as a function of t, so the tongue's foot can + * sit along it without this needing to know what kind of curve it is. + */ + function drawTongue(pointAt, curve, height) { + const arcLength = Math.max(1, chordLength(curve)); + const dt = clamp(tongueWidth / 2 / arcLength, 0.01, 0.45); + const t0 = clamp(tonguePos - dt, 0, 1); + const t1 = clamp(tonguePos + dt, 0, 1); + const base = []; + for (let i = 0; i <= 16; i++) base.push(pointAt(t0 + ((t1 - t0) * i) / 16)); + const mid = pointAt(clamp(tonguePos, 0, 1)); + const half = tongueWidth / 2; + // The foot runs left to right; the crown comes back right to left, so the two + // together are already a closed ring. + const footRight = base[base.length - 1]; + const footLeft = base[0]; + const crown = []; + const steps = 26; + for (let i = 0; i <= steps; i++) { + const f = i / steps; + const dx = 1 - 2 * f; + const footY = footRight.y + (footLeft.y - footRight.y) * f; + crown.push({ + x: mid.x + dx * half, + y: footY - height * (1 - Math.pow(Math.abs(dx), L.tongue.crown)), + }); + } + const shaped = rotate([...base, ...crown], pivot, tilt); + if (line) { + strokePolyline(ctx, shaped, { color: strokeColor, width: thickness * 0.8, closed: true }); + return; + } + tracePolyline(ctx, shaped, true); + ctx.fillStyle = tongueColor; + ctx.fill(); + } + + /** + * The tongue lolling *out* of the mouth, hanging below `curve`. + * + * The mirror of `drawTongue`: the foot sits along the lip (or the lower jaw + * when the mouth is open) and the crown drops *below* it. The tip is clamped + * against the plate's real lower edge, so a tongue on a low mouth gets shorter + * instead of being smeared off the chin by the texture's clamp. + */ + function drawTongueOut(pointAt, curve, height) { + const half = (L.tongueOut.width * tongueOutAmount) / 2; + const pos = clamp(p.tongueOutPos ?? L.tongueOut.pos, 0.05, 0.95); + const arcLength = Math.max(1, chordLength(curve)); + const dt = clamp(half / arcLength, 0.01, 0.45); + const t0 = clamp(pos - dt, 0, 1); + const t1 = clamp(pos + dt, 0, 1); + const base = []; + for (let i = 0; i <= 16; i++) base.push(pointAt(t0 + ((t1 - t0) * i) / 16)); + const mid = pointAt(clamp(pos, 0, 1)); + const drop = Math.min(height, Math.max(0, edgeBottom - mid.y)); + if (drop < 2) return; + const footRight = base[base.length - 1]; + const footLeft = base[0]; + const crown = []; + const steps = 26; + for (let i = 0; i <= steps; i++) { + const f = i / steps; + const dx = 1 - 2 * f; + const footY = footRight.y + (footLeft.y - footRight.y) * f; + crown.push({ + x: mid.x + dx * half, + y: footY + drop * (1 - Math.pow(Math.abs(dx), L.tongueOut.crown)), + }); + } + const shaped = rotate([...base, ...crown], pivot, tilt); + if (line) { + strokePolyline(ctx, shaped, { color: strokeColor, width: thickness * 0.8, closed: true }); + return; + } + tracePolyline(ctx, shaped, true); + ctx.fillStyle = tongueColor; + ctx.fill(); + } + + if (openAmount > 0.004) { + if (!line) fillPolygon(ctx, openShape, innerColor); + // The tongue rises from the lower lip *into* the mouth, so it has to arrive + // with the opening: at a hair's width the jaw curve is a sliver, and the + // tongue used to burst straight out of it and sit on the chin. + const tongueOpen = clamp((openAmount - 0.06) / 0.24, 0, 1); + if (tongueOutAmount > 0.01 && tongueOpen > 0.01) { + // A tongue lolling *out* over the lower jaw is not clipped to the mouth: + // it hangs in front of the chin. Drawn before the outline, which then + // crosses its root. + drawTongueOut(jawAt, jaw, L.tongueOut.height * tongueOutAmount * tongueOpen); + } else if (tongueAmount > 0.01 && tongueOpen > 0.01) { + ctx.save(); + tracePolyline(ctx, openShape, true); + ctx.clip(); + // Inside an open mouth the tongue sits on the lower jaw. + drawTongue(jawAt, jaw, tongueHeight * tongueOpen * (1 + openAmount * 0.3)); + ctx.restore(); + } + // One outline around the whole mouth reads as lips; the smile stroke alone + // would leave the lower edge as a bare colour change. + strokePolyline(ctx, openShape, { color: strokeColor, width: thickness, closed: true }); + } else { + // Closed lips - but the tongue still pokes out. That is what the original + // artwork does (the mouth reads as a smile with the tongue showing, like + // ペコちゃん), and it is why a plain line looked wrong there. `tongueOut` + // hangs the tongue the other way, *below* the lip line. The lip line goes on + // afterwards, so the tongue comes out from under it. + if (tongueOutAmount > 0.01) { + drawTongueOut(lipAt, arc, L.tongueOut.height * tongueOutAmount); + } else if (tongueAmount > 0.01) { + drawTongue(lipAt, arc, tongueHeight); + } + strokePolyline(ctx, rotate(arc, pivot, tilt), { color: strokeColor, width: thickness }); + } + + // --- corner marks --------------------------------------------------- + if (cornerAmount > 0.01) { + const C = L.corner; + const cornerAngle = p.cornerAngle ?? 0; + for (const [end, side] of [[left, -1], [right, 1]]) { + const from = { x: end.x + C.fromX * side * cornerAmount, y: end.y - C.fromY * cornerAmount }; + const to = { x: end.x - C.toX * side * cornerAmount, y: end.y - C.toY * cornerAmount }; + // A smooth curve, not a three-point kink. `mid` is the control point, so it + // is pulled twice as far as the bow should reach; both corners bow the same + // way (downwards on screen), which is what the original artwork does. + const control = { + x: (from.x + to.x) / 2, + y: (from.y + to.y) / 2 + (C.curve ?? 26) * cornerAmount, + }; + const curve = quadraticPoints(from, control, to, 16); + // `cornerAngle` tilts the whole mark around the mouth corner, mirrored so + // both sides move together. + const shaped = cornerAngle ? rotate(curve, end, cornerAngle * side) : curve; + strokePolyline(ctx, rotate(shaped, pivot, tilt), { + color: line ? strokeColor : (p.cornerColor ?? '#725497'), + // The *length* of the corner mark follows `corners`, but its thickness + // does not: `corners: 0.71` is the length that matches the original, and + // the original's stroke is the full thickness. + width: C.width, + }); + } + } +} + +/** Approximate length of a polyline. */ +function chordLength(points) { + let total = 0; + for (let i = 1; i < points.length; i++) { + total += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y); + } + return total; +} |