Skip to content

[DONE] 드라큘라 실험: 그림 그대로 움직이기 - #364

Merged
engmung merged 16 commits into
devfrom
claude/ops-rules-guide-ezgd4k
Nov 3, 2026
Merged

engmung merged 16 commits into
devfrom
claude/ops-rules-guide-ezgd4k

Conversation

@patternflow-bot

@patternflow-bot patternflow-bot commented Nov 2, 2026 •

Copy link
Copy Markdown

ops / https://claude.ai/code/session_01S7a4vQFipy7iyGTFUg3Xue

창작자가 AI 로 만든 드라큘라 그림을 점 하나 바꾸지 않고 부위로 나눠, 숨 쉬고 망토 끝이 흔들리고 붉은 눈이 맥박 치다가 8.4초마다 손으로 망토를 끌어내 펼치는 패턴으로 만들었어요. 심사 둘(악마성 플레이어 · 도트 아티스트)은 세 번 고친 뒤에도 7 · 7 이었고, 펼치기를 더 살리려면 펼친 자세 한 장을 손으로 그려야 한다는 데까지 왔어요.

좋아지는 것: 드라큘라 그림이 패널에서 숨 쉬고 망토를 펼친다 — 정지 그림이 살아 움직인다

led: base.js 정지 · 1.0초 쉬기 · 2.0초 망토 펼침

움직이는 채로 보기: https://htmlpreview.github.io/?https://github.com/Patternflow-lab/Patternflow/blob/claude/ops-rules-guide-ezgd4k/incoming/pattern-study/index.html

화면

strip: 2.0초부터 1/3초 간격 열두 장

look-dracula

위 두 그림 주소는 PR 본문을 쓰는 길(MCP 와 gh 둘 다)에서 백틱으로 싸여, 그림 대신 주소 글로 보일 수 있어요. 주소를 열면 그림이 나와요.

할 일

  • craft/dracula/ 읽기 — base.js 와 panel.png 는 점까지 같아요(다른 LED 0)
  • 부위 나누기 — 머리 · 가슴 · 앞 손 · 지팡이 손 · 왼 망토 띠 11 · 오른 망토 자락 4 · 코트 · 다리 · 망토 밑 코트(inside), keelson.js 의 PARTS 꼴
  • 쉬기 — 숨 두 줄 · 망토 끝점 1~2점 · 눈빛 맥 · 눈꺼풀 반 내리기. 첫 프레임은 panel.png 와 다른 LED 0
  • 동작 하나 — 앞 손이 망토를 가슴 높이에서 4점 끌어내 펼치고 눈을 번뜩여요
  • 노브 넷 · 버튼 — study.ts --only dracula 통과
  • look.ts 의 led · strip 을 led-base 와 나란히
  • 심사 둘 — 네 번 받았고, 고침 세 번에 8을 못 넘어 7 · 7 로 끝
  • 등록 · 색인 — README 「공들이기」 줄, index.html, craft/dracula/look-dracula.png · log.md

한 일

patterns/dracula.js 는 base.js 의 28색과 128줄을 부위 격자로 나눠 담아요. 부위를 그대로 겹치면 정지 그림이 점까지 다시 나와요. 부위마다 가장자리 점을 복사해 다음 부위 밑에 깔아 둬서, 움직일 때 드러나는 자리는 원본 옆 칸의 색으로 메워져요. 새로 찍은 점은 없고 새 색은 눈빛 둘(C 0xc41b25, D 0xe31a1e)뿐이에요.

움직임은 이래요. 허리 위가 한 줄, 0.25초 뒤 한 줄 더 오르고 같은 길로 내려와요(한 숨 3.23초). 숨이 끊는 허리 솔기는 열마다 세로로 같은 색이 이어지는 줄을 골라 복사한 줄이 그 안에 묻혀요. 망토 왼쪽 끝점은 2점, 오른쪽 끝은 1점 안쪽으로 흔들려요. 눈은 눈동자 가운데 LED 여섯만 C, D 로 밝아졌다 돌아오고, 이따금 눈꺼풀이 반 내려와요. 동작은 1.6초에 시작해 1.93초 동안이에요. 손이 망토를 한 칸 당겼다가 가슴 높이에서 4점 끌어내고(아래로 3 · 2 · 1 로 줄어 무릎 위 82줄부터 제자리), 손을 한 줄 들고 눈을 번뜩였다가 내려놓아요. 망토는 겉감과 붉은 안감과 안감을 닫는 선이 한 덩어리로 움직이고, 열린 자리에는 뒤의 코트가 드러나요.

