커서를 따라보는 캐릭터 만들기 2편, 193프레임에서 21개 포즈 고르기

mkdir -p frames
ffmpeg -v error -i main.mp4 frames/%03d.png
ls frames | wc -l   # 193

import numpy as np
from PIL import Image
 
def face(i):
    # 1920×1080 프레임에서 얼굴 주변만 잘라 회색조 100×85로 줄인다
    im = Image.open(f"frames/{i + 1:03d}.png").crop((760, 60, 1160, 400))
    return np.asarray(im.convert("L").resize((100, 85)), np.float32).ravel()
 
X = np.stack([face(i) for i in range(193)])
X -= X.mean(axis=0)
U, s, Vt = np.linalg.svd(X, full_matrices=False)
pc1 = U[:, 0] * s[0]                              # 프레임별 첫 번째 주성분 점수
diff = np.abs(np.diff(X, axis=0)).mean(axis=1)    # 이웃 프레임 간 변화량

# 원본 프레임 번호. 같은 포즈가 2프레임씩 반복돼서 포즈가 바뀌는 프레임만 쓴다.
#   80 → 68 : 왼쪽 끝에서 왼쪽 위로 (68~74 전환을 거꾸로)
#   20 → 0  : 왼쪽 위에서 정면으로 (0~20 전환을 거꾸로)
#   136 → 146: 정면에서 오른쪽으로. 0번과 135번은 같은 정면이라 자연스럽게 이어진다.
SEQUENCE = [80, 74, 72, 70, 68, 20, 19, 17, 16, 14, 13, 12, 10, 8, 0,
            136, 138, 140, 142, 144, 146]
IDLE_SOURCE = 0  # 정면(아이들) 포즈

import cv2
import numpy as np
 
def matte(img):
    a = np.asarray(img.convert("RGB")).astype(np.float32)
    border = np.concatenate([a[0], a[-1], a[:, 0], a[:, -1]])
    bg = np.median(border, axis=0)            # 테두리의 중앙값 = 배경색
    dist = np.abs(a - bg).max(axis=2)          # 픽셀별 배경색과의 거리
 
    # 배경과 비슷한 픽셀 중에서 '테두리와 이어진 덩어리'만 배경으로 본다
    _, labels = cv2.connectedComponents((dist < 10).astype(np.uint8), connectivity=4)
    touching = np.unique(np.concatenate([labels[0], labels[-1], labels[:, 0], labels[:, -1]]))
    bgmask = np.isin(labels, touching[touching > 0])
    ...

    # 경계 띠에는 배경색과의 거리로 부드러운 알파를 준다
    alpha[edge] = np.clip((dist[edge] - 6) / 40, 0, 1)
 
    # 관측색 P = α·C + (1-α)·bg 이므로, 원래 색 C = bg + (P - bg) / α
    m = edge & (alpha > 0)
    rgb[m] = bg + (a[m] - bg) / alpha[m][:, None]

boxes = [f.getchannel("A").getbbox() for f in frames]
l = min(b[0] for b in boxes) - PAD
t = min(b[1] for b in boxes) - PAD
r = max(b[2] for b in boxes) + PAD
b = max(b[3] for b in boxes) + PAD
 
meta = {
    "stage": [1920, 1080],          # 원본 영상 크기(구도)
    "box": [l, t, r - l, b - t],    # 원본에서 캐릭터 영역의 x, y, w, h → [497, 38, 912, 1042]
}

const [sw, sh] = sprite.stage;
const [x, y, w, h] = sprite.box;
const box = {
  left: `${(x / sw) * 100}%`,
  top: `${(y / sh) * 100}%`,
  width: `${(w / sw) * 100}%`,
  height: `${(h / sh) * 100}%`,
};
 
<div style={{ aspectRatio: `${sw} / ${sh}` }} className="relative">
  <div ref={ref} className="absolute" style={{ ...box, backgroundImage: `url(${sprite.src})` }} />
</div>

cols, rows = 8, -(-n // 8)                        # 62프레임 → 8×8
assert cols * fw <= 16383 and rows * fh <= 16383  # WebP 한계
sheet = Image.new("RGBA", (cols * fw, rows * fh))
for i, frame in enumerate(seq):
    sheet.paste(frame, ((i % cols) * fw, (i // cols) * fh))
sheet.save("sprite.webp", "WEBP", quality=82, alpha_quality=90, method=6)

preload(sprite.src,   { as: "image", fetchPriority: "high", media: "(min-width: 768px)" });
preload(sprite.srcSm, { as: "image", fetchPriority: "high", media: "(max-width: 767px)" });

.character-sprite { background-image: var(--sprite); }
@media (max-width: 767px) {
  .character-sprite { background-image: var(--sprite-sm); }
}