내 걸 만들어요.

벽

모든 패턴이 돌아가요.

community.patternflow.work엔 사람들이 나눈 패턴이 전부 걸려 있어요. 카드에 마우스를 올리면 재생되고, 화면 위에서 휠을 굴리면 노브가 돌아가요. 화면은 왼쪽부터 K1–K4로 나뉘어 있어요.

구경하는 데는 계정이 필요 없어요. 폰에선 카드가 멈춘 그림이라, 눌러서 들어가야 움직여요.

.h

.h가 있어야 보드에 올라가요.

여기 패턴은 전부 자바스크립트예요. 브라우저에서 돌아가는 게 그거예요. 보드는 C++로 돌아가서, 펌웨어 헤더인 .h가 있어야 올릴 수 있어요.

그런 패턴은 화면 구석에 .h가 붙어 있어요. Flashable now를 누르면 그것만 남아요.

패턴 하나

하나만 보드로 보내요.

.h가 있는 패턴을 열고 ↗ Send to my Patternflow, 이어서 Send over Wi-Fi를 눌러요. 보드의 Patterns 페이지가 열리면서 그 패턴을 알아서 받아 설치해요. 계정도 케이블도 필요 없어요.

바로 목록에 들어가요. K4를 꾹 눌러 찾아보세요.

안드로이드라면 같은 창의 Board address에 K2로 본 IP 주소를 먼저 넣어요.

내 덱

내 덱을 만들어요.

덱은 재생 순서예요. 20개까지, 이 브라우저에 담겨요. .h가 있는 카드의 +를 누르거나, 카드를 아래쪽 덱 바에 끌어다 놓아요. 칸을 끌면 자리가 바뀌고, ✕ 위에 놓으면 빠져요.

Send to my board가 덱을 빌드하고(계정이 필요해요), 이어서 Send over Wi-Fi가 보드로 넘겨요. 폰에선 위쪽의 ▦ 칩에 덱이 있어요.

펌웨어 v3.10.4까지는 Send over Wi-Fi로 보내면 이 순서가 빠져요. 다음 펌웨어부터는 따라가요. 그전까진 ↓ .zip을 보드의 Patterns 페이지에 올리면 순서까지 들어가요.

남의 덱

남의 덱을 통째로 가져와요.

Decks 페이지엔 사람들이 자신 있게 내건 덱이 있어요. 연주 가이드 03에서 올린 Basics도 Ships with Patternflow 아래에 있어요. 커뮤니티 덱을 열어 Install to my board를 누르면 계정 없이, 순서까지 그대로 들어가요.

Copy into my deck을 누르면 아래쪽 바의 내 덱으로 가져와요. 고친 다음 보내면 돼요.

내 것으로

랩에서 열어요.

패턴 페이지마다 Open in Pattern Lab이 있어요. .h가 없어도요. 복사본이 랩에서 열리고, 거기서 공유하면 원본과 연결된 내 포크로 올라가요.

이때 열리는 건 community.patternflow.work의 랩이에요. 초안도 따로라서, 거기서 하던 건 Recent ▾에 남아요. 내 패턴 만들기는 바로 다음이에요.

Pattern Lab

랩을 열어요.

패턴 랩은 patternflow.work/pattern-lab에 있어요. 브라우저에서 돌아가서 설치할 게 없고, 만들기 시작하는 데 계정도 필요 없어요. 왼쪽은 미리보기, 가운데는 코드, 오른쪽엔 노브와 Color Ramp가 있어요.

화면이 넉넉하면 이 카드 옆에 바로 열려 있어요. 이 브라우저에 저장된 것까지 그대로인 진짜 내 랩이라, 여기서 만든 건 남아요. 포인터가 길을 알려 주고, 누르는 건 직접 해요.

patternflow.work/pattern-lab열기

이름

이름부터 지어요.

name this pattern 자리에 이름을 적어요. 보드 목록에 뜨는 이름이 이거예요. 비워 두면 Code 1 같은 레이어 이름이 대신 보드로 가요.

작업은 하는 대로 이 브라우저에만 저장돼요. 이름 아래에 Saved locally라고 떠요.

AI에게

AI에게 패턴을 받아요.

Copy prompt를 누르고, AI에게 붙여넣어 보내요. AI가 써 준 코드를 복사한 다음 랩에서 Paste를 누르면, 미리보기가 새 패턴으로 바뀌어요.