판정 판 악마성 플레이어 도트 아티스트 그다음 고친 것
1 띠마다 다르게 밀어 안감을 s 로 넓힘 · 숨 한 줄 6 · 주름이 가로로 썰리고 바깥선이 톱니, 오른 자락이 x 63 에 닿음, 숨이 안 보임 7 · 넓어진 안감이 밋밋한 적갈색 면, 눈 감은 장이 시선을 지움 가슴~무릎을 한 덩어리로, 안감에 s w x 접힘, 숨 두 단, 자락은 끝만
2 위 고침 7 · 펼친 안감이 평면 빨강, 윤곽과 밑단의 박자가 없음 6 · 밝은 단색 판에 곧은 세로 경계, 머리 두 번째 줄이 얼굴을 늘림 안감을 망토와 같이 옮겨 코트가 드러나게, 숨은 허리에서 두 줄, 눈꺼풀 반만
3 위 고침 7 · 「살아 보여요」. 아래 망토가 x 0 에 눌려 외곽선이 잘림, 민 자리 코트 띠가 넓음 7 · 눈빛이 눈 모서리까지 번짐, 망토 자락과 손이 굳어 보임 가슴에서만 4점, 무릎 위에서 0, 끝점만 흔들림, 눈빛은 눈동자 가운데만
4 지금 판 7 · 원래 밝기의 눈이 번뜩이는 장과 견주면 꺼진 듯, 1/3초 간격으로는 움직임이 작음 7 · 눈빛이 둘레 피부까지 번져 보임, 손~깃 사선 계단이 고르지 않음, 움직임이 손과 눈에 몰림 고침 세 번을 다 써서 끝

심사에게는 ref.png 와 결과 그림(led.png, strip.png, 0.4초 간격 24장, 크게 6장)만 뜻 없는 이름으로 줬고, 판마다 새 에이전트로 받았어요.

증거

web/ 에서:

$ npx tsx ../incoming/pattern-study/tools/study.ts --only dracula
dracula   pixel   0.015  0.035  0.235  0.415  0.608  0.152  0.014  40/81/60   0.6  0.01 0.03 0.04 0.09
1 of 1 patterns pass

$ npx tsx ../incoming/pattern-study/tools/look.ts dracula --out /tmp/look/5
  lit 5078 LEDs (62.0%) · colours 27 · off on the panel (1-19) 0 · barely there (20-47) 2203 · near white 0
  over 10 s: 43.4% of lit LEDs change · one-frame blips 0

노브 반응을 소수 넷째 자리까지 재면 K1 0.0135 · K2 0.0287 · K3 0.0375 · K4 0.0894 예요(문턱 0.012). 첫 프레임(1/30초)은 panel.png 와 다른 LED 0 이에요. 한 프레임 깜빡임은 노브 여덟 자리([0,2,0,0.06] [0,3,..] [0,2.5,..] [0,0.5,..] [0,1.1,..] [1,2,..] [1,3,..] [0,1.3,0.6,0.7])에서 60초씩 돌려 0이에요.

$ npx tsx ../incoming/pattern-study/tools/study.ts
dracula   pixel   0.015  0.035  0.235  0.415  0.608  0.152  0.014  40/81/60   0.6  0.01 0.03 0.04 0.09
736 of 736 patterns pass
wrote index.html (12779 KB)

