additional new face stuff

This commit is contained in:
max 2026-02-08 23:27:48 +01:00
parent da4cb8a6e6
commit 96a2048cb6
2 changed files with 101 additions and 25 deletions

View File

@ -26,6 +26,7 @@
const eyeR = document.getElementById("eyeR");
const eyesGroup = document.getElementById("eyesGroup");
const mouth = document.getElementById("mouth");
const mouthHi = document.getElementById("mouthHi");
// Touch overlay show
let overlayTimer = null;
@ -46,6 +47,12 @@
el.setAttribute("stroke-linecap", "round");
}
function applyHighlightStyle(el) {
// Inlay/Highlight wie Vorlage (heller, ohne Stroke)
el.setAttribute("fill", "rgba(230,255,255,0.35)");
el.setAttribute("stroke", "none");
}
// Helpers: Ellipse path (absolute, clean)
function ellipsePath(cx, cy, rx, ry) {
return `M ${cx-rx},${cy}
@ -93,38 +100,90 @@
happy: {
// Eyes: thick, filled, closed (no "eyebrow" look), positioned lower
eyeL: `M 350,308
Q 395,252 440,308
Q 395,276 350,308 Z`,
// Augen: Außen-U minus Innen-U (evenodd) -> echtes "U-Modul" wie Vorlage
eyeL: `M 345,230
Q 395,185 445,230
L 445,312
Q 395,285 345,312
Z
M 368,240
Q 395,214 422,240
L 422,296
Q 395,276 368,296
Z`,
eyeR: `M 560,308
Q 605,252 650,308
Q 605,276 560,308 Z`,
eyeR: `M 555,230
Q 605,185 655,230
L 655,312
Q 605,285 555,312
Z
M 578,240
Q 605,214 632,240
L 632,296
Q 605,276 578,296
Z`,
// Mund: Banana-Band (Außen) wie Vorlage (kleiner, bis etwa Augenmitte)
mouth: `M 395,360
Q 500,344 605,360
Q 640,410 610,468
Q 500,520 390,468
Q 360,410 395,360
Z`,
// Mouth: smaller + centered (about "up to mid-eye width")
mouth: `M 410,392
Q 500,475 590,392
Q 565,452 500,452
Q 435,452 410,392 Z`,
// Mund-Highlight (Inlay): kleiner, etwas höher
mouthHi: `M 415,382
Q 500,368 585,382
Q 610,412 592,446
Q 500,476 408,446
Q 390,412 415,382
Z`,
// Speaking visemes: same style family, not oversized
// Sprechen: gleiche Familie, nur etwas "tiefer" öffnen
visemes: [
`M 410,392
Q 500,475 590,392
Q 565,452 500,452
Q 435,452 410,392 Z`,
`M 395,360
Q 500,344 605,360
Q 640,410 610,468
Q 500,520 390,468
Q 360,410 395,360
Z`,
`M 402,384
Q 500,492 598,384
Q 570,466 500,466
Q 430,466 402,384 Z`,
`M 388,354
Q 500,336 612,354
Q 652,414 618,484
Q 500,546 382,484
Q 348,414 388,354
Z`,
`M 392,374
Q 500,512 608,374
Q 575,484 500,484
Q 425,484 392,374 Z`,
`M 380,346
Q 500,328 620,346
Q 665,420 625,505
Q 500,575 375,505
Q 335,420 380,346
Z`,
],
visemesHi: [
`M 415,382
Q 500,368 585,382
Q 610,412 592,446
Q 500,476 408,446
Q 390,412 415,382
Z`,
`M 410,378
Q 500,362 590,378
Q 620,414 600,456
Q 500,492 400,456
Q 380,414 410,378
Z`,
`M 405,372
Q 500,354 595,372
Q 632,418 608,470
Q 500,510 392,470
Q 368,418 405,372
Z`,
],
allowLook: false,
@ -294,6 +353,12 @@
function render() {
const cfg = ICONS[state.emotion] ?? ICONS.neutral;
// evenodd erlaubt "Aussparungen" (Innenpfade) in Augen/Mund
eyeL.setAttribute("fill-rule", "evenodd");
eyeR.setAttribute("fill-rule", "evenodd");
mouth.setAttribute("fill-rule", "evenodd");
mouthHi.setAttribute("fill-rule", "evenodd");>
applyStyle(eyeL);
applyStyle(eyeR);
applyStyle(mouth);
@ -304,6 +369,16 @@
const mouthPath = (state.speaking && cfg.visemes) ? cfg.visemes[visemeIndex] : cfg.mouth;
mouth.setAttribute("d", mouthPath);
// Highlight/Inlay
if (cfg.mouthHi) {
const mouthHiPath = (state.speaking && cfg.visemesHi) ? cfg.visemesHi[visemeIndex] : cfg.mouthHi;
mouthHi.style.display = "";
applyHighlightStyle(mouthHi);
mouthHi.setAttribute("d", mouthHiPath);
} else {
mouthHi.style.display = "none";
}
applyLook();
}

View File

@ -25,6 +25,7 @@
<path id="eyeR" d="" />
</g>
<path id="mouth" d="" />
<path id="mouthHi" d="" />
</g>
</svg>