실제로는 ChatGPT, Claude, Gemini 같은 내 AI에게 보내고, 고를 수 있게 변형 다섯 개가 돌아와요. 화면이 넉넉하면 여기선 정해진 답만 하는 연습용 AI가 대신해요.

Paste는 클립보드를 읽어서, 브라우저가 먼저 허락을 물을 수 있어요. 허용하거나, 대신 랩이 여는 상자에 붙여넣고 확인을 눌러요.

Color Ramp

흑백이 맞아요.

프롬프트는 v-field를 달라고 해요. 코드는 픽셀마다 0에서 1 사이 값만 내고, 색은 그 레이어의 Color Ramp가 입혀요. 램프는 검정에서 흰색으로 시작해요.

Random ramp를 누르면 미리보기에 그 색이 입혀져요. 또 누르면 다른 색이 나오고, 바를 클릭하면 지점이 생겨요. 램프는 패턴과 함께 보드로 가요.

노브

노브의 범위를 정해요.

슬라이더 네 개가 보드의 노브예요. 맨 위가 K1이고, 모든 레이어가 같이 써요. 하나를 끌면서 미리보기를 봐요.

양옆 칸이 범위예요. 두 번 클릭하고 숫자를 적어요. 이름과 범위는 코드에서 // @knobs로 시작하는 줄에서 와요. 범위를 넓히면 노브가 더 크게 움직여요. 보드에서도요.

To hardware

보드용 프롬프트가 하나 더 있어요.

보드는 C++로 돌아가서, 패턴은 .h 헤더가 되어야 보드로 가요. 이것도 AI가 써요. To hardware를 누르고 Copy the conversion prompt로 복사해서 AI에게 보내요.

AI가 써 준 .h를 복사해요. 다음 단계에서 랩에 넣어요.

Apply

내 보드에 올려요.

.h를 Copy the conversion prompt 아래 상자에 붙여넣어요. Looks like a header ✓가 뜨면 #pragma once로 잘 시작한다는 뜻이에요. Next →를 눌러요.

↗ Apply to my Patternflow를 누르면 커뮤니티 서버가 모듈을 만들어요. 그래서 로그인이 필요해요. 이어서 Send over Wi-Fi를 누르면 보드의 Patterns 페이지가 열리고 알아서 설치해요. K4를 꾹 누르면 목록에 그 이름으로 있어요.

컴퓨터가 보드와 같은 와이파이에 있어야 해요. 안드로이드라면 보드의 NETWORK 화면(K2를 꾹)에 뜨는 IP를 Device address에 먼저 넣어요.

레이어

겹쳐요.

+ Code는 램프를 따로 가진 패턴을 위에 하나 더 얹고, + Pixel은 픽셀아트나 이미지를 올릴 레이어를 더해요. masks layer below에 체크하면 새 레이어가 바로 아래 레이어를 오려 내요.

그리는 레이어라면 그 자리에 Opacity와 Blend가 있어요. 보드로 보낼 땐 코드 레이어마다 프롬프트가 하나씩이에요.

Graphic Export

그림과 영상.

Graphic Export 탭에서 크기를 고르고 Save PNG를 누르면 내 패턴이 그림이 돼요. 한 변 4096px까지 되고, ● Record는 MP4나 WebM으로 녹화해요. 전부 내 브라우저 안에서 해요.

Director

노브의 타임라인.

Director 탭에서 줄의 조금 떨어진 두 곳을 두 번씩 클릭해요. 키프레임 두 개와 그 사이 곡선이 생겨요. ▶를 누르면 노브가 그 곡선을 따라 움직여요.

.pfs는 퍼포먼스 에디션 보드에서, .mid는 에이블톤에서 쓰고, Render…는 영상으로 뽑아요.

커뮤니티

나눠요.

To hardware에서 Next →를 누르면 Upload to the community가 있어요. .h까지 함께 올려서, 누구든 바로 자기 보드에 넣을 수 있어요. 맨 위 Share는 .h 없이 올려요. 로그인은 올릴 때 해요.

남의 패턴에서 열었다면 그 패턴의 포크로 올라가요. 01에서 본 JS만 있는 패턴도 같은 식이에요. 여기서 .h를 만들어 그 패턴 페이지의 Port this pattern (.h)로 제안해요.