dev 와 두 번 겹쳤어요. 11월 2일엔 Tollard 97판(#363), 11월 3일엔 명화 바퀴 큰 파도(#365 · #366)가 index.html 과 README 「공들이기」 표에서요. 표는 dev 의 줄을 다 살리고 Dracula 줄을 판 차례(97, Great Wave 98 앞)로 더했고, 그 줄 글을 지금 움직임(허리 위 두 줄 숨, 안감째 끌어내는 망토)에 맞췄어요. index.html 은 손으로 고르지 않고 두 판의 index.html 에 적힌 잰 값으로 buildPage 를 다시 불러 지었어요. dev 판과 견주면 Dracula 한 장만 더해지고 나머지 736장은 같아요. 그 뒤 들어온 창작자 커밋(995fd98 · 411ba90)은 ROUND.md 와 명화 참고 그림만 바꿔 index.html 의 입력은 그대로예요. 마지막 판(d082b49)에서 돌린 결과예요.

$ npx tsx ../incoming/pattern-study/tools/study.ts --check
dracula      pixel   0.015  0.035  0.235  0.415  0.608  0.152  0.014  40/81/60     0.4  0.01 0.03 0.04 0.09
great-wave   print   0.089  0.083  0.877  0.185  1.000  0.223  0.010  100/100/100  0.7  0.33 0.08 0.08 0.03
737 of 737 patterns pass
index.html is up to date

같은 판의 GitHub 검사 「Docs point at files that exist」 · 「Drift checks」 는 둘 다 success 예요. git diff --stat origin/dev -- incoming/pattern-study 에는 README.md · craft/dracula/log.md · craft/dracula/look-dracula.png · index.html · patterns/dracula.js 다섯만 보여요.

실행법

web/ 에서 npx tsx ../incoming/pattern-study/tools/look.ts dracula --out /tmp/look/d 로 그림을 그려요. 움직이는 채로는 위 htmlpreview 주소에서 Dracula 카드를 열어요. Pattern Lab 에는 patterns/dracula.js 를 CODE 칸에 붙여요.

가정

  • 이 일은 바퀴가 아니라서 판 번호가 없어요. 파일 머리 // Round: 는 마지막 판(96) 다음인 97로 두었고, 바퀴가 이 폴더를 고르지 않게 log.md 첫 줄은 상태: a 끝 이에요. README 「공들이기」 표의 둘째 칸은 「실험」이에요.
  • K1 은 「작품 2」 꼴의 동작 고르기인데 동작이 하나라 0과 1이 같아져 검사를 못 넘어요. 그래서 0 은 쉬기 사이 망토 펼치기, 1 은 쉬기만이에요. K3 은 팔레트 넷, K4 는 좌우 뒤집기예요. 배경 노브는 창작자가 배경을 검정으로 하라고 해서 쓰지 않았어요. 첫 동작의 키 셀(망토가 열린 자세)이 2.0초를 덮어요.
  • 눈빛 C, D 두 색만 원본 색표 밖이에요. D 는 ref.png 의 눈 빨강 (227, 26, 30) 근처로, 상자 필터가 눈을 x 0x981523 로 어둡게 줄였기 때문이에요. 마지막 판에서 바뀌는 건 눈 가운데 LED 여섯뿐이고, 「둘레 피부까지 분홍」이라는 지적은 led 그림에서 밝은 LED 가 옆 살색과 붙어 보인 것으로 읽었어요.
  • (5759, 110112) 의 밝은 점 몇 개는 ref.png 에 남은 네 갈래 별 워터마크 자국이에요. 「첫 프레임은 panel.png 와 점까지 같다」를 지키려고 지우지 않았어요.
  • 심사는 ref.png(572 × 1024)와 견줬어요. 얼굴이 하얗게 뜸, 셔츠가 살구색, 쉬는 눈이 어두움 같은 지적은 base.js 로 옮길 때 생긴 것이라 이 일에서 고치지 않았어요.
  • 파일은 25.7 KB 로 Aquarium(25 KB) 근처예요.
  • 창작자가 같은 날 작품 2 를 끝냈고(「결과물들이 다 너무 처참하고 솔직히 별로야」, 995fd98), 11월 3일엔 바퀴를 공들이기 전 판으로 되돌렸어요(411ba90, craft/ 는 그대로). 이 실험은 작품 2 의 캐릭터가 아니라 따로 받은 일이라 그대로 냈고, log.md 첫 줄도 「끝」이라 바퀴가 집어 가지 않아요.

Changelog

없음. incoming/ 은 원래 레포로 가지 않아요(ROUND.md 「PR 본문」).

경험

언제: 정지 그림을 부위로 나눠 동작을 줄 때, 특히 망토나 천을 펼치는 동작
교훈: 띠를 옆으로 밀고 드러난 자리를 새 색으로 채우면 판정이 「색이 번진다」「판이 미끄러진다」로 읽으니, 펼치는 자세는 손으로 한 장 그리거나 겉감과 안감을 같이 옮겨 원래 평평한 면만 드러나게 한다
근거: Patternflow#364 에서 판정 여덟 가운데 다섯이 망토를 편 장을 가장 약한 것으로 짚었고, 띠마다 밀기 6 · 7, 안감 넓히기 7 · 6, 통째 옮기기 7 · 7 로 8을 못 넘었다


Generated by Claude Code

claude added 14 commits November 2, 2026 10:32
@patternflow-bot patternflow-bot changed the title [WIP] 드라큘라 실험: 그림 그대로 움직이기 [DONE] 드라큘라 실험: 그림 그대로 움직이기 Nov 2, 2026
@patternflow-bot
patternflow-bot marked this pull request as ready for review November 2, 2026 13:46
@patternflow-bot patternflow-bot changed the title [DONE] 드라큘라 실험: 그림 그대로 움직이기 [WIP] 드라큘라 실험: 그림 그대로 움직이기 Nov 3, 2026
… 지금 움직임에 맞추며, index.html 은 두 판의 잰 값으로 다시 짓는다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S7a4vQFipy7iyGTFUg3Xue
@patternflow-bot patternflow-bot changed the title [WIP] 드라큘라 실험: 그림 그대로 움직이기 [DONE] 드라큘라 실험: 그림 그대로 움직이기 Nov 3, 2026
@engmung
engmung merged commit 7781bcd into dev Nov 3, 2026
2 checks passed
@engmung
engmung deleted the claude/ops-rules-guide-ezgd4k branch November 3, 2026 02:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants