[patternflow-bot]

studio / https://claude.ai/code/session_01Fp7di6rhh5oFHoBU2khajT

창작자 지시 3 「텍스트를 코드로」예요. Text 패널에 「Copy as code」가 생겨서, 그린 글자를 글꼴 없이 도는 패턴 코드로 복사해 AI 에게 흐르기나 반짝임을 붙여 달라고 할 수 있어요. 기기로 가는 C++ 헤더를 g++ 로 실제로 컴파일해 미리보기와 같은 픽셀인지 재는 시험도 붙였고, 글자만 있는 판이면 To hardware 가 모델 없이 끝난 헤더라고 말해요.

좋아지는 것: 글자를 글꼴 없는 코드로 복사한다 — AI 에게 흐르기·반짝임을 시켜 판에 올린다

체크리스트

• incoming/ROUND.md 읽기: 고르는 차례 0, 지시 1 은 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 · 지시 2 는 [DONE] Pattern Lab 에 텍스트 레이어가 생겨 내 기기의 글꼴로 글을 넣고 끌어 옮긴다 #184 에서 끝, 남은 맨 위 줄은 지시 3
• 앞 바퀴 PR 의 세 직함 댓글 · 리뷰 · 줄 댓글: 일을 시키는 글 없음 (레포의 이슈 댓글 2개 가운데 세 직함 · 꼬리말 없는 글은 [DONE] hardware: Besoiobiy's printed case as a remix folder #1 의 옮김 알림 하나, 줄 댓글 · 리뷰 0)
• 미리보기 · 내보낸 JS · C++ 헤더가 같은 픽셀인지 재는 시험 (src/lib/lab/textExport.test.ts, 헤더는 호스트 g++ 로 컴파일)
• Text 패널 「Copy as code」: 그린 글자를 글꼴 없는 패턴으로, 효과 자리 둘(DISTORT · LIGHT)
• To hardware: 코드 레이어가 없는 판은 「Nothing here needs a model」
• 시험 110개 더함 · 다섯 검사 · 폰 390 / 1440 사진
• dev merge (그새 dev 가 움직이지 않음, [DONE] 직전에 다시 봐도 4bce0f2 그대로)
• GitHub 검사 초록 뒤 [DONE]

한 일

#184 가 텍스트 레이어를 비트맵으로 두 내보내기에 실었지만, 기기로 가는 헤더가 미리보기와 같은 그림을 내는지 재는 곳이 없었어요. textExport.test.ts 는 To hardware 가 만드는 헤더를 그 자리에서 g++ 로 컴파일해서 돌리고, 나온 프레임을 Lab 미리보기와 바이트로 맞대요. firmware 의 core_math · core_color · core_noise · core_mem · core_tables · core_params 는 진짜 파일을 그대로 쓰고, 패널 · 엔코더 · Arduino.h 만 대역이에요. 판은 75개예요. 이름 붙인 넷(128×64 한 장, 부드러운 가장자리와 반투명 램프, 텍스트 마스크 아래 손으로 옮긴 코드 레이어, 뒤집은 마스크), 시드로 만든 텍스트 · 픽셀 네 장짜리 70판, 그리고 아래의 반 단계 한 픽셀이에요. 프레임 크기 64×32 · 32×16 · 24×12 는 setFrame 길을 지나요.

처음 돌렸을 때 Random15 의 (23, 2) 파랑이 미리보기 27, 헤더 28 이었어요. 그 자리는 픽셀 (131, 7, 75) 알파 187 이 50% add 로 얹힌 곳이라 75 × 187/255 × 0.5 = 27.5, 정확히 반이에요. 브라우저의 double 과 S3 의 float 가 187/255 를 서로 반대쪽으로 조금씩 틀려서 반올림이 갈려요. 그래서 시험을 둘로 나눴어요. 불투명도가 100 · 80 · 60 · 20% 면 분모가 홀수라 반이 나올 수 없고, 24판이 바이트까지 같아야 해요. 50% · 25% 가 섞인 50판은 다른 채널마다 분수(BigInt)로 셈을 다시 해서, 정확히 n + 1/2 인 곳에서만 한 단계 차이를 받아요. 시드 11~60 에선 한 채널(Halves22)이에요.

Text 패널의 「Copy as code」는 Pixel 패널의 것과 같은 pixelToCode.ts 를 써요. 그려 둔 글자를 잘라 RLE 로 넣고, 머리 주석에 글 · 글꼴 · 크기를 적어요. 코드에는 효과를 얹을 자리가 둘 있어요. DISTORT HERE 는 좌표를 휘는 칸이고 예로 흐르기(왼쪽으로 가서 오른쪽에서 다시 들어옴) · 물결 · 위아래 흔들기를 적었어요. 새로 생긴 LIGHT HERE 는 샘플 뒤 r · g · b · a 를 바꾸는 칸이고 예로 반짝임 · 켜졌다 꺼지기를 적었어요. 시험이 흐르기 예를 그대로 넣어 1초에 정확히 20픽셀 왼쪽으로 가는지 봐요. 글을 바꾸면 다음 복사가 새 글자를 실어요(TextPanel 시험이 ab → abcd 로 SPRITE_W 4 → 8 을 봐요). 판에 글자가 하나도 없으면 단추가 「No letters on the frame」, 클립보드가 막히면 「Copy failed」예요.

To hardware 창은 코드 레이어가 없는 판에도 「0 layers to translate — 0 done」과 「Translating it is a model's job」을 보였어요. 텍스트 · 픽셀 레이어는 헤더에 픽셀로 들어가서 그 판의 헤더는 이미 끝난 것이라, 그때는 「Nothing here needs a model. Text and pixel layers go into the header as the pixels they show, so it is finished as it is. The board needs no font for the letters.」라고 말해요(마지막 문장은 텍스트 레이어가 있을 때만).

증거

web/ 에서, 이 브랜치 머리로:

$ npm ci
(exit 0 · package.json · 잠금 파일 안 건드림)
$ npm run lint -- --max-warnings=0
> eslint --max-warnings=0              (출력 없음, exit 0)
$ npm run typecheck
> tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel   (출력 없음, exit 0)
$ npm run build
✓ Compiled successfully in 24.4s
✓ Generating static pages using 3 workers (145/145) in 14.4s   (exit 0)
$ npm run check:ci
 Test Files  91 passed (91)
      Tests  1056 passed (1056)
passed   audio-vectors … passed   virtual-panel
skipped  links-absolute              (이 클론에 v1.0.0~v3.1.0 태그 없음)
skipped  roadmap                     (gh 로그인 없음 · drift.yml 이 다시 돌림)
exit 0
$ npm run check:voice
check:voice: nothing found
$ npm run check:human-lock
check:human-lock: no locked words changed
$ python3 .github/scripts/check_links.py     (저장소 뿌리)
all 907 relative links resolve
$ npx vitest run src/lib/lab/textExport.test.ts src/app/pattern-lab/panels/TextPanel.test.tsx src/app/pattern-lab/HardwareModal.test.tsx
 ✓ src/app/pattern-lab/HardwareModal.test.tsx (10 tests)
 ✓ src/app/pattern-lab/panels/TextPanel.test.tsx (12 tests)
 ✓ src/lib/lab/textExport.test.ts (106 tests) 1897ms   (헤더 75개를 한 번에 컴파일 1.4초)

GitHub 검사(머리 b838211):

Docs point at files that exist | completed | success
Drift checks | completed | success
Web CI | completed | success

시험이 진짜로 잡는지 hExport.ts 를 잠깐 망가뜨려 봤어요(되돌림, 커밋 안 함):

rleDecode 의 k < rle[i] 를 k <= rle[i] 로           → 헤더 시험 10개 빨강
픽셀 마스크 문턱 p[3] >= 128 을 >= 129 로            → 2개 빨강 (가장자리 값에 127 · 128 을 넣기 전엔 0개였어요)
알파 p[3] / 255.0f 를 / 256.0f 로                   → 10개 빨강

빌드한 사이트(next start)와 next dev(To hardware 단추는 NEXT_PUBLIC_BUILD_ENABLED 빌드에만 있어서)를 Playwright 로 연 결과예요. 글꼴 파일을 넣은 뒤 글을 고치고 Copy as code · To hardware 를 누르는 동안 나간 바깥 요청은 0, 쪽 오류도 0이에요.

390  { errors: [], requestsAfterFont: [], codeChars: 7758 }
1440 { errors: [], requestsAfterFont: [], codeChars: 7758 }

클립보드에 들어간 코드를 Node 에서 글꼴 없이 돌린 결과예요(앞 다섯 줄만, # 가 켜진 LED):

lit 1608 LEDs, x 23~105, y 8~49, colours {"232,85,46":1608}
.###........####.....###########.....####...........####................#####......
#####......#####....############.....####...........#####............###########...
#####......#####....############.....####...........#####...........#############..
#####......#####....############.....####...........#####..........###############.

같은 창의 「Copy .h」로 받은 헤더를 g++ -std=c++17 -O2 -Wall -Werror 로 컴파일해 돌리면 복사한 JS 와 같아요:

header from the To hardware window, compiled with g++ -O2: 1608 LEDs lit; channels that differ from the copied JS: 0

실행법

cd web && npm ci
npx vitest run src/lib/lab/textExport.test.ts        # 헤더 절은 c++ · g++ · clang++ 가운데 하나가 있어야 돌아요
npm run build && npx next start -p 3100
# http://localhost:3100/pattern-lab — Layers 의 「+ Text」 → Text 탭 맨 아래 「Copy as code」

가정

• 작업 글은 앞 바퀴 댓글 다음 「후보」 표를 말하지만, ROUND.md 고르는 차례 0 이 「창작자 지시」를 먼저 둬서 지시 3 을 맡았어요([DONE] Pattern Lab 에 텍스트 레이어가 생겨 내 기기의 글꼴로 글을 넣고 끌어 옮긴다 #184 와 같은 읽기).
• 지시 표의 줄은 「내보낸 JS · C++ 헤더 · .pfm 이 같은 그림」을 말하고, 창작자 말은 「그 폰트로 만든 텍스트를 … 코드형태로 옮기는 기능 … 픽셀아트레이어랑 마찬가지로 그걸 이후에 패턴화해서 어떤 효과를 줄 수 있을」이에요. 두 내보내기는 [DONE] Pattern Lab 에 텍스트 레이어가 생겨 내 기기의 글꼴로 글을 넣고 끌어 옮긴다 #184 가 이미 비트맵으로 실었으니 시험으로 확인만 했고, 창작자 말의 「픽셀아트레이어랑 마찬가지로」는 Pixel 패널의 「Copy as code」로 읽어 텍스트에도 같은 단추를 뒀어요.
• 「다음 효과를 얹을 자리」는 복사한 코드의 DISTORT HERE · LIGHT HERE 두 칸이에요. 두 내보내기(flatten.ts · hExport.ts)에 매 프레임 효과를 돌릴 빈 자리를 미리 만들지는 않았어요. 아무것도 하지 않는 코드를 기기 헤더에 싣게 되고, 지시 4 가 효과 셋을 정할 때 그 꼴로 짓는 게 맞다고 봤어요.
• LIGHT HERE 칸은 Pixel 패널의 「Copy as code」에도 생겨요. 같은 파일이고, 그리는 픽셀은 그대로예요(check:pixelcode 통과).
• .pfm 을 기기에서 돌려 보진 못했어요. 이 컨테이너엔 보드가 없어요. .pfm 은 To hardware 헤더를 Xtensa 로 구운 것이라 이번 증거는 그 헤더를 호스트 g++ 로 돌린 데까지예요. Xtensa 빌드는 곱하기와 더하기를 하나로 합칠 수 있어서(FMA) 반에 아주 가까운 값은 기기에서 한 단계 다를 수 있어요.
• 50% · 25% 에서 정확히 반인 채널이 한 단계 갈리는 것은 고치지 않았어요. 텍스트만의 일이 아니라 미리보기와 헤더의 셈 전체 일이에요. 기기에서 double 을 쓰면 한 프레임이 수십 ms 늘고, 정수 셈으로 바꾸면 미리보기 · 두 내보내기 · 헤더를 다 바꿔야 해요. 시험은 그 차이를 「정확히 반인 곳에서만, 한 단계」로 못 박아서, 그 밖의 어긋남은 빨개져요.
• 시험이 child_process 로 C++ 컴파일러를 불러요. 컴파일러가 없는 책상에선 헤더 절이 건너뛰고, CI 가 켜진 곳(GitHub 러너)에선 없으면 실패해요. firmware/ 는 읽기만 해요(-I 로 include).
• 판에 글자가 없을 때 단추 글은 Pixel 의 「Layer is empty」 대신 「No letters on the frame」이에요. 글이 비었거나 판 밖으로 다 나간 때라서요.
• To hardware 사진은 next dev 로 찍었어요. next dev 가 web/AGENTS.md 에 블록을 다시 써서 git checkout 으로 되돌렸어요(커밋에 안 들어감).
• 앞 바퀴가 고친 것을 되돌린 곳은 없어요.

Changelog

Web

• Pattern Lab's text layer copies out as code, and its firmware header is checked against the preview. Copy as code in the Text panel hands the drawn letters to an AI chat as a pattern that needs no font, with a marked place to warp them and another to change their light. To hardware says a stack of text and pixel layers is a finished header with nothing to translate. A new test compiles that header with the host's C++ compiler and finds it lights the same pixels as the Lab preview and the flattened JS, apart from exact half steps at 50% and 25% opacity, where the browser's doubles and the board's floats round one level apart.

경험

언제: 바퀴에서 Pattern Lab 의 To hardware 창을 사진으로 찍을 때
교훈: next start 빌드엔 To hardware 단추가 없으니(NEXT_PUBLIC_BUILD_ENABLED 없음) next dev 로 찍고, 찍은 뒤 next dev 가 다시 쓴 web/AGENTS.md 를 git checkout 으로 되돌린다
근거: #186 에서 next start -p 3100 로 띄운 Lab 머리줄엔 To hardware 가 없었고(lib/community/apiBase.ts 의 buildsConfigured), next dev -p 3200 으로 찍은 뒤 git status 에 M web/AGENTS.md 가 떠 되돌렸어요

바퀴

바퀴 63 · 지시 3 「텍스트를 코드로」

다음 바퀴

• 지시 4 「텍스트 효과 첫 셋」: 흐르기 · 반짝임 · 색 램프 따라 바뀌기를 Text 패널의 선택으로, 두 내보내기에도 같게. 복사한 코드의 흐르기 · 반짝임 예가 출발점이고, 헤더는 textExport.test.ts 의 컴파일 틀로 같은 픽셀을 볼 수 있어요.
• 지시 5 「Pattern Lab UI · UX 다듬기」: 지시 4 뒤에 「후보」 표를 Lab 위주로 다시 채워요.
• 그다음 「후보」 표 1위: WebGL 을 못 쓰는 브라우저에서 첫 화면과 Build · Pattern · Inside 탭이 오류 화면 대신 글과 단추를 보여 준다.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Fp7di6rhh5oFHoBU2khajT